TypeError: $(...).spservices is not a function

I am trying to insert the items to the below list "Display" using csom. showing the error TypeError: $(...).spservices is not a function 

this my code once for the click event

<script type="text/javascript">

    //jQuery(document).ready(function ($) {
    //    Insert_Click()
    //});



    function Insert_Click() {
        try {
            var name = $("#<%=txtname.ClientID%>").val();
            var gender = $("#<%=ddlgender.ClientID%>").val();
            var email = $("#<%=txtEmail.ClientID%>").val();
            var city = $("#<%=txtcity.ClientID%>").val();

            $().SPServices({
                webURL: _spPageContextInfo.webAbsoluteUrl,
                operation: "UpdateListItems",
                async: false,
                batchCmd: "New",
                listName: "Details",
                valuepairs: [["Name", name]],
                completefunc: function (xData, Status) {
                    alert(xData);
                }
            });
        }
        catch (e) {
            alert(e);
        }

        return false;
    }
</script>

<td colspan="2" class="auto-style1">
                        <input type="image" id="img" value="Click" onclick="return Insert_Click();" />
            </td>