jQuery

学习jQuery学习重点

1.掌握如何使用jQuery的【选择器和过滤器】定位DOM对象 2.掌握【jQuery对象功能函数】--------定位DOM对象

jQuery对象和DOM对象的关系：

DOM对象：是由浏览器负责创建对象。DOM对象管理对应的html标签 一个html标签对应一个DOM对象 jQuery对象：是由jQuery函数($())负责创建的对象；jQuery对象本质上就是一个数组 数组中保存了当前被定位的所有的DOM对象。开发人员可以通过jQuery对象操作定位的 DOM对象，从而就可以间接的操作html标签。 一般为了区分DOM对象和jQuery对象，所有jQuery对象都是以$为开头

DOM对象和jQuery对象之间转换

1.如何将DOM对象转换为jQuery对象，即使将一个DOM对象添加到一个数组中的过程 var $obj = $(DOM对象)； 2.如何将jQuery对象转换为DOM 从数组提取DOM对象过程

jQuery工具包如何定位DOM对象

1.使用【选择器】和【过滤器】进行定位 2.jQuery中共有三种【选择器】 3.jQuery中还有六种【过滤器】

选择器--------------基本选择器

1.基本选择器：主要根据【标签ID】,【标签类型】，【标签使用样式选择器】进行定位 2.【标签ID】：$("#id编号")；将当前页面中第一个满足条件的DOM对象进行定位 3.【标签类型】：$(“标签类型名”)；将当前页面中所有指定类型的标签关联的DOM对象进行定位(标记名称) 4.【标签使用样式选择器】：$(".样式选择器名称")；将页面中所有采用了指定样式选择器的标签关联的DOM对象进行定位(.class) 5.【定位页面中所有标签】：$("*"); 6.【组合条件选择】：$(“条件1，条件2”); 相当于MySQL中where job = ‘manager’ or salary > 3000;

选择器--------------层级选择器

1.层级选择器：根据html标签之间【兄弟关系】和【父子关系】进行定位 2【兄弟关系】 和 【父子关系】 【父子关系】:

<tr> <td>td是tr标签的【直接子标签】 <input type="text">text是td标签的【直接子标签】 text是tr标签的【间接子标签】 </td> </tr>

【兄弟关系】

<div> <p>段落1</p>两个p标签和span之间互为兄弟关系 <p>段落2</p> <span>1</span> </div>

3.定位满足条件的子标签 $(“定位父标签条件>子标签定位条件”)：定位的当前父标签下所有满足条件的【直接子标签】 $(“定位父标签条件 子标签定位条件”)：定位的当前父标签下所有满足条件的【直接子标签】和【间接子标签】 4.定位满足条件的兄弟标签 $(“定位当前标签条件+条件”)：定位当前标签后面与之【紧邻】并且满足【定位条件的】兄弟标签 $(“定位当前标签条件~条件”)：定位当前标签后面,所有满足条件的兄弟标签 $(“定位当前标签条件”).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"> <input type="hidden">

②多行表单域标签<textarea></textarea> ③下拉列表：

<select> <option value=""></option> </select>

2.[input表单域标签选择器]：根据type属性的内容：定位input标签 $(":type属性内容") $(":text")：定位所有文本框 $(":radio")：定位所有单选框

jQuery对象常见的功能函数

1.val函数： ①$obj.val(值)：对当前jQuery对象中所有的DOM对象的value属性进行统一赋值 ②$obj.val()：读取当前jQuery对象中第一个DOM对象的value属性值

2.each函数：用于遍历当前jQuery对象中保存的所有的DOM对象 $obj.each( function(下标值，DOM对象) { //开发时，尽量不要直接操作DOM对象，因为DOM对象是由浏览器创建的， //浏览器会给DOM对象添加属性和方法，不同的浏览器添加的属性和方法不同 //有可能导致在一个浏览器中有的方法，到另一个浏览器中不存在该方法 对当前遍历得到DOM对象进行具体操作 } );

3.text函数： ①$obj.text(“文字显示内容”)：对当前jQuery对象中所有的DOM对象的【文字显示内容】进行统一赋值 ②$obj.text()：读取当前jQuery对象中第一个DOM对象的【文字显示内容】

4.attr函数：(存在兼容性问题，不建议使用) ①$obj.attr(“基本属性名”，“值”)：对当前jQuery对象中所有的DOM对象的【指定基本属性】进行统一赋值 ②$obj.attr(“基本属性名”)：读取当前jQuery对象中第一个DOM对象的【指定基本属性】值

5.prop函数： ①$obj.prop(“工作状态属性”，“boolean值”)：对当前jQuery对象中所有的DOM对象的【指定工作状态】进行统一赋值 ②$obj.prop(“工作状态属性”)：读取当前jQuery对象中第一个DOM对象的【指定工作状态】值

jQuery过滤器

1.作用：针对选择器定位的DOM对象进行二次筛选，相当于where 2.过滤器的使用方式：过滤器不能独立使用，必须声明在选择器后方。相当于MySQL中group by 和 having关系

过滤器---------------【基本过滤器】

1.基本过滤器： ①DOM对象在jQuery对象中存储位置与声明的位置相关，谁先声明，谁就在jQuery对象数组的靠前位置 ②根据DOM对象在jQuery中存储位置进行过滤筛选 2.基本过滤器使用： ①$(“选择器：first”)：定位满足条件的第一个DOM $("：button：first") ②$(“选择器：last”)：定位满足条件的最后一个DOM $("：button：last") ③$(“选择器：eq(位置)”)：定位指定位置的DOM对象 $("：button：eq(1)")：定位页面中第二个button ④$(“选择器：lt(位置)”)：定位小于指定位置的DOM对象 $("：button：lt(3)")：定位页面中前三个button ⑤$(“选择器：gt(位置)”)：定位大于指定位置的DOM对象 $("：button：gt(0)")：定位页面中处了第一个button之外所有的button

过滤器---------------【表单域标签专有工作状态过滤器】

1.html标签中属性分为哪几个种类 ①基本属性：所有html标签都拥有属性【id，name，title】 ②样式属性：<div style=“background-color:red”> ③value属性：仅存在表单域标签 ④工作状态属性：仅存在表单域标签

<input type="button" disabled> <input type="text" readonly> <input type="radio" checked> <input type="checkbox" checked> <select> <option>1</option> <option selected>2</option> <option>3</option> </select>

⑤监听事件属性

<input type="button" onclick> <input type="text" onblure>

2.【表单域标签专有工作状态过滤器】:根据当前表单域标签的工作状态进行二次筛选 3.【表单域标签专有工作状态过滤器使用】： $(“选择器：disabled”)：定位的是满足定位条件的并且处于【不可用状态】的表单域标签 $(“选择器：checked”)：定位的是满足定位条件的并且处于【被选中状态】的表单域标签【radio，checkboc】 $(“选择器：selected”)：定位的是满足定位条件的并且处于【被选中状态】的表单域标签【option】 $(“选择器：disabled”)：定位的是满足定位条件的并且处于【可用状态】的表单域标签

4.【标签内容】分为哪几大类 ①.value属性 ②.基本属性内容 ③.文字显示内容(两个标签之间的内容) ④.工作状态属性内容【checked，selected，disabled】

过滤器---------------【属性过滤器】

1.【属性过滤器】： ①根据当前标签中是否【手动声明了指定的属性】

<div>1</div>有name属性，但是没有手动声明 <div name = "myDiv">2</div>有手动声明name属性 <div name = "myTest">3</div>

$(“选择器[属性名]”)：定位的DOM对象对应的标签中必须手动声明了指定属性 定位声明了name属性的所有的DIV $(“div[name]”)----->定位了第二个div和第三个div

②根据当前标签中属性内容进行过滤 $(“选择器[属性名=‘值’]”)：定位的DOM对象对应的标签中的【指定属性内容】必须等于【指定的内容】 $(“div[name=’ ']”)第一个div

$(“选择器[属性名!=‘值’]”)：定位的DOM对象对应的标签中的【指定属性内容】必须不等于【指定的内容】 $(“div[name!=‘myTest’]”)第一个div和第二个div

$(“选择器[属性名^=‘值’]”)：定位的DOM对象对应的标签中的【指定属性内容】必须以【指定的内容】为开始。相当于where name like ‘李%’; $(“div[name^=‘my’]”)第二个div和第三个div

$(“选择器[属性名$=‘值’]”)：定位的DOM对象对应的标签中的【指定属性内容】必须以【指定的内容】为结尾。相当于where name like ‘%李’; $(“div[name$=‘my’]”)得到的是空数组 $(“div[name$=‘st’]”)得到的是第三个div

$(“选择器[属性名*=‘值’]”)：定位的DOM对象对应的标签中的【指定属性内容】必须包含了【指定的内容】为结尾。相当于where name like ‘%李%’; $(“div[name*=‘my’]”)得到的是第二个div和第三个div

③根据多个属性进行判断 $(“选择器[属性1][属性2=‘值’][属性3 $=‘值’]”)：此时标签只有同时满足了所有条件，才会被定位

如何通过jQuery对象进行【监听事件绑定】

$obj.监听函数(处理函数)： <input type = "button" id = "btn" /> function fun1() {//单击事件处理函数 } var $obj = $("#btn"); $obj.click(fun1); 监听事件 jQuery监听函数名 onclick click() onchange change() onblur blur() $obj.bind(“jQuery监听函数名”，处理函数名) <input type = "button" /> <input type = "button" /> function fun2() { } $(":button").bind("click", fun2); 此时页面中所有的button上都绑定了【onclick】监听事件，当某一个button上发生【onclick】事件 时，调用处理函数fun2,相当于 <input type = "button" onclick = "fun2"/> <input type = "button" onclick = "fun2"/>

3.如何从标签上移除绑定的监听事件 $obj.unbind(“jQuery监听函数名”)：指定的监听事件将会被移除 $obj.unbind()：将当前标签上所有的监听事件进行移除

$()功能介绍：

1.$(“选择器/过滤器”)：DOM对象定位器，将所有满足条件的DOM对象封装成一个数组并返回 2.$(domOjb)：类型转换器，将这个DOM对象添加到一个数组中并返回 3.$(函数类型对象)：监听器：在页面被浏览器加载完毕后，自动调用当前函数 4.$("<开始标签></结束标签>")：首先，要求浏览器在内存创建一个对应HTML标签及其对应的DOM对象，然后将DOM对象添加到数组中，最后将这个数组进行返回 此时，该函数变身为标签构造器或标签构造函数

知识点补充

1.table 的直接子标签是谁 thead, tbody, tfoot tr是上述三者的直接子标签，也就是tr是table的间接子标签，为什么不写？因为浏览器具有兼容性，就算不写，也会把第一个tr当成thead 2.在javascript中this代表什么？ 当前谁调用该方法，this就代表谁，比如：将当前鼠标悬停的表格行的背景颜色设置为红色，那么this就代表鼠标悬停的tr标签对应的dom对象 3.有关下拉列表中浏览器特性： 当某一个option标签被选中之后，浏览器自动将这个option标签的value属性的值赋值给当前下拉列表中的value 4.为父标签添加子标签：$父标签对象.append($子标签对象); append();括号中也可以追加一个字符串 5.子标签的删除： $obj.remove()：将当前标签及其所有的子标签进行删除

<div> <p></p> <div> $("div").remove() div和p都会被销毁

$obj.empty()：将当前标签的所有子标签进行删除，不会删除当前标签

<div> <p></p> <div> $("div").remove() div留下，p被销毁

6.控制标签是否可见 $obj.show():可以将定位DOM对象关联标签进行显示处理 $obj.hide():可以将定位DOM对象关联标签进行隐藏处理 7.append和appendTo区别： 功能一致：都是为父标签添加子标签 父标签.append(子标签); 子标签.appendTo(父标签); 8.html中除了<html>之外，所有标签都会有一个父标签 如何定位当前标签的父标签 $obj.parent();