Skr-Eric的Javascript课堂（七）——jQuery 使用

jQuery 使用

1. jQuery 是一个JS库,封装了原生的JS,得到一套完整的方法.

核心 ：write less, do more

版本 ：

1.xx.x 版本的jQuery兼容IE6，7，8

2.xx.x 版本的jQuery不再兼容IE 6,7,8

优点 ：

1. 简化DOM操作，像操作css一样操作DOM

2. 直接通过选择器设置样式

3. 简化JS事件操作

4. 采用链式调用操作JS节点

-------------------------------

5. Ajax技术更加完善

6. 提供各种便捷的动画处理

7. 基于jQuery的插件使用更便捷

8. 可以通过jQuery自定义插件

 

2. jQuery使用

1. 引入jQuery文件

<script src=""></script>

2. 如果想要使用jQuery语法，必须将文件引入操作放在

代码前面

3. 使用jQuery

1. jQuery对象 ：实际上是对原生的JS对象进行封装，

封装之后可以使用jQuery提供的方法

注意 ：

1. jQuery对象可以使用jQuery提供的方法，

原生JS对象可以使用原生JS方法，方法不能混用

2. jQuery对象和原生JS对象可以共存，也可以

互相转换

2. 工厂函数 $()

jQuery对象可以使用 jQuery或者 $表示

使用 ：

$('div'); //获取div对象

3. 原生对象与jquery对象互相转换

1. DOM -> jquery

var h1 = document.get...;

var $h1 = $(h1);

2. jq -> dom

var h1 = $h1[0];

var h1 = $h1.get(0);

 

3. jQuery选择器

1. 根据提供的选择器到页面获取元素，返回都是jquery对象

组成的数组

2. $("选择器");

3. 选择器分类 ：

1. 基础选择器

1. id选择器

$("#id");

 

2. 类选择器

$(".className");

3. 标签选择器

$("tagName");

3. 群组选择器

$("selector1,selector2,..");

 

2. 层级选择器

1. 后代选择器

$("selector1 selector2");

2. 子选择器

$("selector1>selector2");

3. 相邻兄弟选择器

$("selector1+selector2");

匹配紧跟在selector1后，满足selector2的元素

只匹配紧邻selector1的第一个兄弟元素，

如果紧邻的第一个兄弟元素不满足selector2,

就匹配失败

4. 通用兄弟选择器

$("selector1~selector2");

匹配selector1后面所有满足selector2的兄弟元素

 

3. 筛选选择器

也叫过滤选择器，需要结合其他选择器使用

1. :first

匹配一组元素中的第一个

et:

"p:first"

2. :last

匹配一组元素中的最后一个

selector:last;

3. :not

否定筛选,将selector匹配的元素过滤在外，

匹配其他元素

:not(selector)

4. :odd

匹配偶数行对应的元素

5. :even

匹配奇数行对应的元素

6. :eq(index)

匹配下标等于index的元素

7. :lt(index)

匹配下标小于index的元素

8. :gt(index)

匹配下标大于index的元素

 

4. 属性选择器

1. 根据属性名筛选元素

[attribute]

2. 根据属性名和属性值筛选元素

[attribute=value]

3. 匹配属性值以指定字符开头的元素

[attribute^=value]

^表示以...开头

4. 匹配属性值以指定字符结尾的元素

[attribute$=value]

$表示以...结尾

5. 匹配属性值中包含指定字符的元素

[attribute*=value]

6. 匹配属性名不等于指定属性值的元素

[atttibute!=value]

 

5. 子元素过滤选择器

1. :first-child

匹配属于父元素中的第一个子元素

2. :last-child

匹配父元素中最后一个子元素

3. :nth-child(n)

匹配父元素中第n个子元素

 

6. jquery操作DOM

1. 内容操作

1. html()

设置或读取jquery对象中的HTML内容

类似于原生JS innerHTML

2. text()

设置或读取jquery对象中的文本内容

类似原生JS innerText

3. val()

设置或读取表单对象的value值

2. 属性操作

1. attr()

读取或设置jquery对象的属性

et :

$('div').attr("id");

$('div').attr('class','c1');

2. removeAttr()

移除指定属性

et :

$('div').removeAttr('id');

3. 样式操作

1. attr()

为元素添加id或class属性，对应选择器样式

2. addClass('className')

为元素的class属性赋值，匹配选择器样式

3. removeClass('')

移除指定的class属性值

参数可以省略，省略之后表示清空类选择器

4. toggleClass()

切换样式，给出class属性值，如果元素存在指定的

类名，则移除，不存在则添加

5. css()

设置或读取元素CSS属性

1. css('width')

读取元素的宽度

2. css('width',"300px")

设置元素的样式

3. css(JSON对象)

为元素设置一组CSS样式

css({

"color":"red",

"width":"300px"

})

4. 节点查询

1. children() / children('selector')

获取jquery对象的所有子元素或者

获取指定选择器匹配的所有子元素

注意 ：只包含直接子元素，不考虑后代子元素

2. find('selector')

获取满足selector的所有后代元素

3. prev() / prev('selector')

获取前一个兄弟元素或者

获取前一个兄弟元素，必须满足selector

4. next() / next('selector')

获取后一个兄弟元素或者

获取后一个兄弟元素，必须满足selector

5. siblings() / siblings('selector')

获取前后所有的兄弟元素或者

满足selector的所有兄弟元素

6. parent()

获取jquery对象的父元素

5. 节点操作

1. 创建节点

var $h1 = $("<h1>一级标题</h1>");

var $h2 = $("<h1></h1>");

h2.html();

h2.attr();

h2.css();

2. 添加节点

1. 以子元素的形式插入到页面中

1. $parent.append($h1);

将新创建的对象作为最后一个子元素插入

2. $parent.prepend($h2);

将新创建的对象作为第一个子元素添加

2. 以兄弟元素的形式插入到页面中

1. $obj.after($h1);

将新创建的对象作为$obj的下一个兄弟元素插入

2. $obj.before($h2);

将新创建的对象作为$obj的前一个兄弟元素插入

3. 删除节点

$obj.remove();

移除$obj

6. 事件操作

1. 页面加载完毕之后再执行

原生JS ：

window.onload = function(){};

jquery :

1. $(document).ready(function(){

});

2. $().ready(function(){});

3. $(function(){});

原生onload事件与jquery的ready()方法区别 ：

1. 原生的onload事件多次使用时，前面的会被覆盖

不执行，需要做特殊判断和处理，而ready方法没有

此问题，可以重复调用多次，按顺序依次执行

2. 原生的onload事件会等待文档中DOM树及所有

资源都加载完毕之后才执行，而ready方法会等文档

DOM树加载完毕后就执行

2. jquery事件绑定

1. 使用bind()

$obj.bind('事件函数名',function(){});

注意 ：省略on前缀

et :

$('div').bind("click",function(){});

2. 使用事件函数

$obj.事件名称(function (){});

注意 ：省略on前缀

et :

$('div').click(function(){});

3. 事件对象及属性

1. 获取事件对象与原生方法一致

都是以参数形式自动传入

$('div').click(function(evt){

console.log(evt);

});

2. 事件对象的属性保持一致

target

offsetX

...

4. this对象

当前函数或方法的调用对象

 

 

 

 

想要看更多的课程请微信关注SkrEric的编程课堂