jQuery学习笔记

一. jquery对象与DOM对象区别:

 DOM对象:
  1.在浏览器加载网页时，由浏览器负责创建的.
  2.一个html标签对应一个DOM对象.
  3.可以通过管理DOM对象，来对关联html标签中的属性进行操作。
 jQuery对象：
  1.是jquery函数 $() 负责创建的
  2.jQuery对象就是一个【数组】
  3.jQuery对象中存放的本次定位【DOM对象】
  4.可以通过jQuery对象中【功能函数】,来快速对定位到的【DOM对象】进行操作管理

二. jQuery对象和DOM对象的转换

1. 如何将JQUERY对象转换为DOM对象
   for(var i = 0; i < $obj.length; i++){
    var domObj = $obj[i];
   }

2. 如何将DOM对象转换为JQUERY对象
    var $obj = $(domObj);

注：jquery对象与DOM对象之间属性和函数彼此不能调用.

三. 基本选择器

1. 【定位条件】：可以根据ID编号，标签类型名，类名定位

2. 【使用】：
   $("#id编号")
   代替 document.getElementById(“id”)
   根据ID编号定位对应的DOM对象。让DOM对象保存到一个数组中并返回。返回这个数组就是【jquery对象】

   $(".类名")
    代替document.getElementsByClassName(“类名”)
   将类名相同的dom对象保存到同一个数组中，并返回。返回这个数组就是【jquery对象】

   $(“标签类型名”)
   代替document.getElementsByTagName()
   将所有指定的标签类型关联的DOM对象保存到同一个数组中并返回，返回的这个数组就是【jquery对象】

   $("*")
   定位浏览器中所有的DOM对象保存到同一个数组中并返回。
   返回的这个数组就是【jquery对象】

   $(“条件1,条件2”)
   只要DOM对象满足其中的一种条件，就会被定位到数组中

3. 【css函数】
   jquery对象中功能函数
   负责将jquery对象中所有的DOM对象的样式属性进行统一赋值
   eg：

	var $obj =	$("#id");
	$obj.css("background-color","red");

四. 层级选择器

1. 【定位条件】：可以根据标签之间父子关系定位，可以根据标签之间兄弟关系定位。

2. 【使用】：

   $(“定位父标签条件 定位子标签条件”)
   定位当前父标签下，所有满足条件的【直接子标签】和【间接子标签】

   $(“定位父标签条件>定位子标签条件”)

   定位当前父标签下，所有满足条件的【直接子标签】

   $(“定位当前标签条件”).siblings(“定位兄弟标签条件”)
   定位当前标签【前面与后面】所有满足条件的【兄弟标签】

   $(“定位当前标签条件~定位兄弟标签条件”)
   定位当前标签【后面】，所有满足条件的【兄弟标签】

   $(“定位当前标签条件+定位兄弟标签条件”)
   定位当前标签【后面与之紧邻的】，并且满足条件的【兄弟标签】

五. Input标签选择器

1. INPUT标签组成:

   <input type=“text”>
   <input type=“password”>
   <input type=“radio”>
   <input type=“checkbox”>
   <input type=“file”>
   <input type=“button”>
   <input type=“submit”>
   <input type=“reset”>

2. INPUT标签作用：

   浏览器向网站发送请求时携带请求参数

3. 【使用】：

   $(":type属性名")

4. 【例子】:

   $(":button"):定位页面中所有与button关联的DOM
   $(":checkbox")：定位页面中所有与checkbox关联的DOM
   $(":table"):无法定位任何内容

5. 【val函数】：

   jquery对象中的一个功能函数
   读取jquery对象中【第一个DOM对象】的value属性内容

6. 【each函数】：

   each函数遍历jQuery对象中DOM对象.
   每次读取一个【下标值】和对应的【DOM对象】交给处理函数
   eg：

function fun5() {
	var $obj = $(":checkbox:checked");
	$obj.each(function(index, domObj) {
		alert("第" + (index+1) + "个checkbox的值是" + domObj.value);
	})
}

六. 基本过滤器

1. 【过滤器条件】：

   根据已经定位的DOM对象在jQuery对象中的存储位置进行二次过滤筛选

2. 【使用】：

   $(“选择器:first”)：留下满足条件中的第一个DOM对象

   eg：$(":button:first"):定位页面中第一个button

   $(“选择器:last”)：留下满足条件中的最后一个DOM对象

   eg：$(":button:last"):定位页面中最后一个button

   $(“选择器:eq(下标值)”):留下满足条件中的指定位置的DOM对象

   eg：$(“div:eq(2)”) 定位页面中第三个div

   $(“选择器:lt(下标值)”)：留下满足条件中的指定位置之前的所有DOM

   eg： $(":checkbox:lt(2)"):页面中前两个checkbox

   $(“选择器:gt(下标值)”):留下满足条件中的指定位置之后的所有DOM

   eg：$(":button:gt(3)"):位置在第四个butotn之后的所有的button

七. 基本属性过滤器

1. 【过滤条件】：

   根据标签在声明时是否为指定属性进行【手动赋值】进行过滤筛选

   根据标签的属性内容与【指定内容】的关系进行过滤筛选

2. 【使用】

   $(" 选择器 [属性名] ")
   留下满足定位条件的并且在声明时【为指定属性进行手动赋值】的DOM对象

   $(" 选择器 [属性名 = ‘值’] ")
   留下满足定位条件的并且指定属性的内容【等于】指定内容DOM

   $(" 选择器 [属性名 ^= ‘值’] ")
   留下满足定位条件的并且指定属性的内容以【指定内容为开头】所有DOM

   $(" 选择器 [属性名 $= ‘值’] ")
   留下满足定位条件的并且指定属性的内容以【指定内容为结尾】所有DOM

   $(" 选择器 [属性名 *= ‘值’] ")
   留下满足定位条件的并且指定属性的内容【包含】指定内容的所有DOM

   $(" 选择器 [属性名1] [属性名2 *= ‘值’] [属性名3 ^= ‘值’] ")

八. 工作状态属性过滤器

1. html标签属性分类：

   1）基本属性：绝大多数标签都拥有的属性【id,name,title,rowspan】

   2）样式属性：背景，字体，边框

   3）value属性： 只存在表单域标签中【input，select，textarea】

   4）工作状态属性：只存在表单域标签中【chekced，disabled，selected】

   5）监听事件属性 ： onclick，onchange…

2. 【使用】

   $(“选择器 : enabled”)
   留下满足条件的并且处于【可用状态】的DOM
   eg: $(":button:enabled")：定位所有处于可用的button

   $(“选择器 : disabled”)
   留下满足条件的并且处于【不可用状态】的DOM
   eg: $(":button:disabled")：定位所有处于不可用的button

   $(“选择器:checked”)
   留下满足条件的并且处于【选中状态的】DOM
   eg:$(":checkbox:checked:first"):页面中第一个被选中的checkbox

   $(“选择器:selected”)
   留下满足条件的并且处于【选中状态的】DOM
   eg：$(“select>option:selected”)：下拉列表中别选中的option

九. 总结: jQuery对象的功能函数

1. show() & hide()

   show(): 负责让jQuery对象包含的所有DOM对象关联的标签在浏览器上显示 。即：style = “display:block”

   hide(): 负责让jQuery对象包含的所有DOM对象关联的标签在浏览器上隐藏。即：style=“display:none”

2. remove() & empty()

   empty()：移除被选元素的所有子节点和内容。

   remove()：移除被选元素，包括所有的文本和子节点。

3. append() & appendTo()

   共同点 ：都是操作标签中innerHTML，为当前标签添加子标签

   append(): 父标签.append（子标签）

   appendTo(): 子标签.appendTo(父标签)

4. 属性操作函数

   (1)val函数

   $obj.val(): 读取jQuery对象中【第一个DOM对象】的value属性值

   $obj.val(值): 为jQuery对象中【所有DOM对象】的value属性进行统一赋值

   (2) prop函数：操作工作状态属性 checked，disabled，selected

   $obj.prop(“checked”)：读取jQuery对象中第一个DOM对象的【checked属性值】

   $obj.prop(“checked”,true)：为jQuery对象中所有DOM对象的checked属性值赋值为true

   (3) attr函数：操作基本属性 id，name，title，rowspan

   $obj.attr(" title ")：读取jQuery对象中第一个DOM对象的【title属性】的值

   $obj.attr(" name ", " mike ")：为jQuery对象中所有DOM对象的【name属性】统一赋值为mike

   (4) text函数：操作双目标签的innerText属性

   $obj.text(" 123 ")：为jQuery对象中所有DOM对象的innerText属性赋值为"123"

   $obj.text()：读取jQuery对象中所有DOM对象的innerText属性内容，拼接为一个字符串返回

十. jQuery中事件绑定方式

1. $obj.监听事件(处理函数)

   eg：$(":button").click(func);

   为页面中所有的button绑定onclick以及对应处理函数func

2. $obj.bind(“监听事件”, 处理函数)

   $obj.unbind(“监听事件”)：将指定监听事件从DOM对象身上移除。

   $obj.unbind()：将所有监听事件从DOM对象身上移除。