Jquery-基础

Posted 小南瓜

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Jquery-基础相关的知识,希望对你有一定的参考价值。

属性

attr(“属性”,“属性值”)  添加属性

attr(“属性”)  获取属性值

removeAttr()  移除属性

//$("").attr("value")可以简写为
$("").val()

事件

bind(事件类型,处理函数)  绑定事件

事件类型(处理函数)  比如:click()

unbind()  移除所有事件的处理程序

unbind(“click”)  移除所有的click事件处理程序

unbind("click",函数名)  移除click事件的指定名称的处理函数,这种无法移除匿名函数

dom事件不支持多播(一个事件只能注册一个处理函数),JQuery支持多播(一个事件可以指定多个处理函数)

页面加载

window.onload=function(){}  标签加载完成,并且标签指定的资源也加载完成

$(document).ready(function(){})==$(function(){})  标签加载完成,标签指定的资源可能还没有加载完成(比如图片还没加载完成)

隐式迭代

会自动将数组中的每个元素进行事件绑定

集成事件

hover(fn1,fn2)  fn1表示mouseover的处理函数,fn2表示mouseout的处理函数

toggle(fn1,fn2...fnN)  当元素被click后,轮流执行fn1、fn2、fnN方法(注:1.9版本往后不支持事件切换功能)

          var num=0;
                $("div").click(function(){
                    num++;
                    if(num%2!=0){
                        $("div").removeClass("white");
                        $("div").addClass("black");
                    }else{
                        $("div").removeClass("black");
                        $("div").addClass("white");
                    }
                })

one(type,fn)  表示注册的时间只响应一次,然后失效,type表示事件类型

转换

JQuery对象转换成dom对象,通过[下标]的形式返回dom对象

dom对象转换成JQuery对象,$(dom对象)

动态操作元素

创建元素

$("<span>你好</span>")

添加元素

append()  $("#con").append($("<span>hi</span>"));往容器的最后追加自己

appendTo()  $("<span>hi</span>").appendTo($("#con"))把自己追加到容器的最后

prepend()  $("#con").prepend($("<span>hi</span>"));往容器的开头追加自己

prependTo()  $("<span>hi</span>").prependTo($("#con"))把自己追加到容器的开头

after()  同级添加(在当前元素后面)

insertAfter()

before()  同级添加(在当前元素前面)

insertBefore()

删除元素

empty()  清空子元素

remove(selector)  无参表示把自己干掉,有参表示移除符合选择器的元素

省市联动 

var data={
                "北京":["朝阳","海淀","大兴","丰台","昌平"],
                "河北":["邯郸","石家庄","邢台","保定"],
                "山东":["威海","济南","荣成"]
            }
            $(function(){
                //创建一个省的下拉列表
                var proSel = $(<select id="province"></select>);
                //追加到body里
                $(body).append(proSel);
                //创建一个市的下拉列表
                var citySel=$(<select id="city"></select>);
                //追加到body里
                $(body).append(citySel);
                //each遍历data,key为键,value为值
                $.each(data, function(key,value) {
                    var province = $("<option></option>");
                    province.html(key);
                    proSel.append(province);
                });
                $("#province").change(function(){
                    $("#city").empty();
                    //遍历省,key为索引,value为值
                    $.each(data[this.value], function(key, value) {
                        var city = $("<option></option>");
                        city.html(value);
                        citySel.append(city);
                    });
                })
            })

样式操作

addClass()  添加类样式

removeClass()  移除类样式

css()  添加样式

//设置样式
.css("color","red");
//设置多个样式
.css({"color":"red","float":"left"});
//获取样式值
.css("color");

链式编程

$("p").text("哈哈").css("color","yellow");

注:end() 恢复到最近的一次链的破坏

层级选择器

空格,后代元素

>,子元素

+,之后紧邻的一个同级元素

~,之后所有的同级元素

next()、prev()、nextAll()、siblings()、parent()、childre()

过滤选择器

:first、:last、:eq()、:gt()、:lt()、:not(选择器)、:even偶数、:odd奇数

标题的快速获取

//普通方法
$(h1,h2,h3,h4,h5,h6)
//快捷方法
$(:header)

属性选择器

[attr=value]    等于

[attr!=value]  不等

[attr^=value]  以此开头

[attr$=value]  以此结尾

[attr*=value]  包含

[attr1][attr2][attr3]  并且

表单选择器

:input  所有input(不包括select和textare)

:text  所有文本框

:password  所有密码框

:radio  所有单选按钮

:checkbox  所有复选按钮

:submit  所有提交按钮

:image  所有图片(type="image")

:reset  所有重置按钮

:button  所有button

:file  所有文件

:hidden  所有隐藏域

:enabled  可用的

:disabled  不可用的

:checked  选中(radio、checkbox)

:selected  选中(select)

创建表格

var data=[
            {id:"1",country:"china",capital:"北京"},
            {id:"2",country:"US",capital:"纽约"},
            {id:"3",country:"UK",capital:"不知"}
            ];
          var table = $("<table></table>");
                $(body).append(table);
                //遍历对象
                $.each(data, function(index,obj) {
                    var tr = $("<tr></tr>");
                    table.append(tr);
                    //遍历属性
                    $.each(obj, function(key,value) {
                        var td = $("<td></td>");
                        td.text(value);
                        tr.append(td);
                    });
                });

 方法调用

          var id=10;//为window对象定义了属性id
                function showId(){
                    alert(this.id);
                }
                //第一种方式让this指向Person对象
                function Person(){
                    this.id=20;//为类定义了属性id
                }
                var p=new Person();
                p.SayId=showId();//将方法showId赋值给变量
                p.SayId();//调用方法,使用p调用的方法,索引showId函数中的this就是p
                //第二种方式让this指向Person对象()
                function Person2(fn){
                    this.id=20;
                    this.SayId=fn;
                }
                var p2=new Person2(showId);
                p.SayId();
                //但是上面两种方法都改变了Person原有的成员,怎么在不改变原有成员的情况下,让person对象调用showId方法
                //如果传参,参数是一个一个的,使用call,如果是数组,使用apply
                showId.call(new Person());//call表示由哪个对象来调用这个方法,方法中的this就是这个对象

 

以上是关于Jquery-基础的主要内容,如果未能解决你的问题,请参考以下文章

Visual Studio 2012-2019的130多个jQuery代码片段。

markdown 在WordPress中使用jQuery代码片段

使用 NodeJS 和 JSDOM/jQuery 从代码片段构建 PHP 页面

很实用的JQuery代码片段(转)

几个有用的JavaScript/jQuery代码片段(转)

几个非常实用的JQuery代码片段