关于JQuery

1.什么是jQuery

jQuery是一款优秀的javascript的轻量级框架之一，封装了dom操作、事件绑定、Ajax等功能。

特别值得一提的是基于jQuery平台的插件非常丰富，大多数前端业务场景都有其封装好的工具可直接使用。

2.jQuery版本

• jquery-x.js 开发版本：有良好的缩进格式和注释，方便开发者阅读

• jquery-x.min.js 生产版本：代码进行压缩，体积小方便网络传输

3.jq与js的页面加载的区别

语法

• js

window.onload = function(){
    }

• jq

$(function(){

});

4.两者之间的区别

* js: 只能定义一次，如果定义多次，后面会将前面的进行给覆盖掉
* jq: 可以定义多次

5.jq与js的转换

jQuery虽然本质上也是js，但如果使用jQuery的属性和方法那么必须保证对象是jQuery对象而不是js对象。

通过js方式获取的是js对象，通过jQuery方式获取的是jQuery对象。

• js 转 jq

$(js对象)

• jq 转 js

jq对象[索引]

jq对象.get(索引)

6.事件绑定

$(" ").事件名();

7.事件解绑

使用On绑定事件

$("#btn").on("click",function () {
                alert("我被点击了。。")
            })

使用off解绑事件

$("#btn2").click(function () {
                $("#btn").off("click");//解绑指定单击事件
                $("#btn").off();//解绑所有事件
            });

8.JQ循环

 $(arr).each(function(){
			   alert(this);//代表是当前引用对象，  用的是谁，this代表谁
		   });

this代表引用对象，谁引用，this是谁

9.JQ操作CSS样式

$("p").css("color","red");

$("p").css({ "color": "#ff0011", "background": "blue" });

10.jQuery选择器  

(1)基本选择器

• 标签选择器（元素选择器）

  语法： $("html标签名") 获得所有匹配标签名称的元素

• id选择器

  语法： $("#id的属性值") 获得与指定id属性值匹配的元素

• 类选择器

  语法： $(".class的属性值") 获得与指定的class属性值匹配的元素

• 并集选择器

  语法： $("选择器1,选择器2....") 获取多个选择器选中的所有元素

 (2)层级选择器

• 后代选择器

  语法： $("A  B ") 选择A元素内部的所有B元素

• 父子选择器

  语法： $("A > B") 选择A元素内部的所有B子元素

• 兄弟选择器

  语法： $("A ~ B ") 选择A元素同级的所有B元素

• 跟班选择器

  语法： $("A + B") 选择A元素同级的下一个B元素

11.过滤器  

属性过滤选择器

• first

  语法： first 获得选择的元素中的第一个元素

• last

  语法： last 获得选择的元素中的最后一个元素

• even

  语法： even 偶数，从 0 开始计数

• odd

  语法： odd 奇数，从 0 开始计数

• eq(index)

  语法： eq(index) 指定索引元素

• gt(index)

  语法： 匹配所有大于给定索引值的元素

• lt(index)

  语法： 匹配所有小于给定索引值的元素

• lang(language)

  语法：选择指定语言的所有元素。$("p:lang(it)")

• animated

  语法：匹配所有.正在执行动画效果的元素

• focus

  语法： 匹配当前获取焦点的元素。

•  root

         选择该文档的根元素。 $(":root") 

 12.内容过滤器

• contains(text)

匹配包含给定文本的元素

• empty

匹配所有不包含子元素或者文本的空元素

• has(selector)

匹配含有选择器所匹配的元素的元素

• parent

匹配含有子元素或者文本的元素

13.可见性过滤器

• hidden

匹配所有不可见元素

• visibile 

匹配所有可见元素

14.属性选择器

• 属性名称选择器

  语法： $("A[属性名]") 包含指定属性的选择器

• 属性选择器

  语法： $("A[属性名='值']") 包含指定属性等于指定值的选择器

• 复合属性选择器

  语法： $("A[属性名='值'] []...") 包含多个属性条件的选择器

15.子元素过滤选择器

nth-child()             匹配父元素下的第N个或奇偶元素

only-child              匹配父元素下唯一的子元素

first-of-type           查找父元素下此类型的第一个元素

last-of-type           查找父元素下此类型的最后一个元素

16.表单过滤选择器

:input

:text

:password

17.表单对象属性过滤器

• 可用元素选择器

  语法： :enabled 获得可用元素

• 不可用元素选择器

  语法： :disabled 获得不可用元素

• 选中选择器

  语法： :checked 获得单选/复选框选中的元素

• 选中选择器

  语法： :selected 获得下拉框选中的元素

18.对象遍历

语法：

jq对象.each(function(index,element){

})

 内置的两个参数：
                index: 索引
                element：遍历到的元素

19.jQuery操作DOM

方法	描述
text()	获取/设置元素的标签体纯文本内容
html()	获取/设置元素的标签体超文本内容

20.操作属性

相关方法

方法	描述	对比
val()	获取/设置元素的value属性值	相当于：js对象.value
attr()	获取/设置元素的属性	相当于：js对象.setAttribute() / js对象.getAttribute()
removeAttr()	删除属性
prop()	获取/设置元素的属性
removeProp()	删除属性

21.操作样式

方法	描述
css()	获取/设置样式
addClass()	添加class属性值
removeClass()	删除class属性值
toggleClass()	切换class属性，无添加，有删除

22.操作元素

方法	描述
$(标签)	创建一个标签 $('<li>xxx</li>')
prepend()	在父标签中将子标签放在第一个位置
append()	在父标签中将子标签放在最后一个位置
empty()	清空子元素
remove()	删除自己

23.常见事件

点击事件

事件	描述
click()	单击事件
dblclick()	双击事件

焦点事件

事件	描述
blur()	失去焦点
focus()	元素获得焦点

鼠标事件

事件	描述
mousedown()	鼠标按钮被按下
mouseup()	鼠标按键被松开
mousemove()	鼠标被移动
mouseover()	鼠标移到某元素之上
mouseout()	鼠标从某元素移开

键盘事件

事件	描述
keydown()	某个键盘按键被按下
keyup()	某个键盘按键被松开
keypress()	某个键盘按键被按下并松开

改变事件

事件	描述
change()	域的内容被改变

表单事件

事件	描述
submit()	提交按钮被点