jQuery就是JavaScript和查询（Query），是辅助JavaScript开发的JS类库

核心思想是write less，do more,实现了很多浏览器的兼容问题

1.演示jQuery

怎么为按钮添加点击响应的函数？

1.使用jQuery查询到标签对象

2.使用标签对象.click(function(){});

2.jQuery核心函数

$是jQuery的核心函数，能完成jQuery的很多功能，$()就是调用这个函数

1.传入参数为“函数”时

表示页面加载完成后，相当于 window.onload = function();

2.传入参数为“HTML字符串”时

表示创建这个HTML标签对象

3.传入参数为“选择器字符串”时

$("#id属性值")；id选择器，根据id查询标签对象

$("标签名")；标签选择器，根据指定的标签名查询标签对象

4.传入参数为“dom对象”时

3.jQuery对象和DOM对象区分

DOM对象

1.通过getElementById()查询出来的标签是dom对象

2.通过getElementsByName()查询出来的标签是dom对象

3.通过getElementsByTagName()查询出来的标签是dom对象

4.通过createElement()查询出来的标签是dom对象

DOM对象alert的效果：[object HTML标签名Element]

jQuery对象

1.通过jQuery提供的API创建的对象，是jQuery对象

2.通过jQuery包装的DOM对象，也是jQuery对象

3.通过jQuery提供的API查询的对象，也是jQuery对象

jQuery对象alert的效果：[object Object]

jQuery对象的本质

jQuery对象是DOM对象的数组 + jQuery提供的一系列功能函数

jQuery对象和DOM对象使用区别

jQuery对象不能使用DOM对象的属性和方法

DOM对象也不能使用jQuery对象的属性和方法

DOM对象和jQuery对象互转

1.DOM对象转为jQuery对象

1.1先有DOM对象

1.2$(DOM对象)就可转为jQuery对象

var $obj = $(DOM对象);

2.jQuery对象转为DOM对象

1.1先有jQuery对象

1.2jQuery 对象[下标]就可取出相应的DOM对象

var dom = $obj[下标];

4.jQuery选择器

1.基本选择器

#ID 选择器：根据id查找标签对象

.class 选择器：根据class查找标签对象

element 选择器：根据标签名查找标签对象

* 选择器：表示任意的，所有的元素

selector1，selector2 组合选择器：合并选择器1，选择器2的结果并返回

2.层级选择器

ancestor descendant 后代选择器：在给定的祖先元素下匹配所有的后代元素

parent > child 子元素选择器：在给定的父元素下匹配所有的子元素

prev + next 相邻元素选择器：匹配所有紧接在prev元素后的next元素

prev ~ sibings 之后的兄弟元素选择器：匹配prev元素之后的所有siblings元素

3.过滤选择器

基本过滤器

：first 获取第一个元素

：last 获取最后一个元素

：not(selector) 去除所有与给定选择器匹配的元素

：even 匹配所有索引值为偶数的元素，从0开始计数

：odd 匹配所有索引值为奇数的元素，从0开始计数

：eq(index) 匹配一个给定索引值的元素

：gt(index) 匹配所有大于给定索引值的元素

：lt(index) 匹配所有小于给定索引值的元素

：header 匹配如h1,h2,h3之类的标题元素

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

内容过滤器

：contains（text）匹配包含给定文本的元素

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

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

：has(selector) 匹配含有选择器所匹配的元素的元素

属性过滤器

[attribute] 匹配包含给定属性的元素

[attribute=value] 匹配给定的属性是某个特定值的元素

[attribute!=value] 匹配所有不含有指定的属性或属性不等于特定值的元素

[attribute^=value] 匹配给定的属性是以某些值开始的元素

[attribute$=value] 匹配给定的属性是以某些值结尾的元素

[attribute*=value] 匹配给定的属性是以包含某些值的元素

[attrSel1][attrSel2][attrSel3] 复合属性选择器，需要同时满足多个条件

表单过滤器

:input 匹配所有input，textarea，select和button元素

：text 匹配所有文本输入框

：password 匹配所有密码输入框

：radio 匹配所有的单选框

：checkbox 匹配所有的复选框

：submit 匹配所有的提交按钮

：image 匹配所有image标签

：reset 匹配所有重置按钮

：button 匹配所有按钮

：file 匹配所有文件域

：hidden 匹配所有不可见元素，或type为hidden的元素

5.jQuery元素筛选

eq() 获取给定索引的元素

first() 获取第一个元素

last() 获取最后一个元素

filter(exp) 留下匹配的元素

is() 判断是否匹配给定的选择器，有一个匹配就返回true

has(exp) 返回包含有匹配选择器的元素的元素

not(exp) 删除匹配选择器的元素

next() 返回当前元素的下一个兄弟元素

nextAll() 返回当前元素后面所有兄弟元素

nextUntil() 返回当前元素到指定匹配的元素为止的后面元素

prev(exp) 返回当前元素的上一个兄弟元素

prevAll()

.....

siblings(exp) 返回所有兄弟元素

add() 把add匹配的选择器的元素添加到当前jQuery对象中

.......

6.jQuery的属性操作

html() 可以设置和获取起始标签和结束标签中的内容，和dom属性innerHTML一样

text() 可以设置和获取起始标签和结束标签中的文本，和dom属性innerText一样

val() 可以设置和获取表单项的value属性值，和dom属性value一样

val方法可同时设置多个表单项的选中状态

attr() 可以设置和获取属性的值，不推荐操作checked、readOnly、selected...等

attr方法还可操作非标准的属性，如自定义属性：abc..

prop() 可以设置和获取属性的值，只推荐操作checked、readOnly、selected...等

7.DOM的增删改

内部插入

appendTo()

a.appendTo(b) 把a插入到b子元素末尾

prependTo()

a.prependTo(b) 把a插入到b子元素前面

外部插入

insertAfter()

a.insertAfter(b) 得到ba

insertBefore()

a.insertBefore(b) 得到ab

替换

replaceWith()

a.replaceWith(b) 用b替换a

replaceAll()

a.replaceAll(b) 用a替换b

删除

remove()

a.remove() 删除a标签

empty()

a.empty() 删除a标签内容

8.CSS样式

addClass() 添加样式

removeClass() 删除样式

toggleClass() 有就删除，没有就添加

offset() 获取和设置元素的坐标

9.jQuery动画

基本动画

show() 将隐藏的元素显示

hide() 将显示的元素隐藏

toggle() 显示就隐藏，隐藏就显示

以上动画方法都可添加参数

1.第一个参数是动画执行时长，以毫秒为单位

2.第二个参数是动画的回调函数（动画完成后自动调用）

淡入淡出动画

fadeIn() 淡入

fadeOut() 淡出

fadeTo() 在指定时长内将透明度修改到指定的值，0透明，1完全可见，0.5半透明

fadeToggle() 切换

10.jQuery事件操作

$(function(){});

和

window.οnlοad=function(){}

的区别？

1.jQuery的页面加载完成之后，是浏览器的内核解析完页面的标签，创建好DOM对象后就马上执行

2.原生JS的页面加载完成之后，除了要等浏览器内核解析完标签，创建好DOM对象后，还要等标签显示时需要的内容加载完成

分别在什么时候触发？

1.jQuery页面加载完成之后先执行

2.原生JS的页面加载完成之后

它们执行的次数？

1.原生JS的页面加载完成之后，只会执行最后一次的赋值函数

2.jQuery的页面加载完成之后，是把注册的function函数依次全部执行

jQuery中常用的事件处理方法

click() 绑定单击事件，或触发单击事件

mouseover() 鼠标移入事件

mouseout() 鼠标移出事件

bind() 可以给元素一次性绑定一个或多个事件

one() 和bind一样，但只会响应一次

live() 可以用来绑定选择器匹配的所有元素事件，动态创建也有效

unbind() 和bind相反，解除事件绑定

事件冒泡

指父子元素同时监听同一个事件，当触发子元素事件时，同一个事件也被传递到了父元素的事件里去响应

如何阻止事件冒泡？

在子元素事件函数内，return　false

JS事件对象

事件对象是封装有触发的事件信息的一个JS对象

如何获取JS事件对象？

在给元素绑定事件时，在事件的function(event){}参数列表中添加一个参数，参数名习惯取名为event，这个event就是JS传递参数事件处理函数的事件对象

如：

0108 JQuery相关推荐

jquery dataTable 参数详解
http://www.360doc.com/content/15/0108/14/8790037_439143305.shtml 1 //@translator codepiano2 //@blog ...
Ajax接收Java异常_java – 处理来自Servlet的Jquery AJAX响应中的异常
我的servlet代码是 try{ //something response.setStatus(201); out.print("Data successfully saved" ...
Jquery DIV滚动至浏览器顶部后固定不动代码
获取元素(这里定位元素A)距离顶部的高度,接着设定scroll滚动的事件,比如超过那个高度,把A的位置设定为fixed,小于该高度,修改回relative. 效果例1 代码如下复制代码 <scr ...
jquery.raty评星插件
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>j ...
jquery autocomplete demo
根据用户输入值进行搜索和过滤,让用户快速找到并从预设值列表中选择. jquery.autocomplete参考地址 http://bassistance.de/jquery-plugins/jquer ...
在Ant-design-pro框架中引入jQuery和jQuery-ui步骤
1.安装jQuery和jQuery-ui npm i jquery s npm i jquery-ui s yarn install 2.在vue.config.js中进行配置 // webpack ...
火狐浏览器允许ajax,解决火狐浏览器发送jquery的ajax请求无效的问题
今天遇到这样一个问题: 页面在chrome下发送ajax的请求是没有问题的,但是在firfox下无效. 代码大致如下: //前面省略 ..... 生成成绩查询成绩 ...... ...... fun ...
jquery 监听的案例
jQuery 简介 jQuery 是一个 JavaScript 库. jQuery 使用可以下载一个,也可以使用Staticfile CDN.百度.又拍云.新浪.谷歌和微软的服务器都存有 jQuer ...
网站项目必备——12款白富美型 jQuery 图片轮播插件
转自:http://www.cnblogs.com/lhb25/archive/2013/01/06/jquery-image-carousel-effect.html 图片轮播是网站中的常用功能,用 ...

0108 JQuery