JQuery入门手册

基础
- 学习重点
- 技术介绍
- jQuery使用
- jQuery对象与DOM对象的区别
- jQuery对象与DOM对象转换
选择器
- 选择器语法
- 基本选择器
- 层级选择器
- input标签选择器
过滤器
- 过滤器语法
- 基本过滤器
- 基本属性过滤器
- 工作状态属性过滤器
其他
- 功能函数
- 属性操作函数
- 事件绑定方式

基础

学习重点

熟练背诵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")：定位页面中第一个button2、$(" 选择器 : last")：留下满足条件中的第一最后一个个DOM对象例子：$(":button : last")：定位页面中最后一个button3、$(" 选择器 :eq（下标值） ")：留下满足条件中的指定位置的DOM对象例子：$("div : eq（2）")：定位页面中第三个div4、$(" 选择器 : lt（下标值）")：留下满足条件中的指定位置之前的所有的DOM对象例子：$(": checkbox : lt (2)")：页面中前两个checkbox5、$(" 选择器 : 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对象身上移除

JQuery入门手册（学习笔记整理）相关推荐

Kafka入门篇学习笔记整理
Kafka入门篇学习笔记整理 Kafka是什么 Kafka的特性应用场景 Kafka的安装单机版部署集群部署环境准备 Kafka 2.x集群部署 Kafka 3.x集群部署监听器和内外网络 K ...
python eval 入门_Python学习笔记整理3之输入输出、python eval函数
Python学习笔记整理3之输入输出.python eval函数来源:中文源码网浏览: 次日期:2018年9月2日 Python学习笔记整理3之输入输出.python eval函数 ...
天猫整站SSM-分页-herf（做个人学习笔记整理用）
天猫整站SSM-分页-(做个人学习笔记整理用) <li ><a href="?start=${page.start-page.count}" aria-label ...
PHPWeb开发入门体验学习笔记
PHPWeb开发入门体验学习笔记 4 一.PHP web应用开发须知 1.入门要点程序员三个阶段:码农(速成技能)->工程师(长期知识)->专家(研究论文) 编程三要素:声明变量(系统. ...
jqGrid 学习笔记整理——基础篇
jqGrid 学习笔记整理--基础篇 jqGrid 实例中文版网址:http://blog.mn886.net/jqGrid/ 国外官网:http://www.trirand.com/blog/ 本人 ...
jqGrid 学习笔记整理——进阶篇（一）
jqGrid 学习笔记整理--进阶篇(一 ) 本篇为基础篇的扩展,使其具有增.删.改.查的基本功能. 在浏览导航栏添加所需按钮 <!DOCTYPE html> <html>&l ...
（Python入门）学习笔记一，初次接触尝试使用Python——环境搭建与配置
(Python入门)学习笔记一,初次接触尝试使用Python 早就耳闻Python大名,搞大数据.做人工智能.整机器学习,就得了解Python.之前一直没有去了解,现在由于之前一个项目涉及到一点Pyt ...
（Python入门）学习笔记二，Python学习路线图
(Python入门)学习笔记二,Python学习路线图千里之行始于足下,谋定而后动,冰冻三尺非一日之寒.之所以说这三句话,就是对于下面整理的路线图,即不让自己感觉路途的遥远而感到达到巅峰神界的遥遥无 ...
ARM 学习笔记整理（一）
ARM 学习笔记整理,主要用于将来的研究开发参考. 一.ARM体系结构的版本处理器的体系结构就是其使用的指令集,而通常我们说的Soc结构的处理器可以理解为一个实现机器指令集的硬件内核,在这个内核周围 ...

JQuery入门手册（学习笔记整理）