jQuery

1 例子

原生js：

window.onload = function(){

var btnObj = document.getElementById("btnId");

alert(btnObj);

btnObj.onclick = function{

alert("js 原生的单击事件")

}

}

jQuery

<script type="text/javascript" src="****"></script>

$(function(){

var $btnObj = $("#btnId");

$btnObj.click(function(){

alert("jQuery 单击事件");

});

});

2 常见问题

• jQuery中的$是什么？

• 他是一个函数

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

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

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

3 jQuery核心函数

$ 是jQuery的核心函数

• 传入参数为[函数]时，在文档加载完成后执行这个函数

• 传入参数为[HTML字符串]时，根据这个字符串创建元素节点对象

• 传入参数为 [选择器字符串]时，根据这个字符串查找元素结点对象

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

• $["标签名"]； 标签名选择器，根据指定的标签名查询标签对象

• $[".class 属性值"]； 类型选择器，可以根据class属性查询标签对象

• 传入参数为[DOM对象]时，将DOM对象包装成jQuery对象返回

4 如何区分jQuery对象和DOM对象

注意：通过jQuery包装的DOM对象，也是jQuery对象

4.2 jQuery对象的本质

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

4.3 jQuery对象和Dom对象使用区别

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

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

4.4 Dom对象和jQuery对象互转

1. dom对象转化为jQuery对象

1、先有DOM对象

2、$（DOM对象）就可以转化为jQuery对象

2. jQuery对象转为dom对象

1、先有jQuery对象

2、jQuery对象[下标]取出相应的DOM对象

5.1 jQuery基础选择器

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

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

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

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

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

5.2 层级选择器

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

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

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

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

5.3 过滤选择器

基本过滤器

:first 获得第一个元素

:last 获取最后一个元素

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

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

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

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

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

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

:header 匹配如h1，h2，h3之类的标题元素

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

内容过滤器

属性过滤选择器

［attribute］ 匹配包含给定属性的元素

［attribute=value］ 匹配给定的属性是某个特定的元素

［attribute!=value］ 匹配所有不含有指定属性，或者属性不等于特定值的元素

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

［attribute$=value］ 匹配给定的元素是以某些值结尾的元素

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

［attrSel1］[attrSel2][attrSelN] 复合属性选择器

表单过滤器

:input

:password

:text

:radio

:checkbox

:submit

:reset

:button

:file

:hidden

:checked

:selected

6 jQuery元素的筛选

非常多（恼

jQuery的属性操作

• html()

• 跟dom属性innerHTML一样

• text()

• 跟innerText一样

• val()

• 可以设置和获取表单项的value属性值，跟dom属性value一样

• attr()

• 可以设置和获取属性的值

• $(":checkbox:first").attr("name")获取值

• $(":checkbox:first").attr("name","abc")设置值

• 不推荐操作checked，readOnly，selected

• prop()

• 可以设置和获取属性的值

全选、全不选、反选

prop设置checked为this.checked

4 -DOM的增删改

内部插入

appendTo（） 把a插入到b子元素末尾

prependTo（） 把a插入到b所有子元素前面

外部插入

insertAfter（） 得到ba

insertBefore（） 得到ab

替换

replaceWith（） b替换a

replaceAll（） 用b替换掉所有a

删除

remove（） 删除a标签

empty（） 清空a标签的内容

从左到右，从右到左

左边选中的option appendTo右边的Select

动态添加和删除行记录

添加按照常理添加就行

confirm(""); 是JS提供的一个确认提示框函数

删除用confirm返回的true或者false判断

在事件响应的function函数中，有一个this对象，这个this对象是当前正在响应事件的dom对象

CSS样式操作

• addClass() 添加样式

• removeClass() 删除样式

• toggleClass() 有就删除，没有就添加样式

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

jQuery动画

• show() 将隐藏元素显示

• hide() 将可见的元素隐藏

• toggle() 可见就隐藏，不可见就显示

• fadeln()

• fadeOut()

• fadeTo()

• fadeToggle()

练习：品牌展示

后代选择器

jQuery事件加载

$(function(){}) 和 window.onload = function(){}的区别？

分别在什么时候触发？

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

触发顺序？

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

4. 原生js的页面加载完成之后　

jQuery常用事件处理方法

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

• mouseover() 鼠标移入事件

• mouseout() 鼠标移出事件

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

• one() 使用上跟bind一样，但是，one方法绑定的事件只会响应一次

• live() 也用来绑定事件。它可以用来绑定选择器匹配的所有元素的事件，哪怕是后来创建的也有效

• unbind()　　　　　　跟bind相反操作，解绑　　　　

事件的冒泡

在子元素函数体内return false就可以阻止冒泡

javascript事件对象

1. 原生js获取事件对象

1. 在function（）里面加一个参数，一般为event

2. jQuery代码获得事件对象

1. 一样

3. 使用bind同时对多个事件绑定同一个函数，怎么获取当前操作是什么事件