Jquery-基础

Posted 2020-10-03 小南瓜

属性

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就是这个对象