jQuery对象

一、jQuery介绍

1. jQuery是一个轻量级的、兼容多浏览器的JavaScript库。
2. jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“

二、jQuery的优势

1. 一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。
2. 丰富的DOM选择器,jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。
3. 链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。
4. 事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。
5. Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。
6. 跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。
7. 插件扩展开发。jQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件，并且用jQuery插件做出来的效果很炫，并且可以根据自己需要去改写和封装插件，简单实用。

三、jQuery版本

        1.x：使用最广泛

        2.x：不兼容IE678,很少有人使用

        3.x：比兼容IE678，只支持最新的浏览器，我们使用3.x版本

四、jQuery对象

        jQuery对象就通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的。

        一个对象如果是jQuery对象那么就可以使用jQuery里的方法

jQuery对象虽然是包装DOM对象后产生的，但是jQuery对象无法使用DOM对象的任何方法

同样DOM对象也不能使用jQuery里的方法

 

---

在jQuery中声明一个变量要在jQuery对象变量的时候在变量名前面加上$

 例如：var $varible = jQuery对象

         var varible = DOM对象

        

$varible[0]        将jQuery对象转换为DOM对象

jquery对象和DOM对象的使用

        $（"#i1"）.html;        //jQuery对象可以使用jQuery的方法

        $（"#i1"）[0].innerhtml;         //DOM对象使用DOM的方法

五、jQuery基础语法

        $（selector）.action()

六、jQuery查找标签

        1、id选择器

        $("#id")

        2、标签选择器

        $("tahName")

        3、class选择器

        $(".className")

        4、配合使用

        $("div.c1")        找到c1 class类的div标签

        $('div#d1')

        5、所有元素选择器

        $("*")

        6、组合选择器

        $("id，.className，tagName")

        $('#d1，.c1，p')        并列+混用

        $('div span')        后代

        $('div>span')        儿子

        $('div+span')        毗邻

        $('div~span')        弟弟

        7、层级选择器

        $("x   y")；        x的所有后代y（子子孙孙）

        $("x > y") ；        x的所有儿子y（儿子）

        $("x + y")；        找到所有紧挨在x后面的y

        $("x ~ y")；        x之后所有的兄弟y

        8、基本筛选器

        ：first        第一个

        ：last        最后一个

        ：eq(index)        索引等于index的那个元素

        ：even        匹配所有索引为偶数的元素，从0开始计数

        ：odd        匹配所有索引为计数的元素，从0开始计数

        ：gt(index)        匹配所有大于给定索引值得元素

        ：lt(index)        匹配所有小于给定索引值得元素

        ：not(元素选择器)        移除所有1满足not条件的标签

        ：has(元素选择器)        选取所有包含一个或多个标签在其内的标签（指的是从后代元素找）

        

        例子：

                $('ul li:first')  # 大儿子 
$('ul li:last')  # 小儿子
$('ul li:eq(2)')        # 放索引
$('ul li:even')  # 偶数索引 0包含在内
$('ul li:odd')  # 奇数索引
$('ul li:gt(2)')  # 大于索引
$('ul li:lt(2)')  # 小于索引
$('ul li:not("#d1")')  # 移除满足条件的标签
$("div:has('h1')")// 找到所有后代中有h1标签的div标签
$("div:has(.c1)")// 找到所有后代中有c1样式类的div标签
$("li:not(.c1)")// 找到所有不包含c1样式类的li标签
$("li:not(:has(a))")// 找到所有后代中不含a标签的li标签

        9、属性选择器

        [attribute]

        [attribute=value]         属性等于

        [attribute!=value]        属性不等于

例子：

$("input[type='checkbox']");// 取到checkbox类型的input标签
$("input[type!='text']");// 取到类型不是text的input标签

        10、表单筛选器

：text

：password        

：file

：radio        

：checkbox

：submit

：reset

：button

例子：

$(":checkbox")  // 找到所有的checkbox
$('input[type="text"]')---------->$(':text') 
$('input[type="password"]')---------->$(':password') 

        11、表单对象属性

：enabled

：disabled

：checked

：selected

例子：找到可用的标签

 
 

$("input:enabled")  // 找到可用的input标签

例子2：找到被选中的option

  北京市
  上海市
  广州市
  深圳市

$(":selected")  // 找到所有被选中的option

$(':checked')  # 它会将checked和selected都拿到
$(':selected')  # 它不会 只拿selected
$('input:checked')  # 自己加一个限制条件

        12、筛选器方法

                1、下一个元素

        $("#id").next()        

        $("#id").nextAll()

        $("#id").nextUntil("#i2")

                2、上一个元素

        $("#id").prev()

        $("#id").prevAll()

        $("#id").prev.Until("#i2")

                3、父亲元素

        $("#id").parent()

        $("#id")parents()        查找当前元素的所有父辈元素

        $("#id").parentsUntil()        查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止

                4、儿子和兄弟元素

        $("#id").children()；        儿子们

        $("#id").silblings()；        兄弟们

                5、查找

        搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法

$("div").find("p")-------------------------等价于$("div   p")

                6、筛选

        筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式

$("#div").filter(".c1")        从结果中过滤出有c1样式类的，等价于$("div.c1")

                7、补充

        .first()            获取匹配的第一一个元素

                $('div span.first')----------$('div span').first()

        .last()        获取匹配的最后一个元素

                $('div span:last')----------$('div span').last()

        .not()        从匹配元素的集合中删除与指定表达式匹配的元素

                $('div span:not("#d3")')---------$('div span').not("#d3")

        .has()        保留包含特定后代的元素，去掉那些不含有后代的元素

        .eq()        索引值等于指定值得元素

                

七、操作标签

        1、样式操作

        样式类：

        

        1、addClass()；        添加指定的CSS类名

        2、removeClass()；        移除指定的类名

        3、hasClass()；        判断样式存不存在

        4、toggleClass()；        切换CSS类名，类名存在则删除，类名不存在则增加

        2、位置操作

方法	概述
offset()	获取匹配元素在当前窗口的相对偏移量或设置元素位置
position()	获取匹配元素相对父元素的偏移
scrollTop()	获取匹配元素相对滚动条顶部的偏移
scrollLeft()	获取匹配元素相对滚动条左侧的偏移

        .offset()方法允许我们检索一个元素相对于文档（document）的当前位置

        .offset和.position（）的差别在于：.position（）是相对于父级元素的位移

        3、尺寸

        

方法
height()	高
width()	宽
innerHeight()	内高
innerWidth()	内宽
outerHeight()	外高
outerWidth()	外宽

        4、文本操作

                1、HTML代码

        html（）        取得第一个匹配元素的html内容

        html（val）        设置所有匹配元素的html内容

                2、文本值

        text（）        取得所有匹配元素的内容

        text（val）        设置所有匹配元素的内容

                3、值

        val（）        取得第一个匹配元素的当前值

        val（val）        设置所有匹配元素的值

        val（[val1，val2]）        设置多选的checkbox、多选select的值

                4、设置值

        $("[name='hobby']").val(['basketball'，'footabll'])；

        $("#s1").val(["1"，"2"])

        5、属性操作

                1、用于ID或自定义属性

方法	解释说明
attr(attrName)	返回第一个匹配元素的属性值
attr(attrName，attrValue)	为所有匹配元素设置一个属性值
attr({k1：v1，k2：v2})	为所有匹配元素设置多个属性值
removeAttr()	从每一个匹配的元素中删除一个属性

                2、用于checkbox和radio

方法	解释说明
prop（）	获取属性
removeProp（）	移除属性

 注意事项：在3.x版本之前的jQuery使用attr对checkbox进行赋值操作会出现bug，3.x版本就没有这个问题。为了兼容性，我们在处理checkbox和radio的时候尽量使用特定的prop()方法，不要使用attr（）

prop和attr的区别：

        1、attr全称attribute（属性）

        2、prop全称property（属性）

虽然都是属性，但是他们所指的属性并不相同，attr所指的属性是HTML标签属性，而prop所指的是DOM对象属性，可以人为attr是显式的，而prop是隐式的

attr获取属性：没有就返回undefined，有就返回获取的属性

prop获取属性：没有就返回false，有就返回true

 

prop不支持获得标签的自定义的属性，而attr可以得到

 

总结：

        1、对于标签有的能看到的属性和自定义属性都用attr

        2、对于返回布尔值的，如checkbox、radio和option的是否被选中都用prop

        6、文档处理

                1、添加到指定元素内部的后面

        创建一个标签：$("

")        

        将标签添加到某个标签中：append（）

内部尾部追加： 

        $(A).append(B)        把B追加到A

        $(A).appendTo(B)        把A追加到B        

                2、添加到指定元素内部的前面

        $(A).prepend(B)        把B前置到A

        $(A).prependTo(B)        把A前置到B

                3、添加到指定元素外部的后面

        $(A).after(B)        把B放到A的后面

        $(A).insertAfter(B)        把A放到B的后面

                4、添加到指定元素外部的前面

        $(A).before(B)        把B放到A的前面

        $(A).insertBefore(B)        把A放到B的前面        

                5、移除和清空元素

        remove（）        从DOM中删除所有匹配的元素

        empty（）        删除匹配的元素集合中所有的子节点

                6、克隆

        clone（）        参数

                7、替换

        replaceWith()

        replaceAll()

八、事件

        1、常用事件

                

常用事件	解释说明
click（function（）{...}）	鼠标点击事件
hover（function（）{...}）	鼠标移动
blur（function（）{...}）	失去焦点
focus（function（）{...}）	获得焦点
change（function（）{...}）	文本框中的内容被改变
keyup（function（）{...}）	键盘按键被松开
input（function（）{...}）	监控

        2、事件绑定

        1、 .on(events[,selector]，function(){})

        

        events：事件

        selecttor：选择器（可写可不写）

        function：事件处理函数

注意：

        像click，keydown等DOM中定义的事件，可以使用.on()方法来绑定事件，但是像hover这种jQuery中定义的事件就不能用.on()方法来绑定了。

如果想用事件委托的方式绑定hover事件处理函数，可以参照下面代码分步绑定事件：

$('ul').on('mouseenter', 'li', function() {//绑定鼠标进入事件
    $(this).addClass('hover');
});
$('ul').on('mouseleave', 'li', function() {//绑定鼠标划出事件
    $(this).removeClass('hover');
});

        3、移除事件

        1、 .off(events[,selector][,function(){}])

        

        off()方法移除用.on()绑定的事件处理程序

        

        events：事件

        selector：选择器（可写可不写）

        function：事件处理函数

        4、阻止后续事件执行

        1、return false；        常见阻止表单提交等

        2、e.preventDefault()；

以上两种方法都可以阻止后续事件执行

        5、阻止事件冒泡

        方法：形参.stopPropagation()；

示例：

        6、页面载入

当DOM载入就绪可以查询及操纵时绑定以一个要执行的函数。可以极大的提高web应用程序响应速度

两种写法：

        

//第一种写法

$("document").ready(function(){
    //要执行的代码
})




//第二种写法:简写

$(function(){
    //要执行的代码
})

用法和JS中的onload()事件类似，先执行完页面中的所有代码在执行里面的代码

 

两者的区别：

        1、window.onload()函数有覆盖现象，必须等待图片资源加载完成之后才能调用

        2、jQuery的这个入口函数没有函数覆盖现象，文档加载完成之后就可以调用

        7、事件委托

        事件为委托就是通过事件冒泡的原理，利用父标签捕获子标签的事件

方法：.on()

九、补充

        1、.each()循环

jQuery.each(collection，callback（indexInArray，valueOfElement）)：

描述：一个通用的迭代函数，它可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性（如一个函数的参数对象）来迭代数字索引，从0到length-1.其它对象通过其属性名进行迭代

示例：

        

li = [10,20,30,40]

$.each(li,function(i,v){
    console.log(i,v)    //i是索引位置，v是索引值
})

//each通俗的讲就是循环







2、对每个标签加一个class类名

$("#d1").each(function(){
    //$("#d1").addClass("c1");
    $(this).addClass("c1");
})


注意事项：
    在循环的过程中可以使用return false;来提前结束each循环

        2、.data()数据存储

        在匹配的元素集合中的所有元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值

                1、.data(key，value)：        增加数据

        描述：在匹配的元素上存储任意相关数据

        $("div").data("k",100)；        给所有div标签都保存一个名为k，值为100

                2、.data(key)：                查看数据

描述：返回匹配的元素集合中的第一个元素的给定名称的数据存储的值---通过 .data(name,value)或HTML5 data-*属性设置

$("div").data("k")        返回第一个div标签中保存的"k"值

                3、.removeData(key)：

        描述：移除存放在元素上的数据，不加key参数表示移除所有保存的数据

$("div").removeDate("k")；        移除元素上存放k对应的数据