JQuery入门手册
基础
学习重点
熟练背诵JQuery[选择器和过滤器]语法
熟练掌握【jQuery对象】提供【功能函数】
技术介绍
就是JavaScript的封装版
简化JavaScript对DOM对象定位以及DOM对象属性操作开发步骤
jQuery使用
从官网上下载jQuery工具文件，并导入到工程中
将jQuery文件加载到浏览器上
jQuery对象与DOM对象的区别
DOM对象：
1、在浏览器加载网页时，由浏览器负责创建
2、一个html标签对应一个DOM对象
3、可以是通过管理DOM对象，来对关联html标签中属性的操作
jQuery对象
1、是[ jQuery函数 $() ]负责创建的
2、jQuery对象就是一个数组
3、jQuery对象中存放着本次定位【DOM对象】
4、可以通过jQuery对象中【功能函数】，来快速地对【DOM对象进行操作管理】
jQuery对象与DOM对象转换
如何将jQuery转换为DOM对象
for(var i = 0; i<$obj.length; i++){
var domObj = $obj[i];
}
如何将DOM对象转换为jQuery对象
var $obj = $(domObj);
jQuery对象与DOM对象之间属性和函数彼此不能调用
选择器
选择器语法
什么是选择器语法：
1、就是对DOM对象进行定位的条件，比如根据ID定位，根据标签类型名
2、jQuery中只有三种选择器
基本选择器
定位条件：
可以根据ID编号，根据标签类型名，根据标签采用样式选择
使用：
1、$("#id编号"）：代替document.getElementById
根据ID编号定位对应的DOM对象。让DOM对象保存到一个数组中
并返回。返回这个数组就是【jQuery对象】
2、$(".样式选择器名称"）：代替了document.getElementByClassName("样式选择器名")
将使用了指定样式选择器的DOM对象保存到同一个数组中，
并返回。返回这个数组就是【jQuery对象】
3、$("标签类型名"）：代替了document.getElementByTagName("样式选择器名")
将所有使用了指定标签类型的DOM对象保存到同一个数中
并返回。返回这个数组就是【jQuery对象】
4、$("*"）：定位浏览器中所有的DOM对象保存到同一个数组中
并返回。返回这个数组就是【jQuery对象】
4、$("条件1，条件2"）：只要DOM对象满足其中一种条件，就会被定位到数组中
层级选择器
定位条件：
1、可以根据标签之间的父子关系定位
2、可以根据标签之间的兄弟关系定位
标签之间的关系：
1、父子关系：就是包含关系
<tr>
<td>
<input type = "checkbox">
<td>
<tr>
td 是 tr 的 【直接子标签】
input 是 td 的 【直接子标签】
input 是 tr 的 【间接子标签】
2、兄弟关系：两个标签拥有相同的父标签，并且彼此之间没有包含关系
<body>
<div>1<div> 大哥
<div>2<div> 二哥
<p>段落标签</p> 三弟
</body>
3、【使用】：
1）$("定位父标签的条件>定位子标签的条件")：
定位当前父标签下，所有满足条件的【直接子标签】
2）$("定位父标签的条件 定位子标签的条件")：
定位当前父标签下，所有满足条件的【直接子标签】和【间接子标签】
3）$("定位当前标签的条件~定位兄弟标签的条件")：
定位当前标签【后面】，所有满足条件的【兄弟标签】
4）$("定位当前标签的条件+定位兄弟标签的条件")：
定位当前标签【后面与之近邻的】，并且满足所有条件的【兄弟标签】
5）$("定位当前标签条件")。siblings("定位兄弟标签")：
定位当前标签【前边与后边】所有满足条件的【兄弟标签】
input标签选择器
标签组成：
<input type = "text">
<input type = "password">
<input type = "radio">
<input type = "checkbox">
<input type = "file">
<input type = "button">
<input type = "reset">
标签作用：
作为浏览器向网站发送请求时携带请求参数
使用：
$(" : type属性名字")
例子：
$(" : button") :定位页面中所有的button关联的DOM
$(" : checkbox")：定位页面中所有的checkbox关联的DOM
$(" : table")：无法定位任何内容
过滤器
过滤器语法
对已经定位到jQuery对象中的DOM 对象，进行二次过滤筛选的
过滤器不能独立使用，必须声明在选择器后面
六种过滤器（三种常见过滤器）
基本过滤器
过滤条件：
根据已经定位的DOM对象在jQuery对象中存储位置进行二次过滤筛选
使用：
1、$(" 选择器 : first")：留下满足条件中的第一个DOM对象
例子：$(":button : first")：定位页面中第一个button
2、$(" 选择器 : last")：留下满足条件中的第一最后一个个DOM对象
例子：$(":button : last")：定位页面中最后一个button
3、$(" 选择器 :eq（下标值） ")：留下满足条件中的指定位置的DOM对象
例子：$("div : eq（2）")：定位页面中第三个div
4、$(" 选择器 : lt（下标值）")：留下满足条件中的指定位置之前的所有的DOM对象
例子：$(": checkbox : lt (2)")：页面中前两个checkbox
5、$(" 选择器 : gt（下标值）")：留下满足条件中的指定位置之后所有的DOM对象
例子：$(": button : gt (3)")：位置在第四个button之后的所有button
基本属性过滤器
过滤条件：
根据标签在声明时是否为指定属性进行手动赋值
根据标签的属性内容与【指定内容】关系进行过滤
例子：
<div>1</div>
<div name="two">2</div>
<div name="three">3</div>
问题1：哪一个div中没有name属性？
所有的div标签都有name属性
问题2：哪一个div中name属性的值是“”
第一个div没有手动为name属性赋值，因此name属性值是默认值，就是“”
使用：
1、、$(" 选择器 [属性名 ]")：留下满足定位条件的并且在声明时为指定属性进行手动赋值的DOM对象
例子： $(" div [ name ]") <div name="two">2</div>
<div name="three">3</div>
2、$(" 选择器 [属性名 ]")：留下满足定位条件的并且在声明时为指定属性进行手动赋值的DOM对象
例子： $(" div [ name = 'two' ]") <div name="two">2</div>
$(" div [ name = ' ' ]") <div name="two">1</div>
$(" div [ name != 'four' ]") <div>1</div>
<div name="two">2</div>
<div name="three">3</div>
3、$(" 选择器 [属性名 ^= '值' ’’]")：留下满足定位条件的并且指定属性内容以【指定内容为开头的】的DOM对象
例子： $(" div [ name ^= 't' ]") <div name="two">2</div>
<div name="three">3</div>
4、$(" 选择器 [属性名 $= '值' ’’]")：留下满足定位条件的并且指定属性内容以【指定内容为结尾的】的DOM对象
例子： $(" div [ name $= 'e' ]") <div name="three">3</div>
5、$(" 选择器 [属性名 *= '值' ’’]")：留下满足定位条件的并且指定属性内容【包含指定内容】的DOM对象
例子： $(" div [ name ^= 'o' ]") <div name="two">2</div>
6、$(" 选择器 [属性名1] [属性名2 *='值'] [属性名3 ^= '值']") ,留下满足多重条件的DOM对象
工作状态属性过滤器
html标签属性分类：
1、基本属性：绝大多数标签都拥有的属性，【id,name,title,rowspan 】
2、样式属性：背景、颜色、字体
3、value属性：只存在【表单域标签中（input，select、textarea）】
4、工作状态属性：只存在【表单域标签中（checked，disabled，slected）】
5、监听器事件属性：onclick，onchange......
使用：
1、$("选择器 : enabled")：留下满足条件并处于【可用状态】的DOM
例子：$(" :button : enabled")：定位所有处于可用的button
2、$("选择器 : disabled")：留下满足条件并处于【不可用状态】的DOM
例子：$(" :button : disabled")：定位所有处于不可用的button
3、$("选择器 : checked")：留下满足条件并处于【选中状态】的DOM
例子：$(" :checkbox : checked: first")：页面中第一个被选中的checkbox
4、$("选择器 : selected")：留下满足条件并处于【选中状态】的DOM
例子：$(" :slect >option: selected")：下拉列表中别选中的option
其他
功能函数
show() & hide()：
show()：负责让jQuery对象包含所有的DOM对象关联的标签在浏览器上显示 style = "display : block"
hide()：负责让jQuery对象包含所有的DOM对象关联的标签在浏览器上隐藏 style = "display : none
remove() &empty()：
empty：将当前标签进行清除处理
remove：将当前标签及其子标签一并删除
show()：负责让jQuery对象包含所有的DOM对象关联的标签在浏览器上显示 style = "display : block"
hide()：负责让jQuery对象包含所有的DOM对象关联的标签在浏览器上隐藏 style = "display : none
append() & appendTo()：
共同点：都是操作标签中innerHTML，为当前标签添加子标签
append()：父标签.append(子标签)；父亲给自己找了一个儿子
appendTo()：子标签.appendTo(父标签)；儿子给自己找了一个爹
属性操作函数
var函数：value
$obj.var()：读取jQuery对象中的第一个DOM对象的【value属性值】
$obj.var(值)：为jQuery对象中所有DOM对象的【value属性】进行统一赋值
prop函数：工作状态属性 checkde，disabled，selected
$obj.prop("checked" , true)：为jQuery对象中所有的DOM对象的checked属性值赋值为true
$obj.prop("checked" )：读取jQuery对象中的第一个DOM对象的【checked属性值】
attr函数：基本属性 id，name，title，rowspan
$obj.attr("naem" , ck)：为jQuery对象中所有的DOM对象的【name】属性值统一赋值为【ck】
$obj.attr("title" )：读取jQuery对象中的第一个DOM对象的【title属性值】
事件绑定方式
JavaScript中事件绑定方式
1、嵌入式绑定：<input type = "button" onclick = "fun1">
缺点：依次只能为一个标签绑定监听事件
2、基于DOM对象绑定方式：var array = document.getElementByName("ck");
for(var i = 0; i<array.length; i++){
var domObj = array[i];
domObj = array[i];
}
缺点：需要开发人员自行遍历数组，来绑定监听事件
jQuery中事件绑定方式
1、$obj.jquery监听事件函数（处理函数）
例子：
$(": button").onclick(fun1);
为页面中所有的button绑定onclick以及对应处理函数fun1
【jQuery】监听事件函数 html事件 jQuery监听事件函数
onclick $obj.click(fun1);
onchange $obj.change(fun1);
onmouseover $obj.mouseover(fun1);
**************jQuery监听事件函数名字就是【jQuery监听事件函数】去掉【on】************
2、$obj.bind（"jQuery监听事件函数名" , 处理函数）：以这种方式绑定监听事件，可以解除的
$obj.unbind（"jQuery监听事件函数名" ）：将指定监听事件从DOM对象身上移除
$obj.unbind（）：：将所有监听事件从DOM对象身上移除
916
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
