HTML学习

day7-jQuery

认识jQuery

1.什么是jQuery

jQuery的本质就是用js封装的一个库，这个库中提供了各种各样的方法让我们js中的DOM操作更简单

2.怎么导入jQuery

1）导入本地jQuery（先下载jQuery库文件）
2）导入远程的jQuery库文件

3.jQuery的基础语法

jQuery是通过jQuery类和jQuery对象来提供功能的。

$  ——  jQuery类
$（）  ——   jQuery类的对象

jQuery类的对象与js中的节点的关系：一个jQuery对象中可以关联一个或者多个js节点对象

jQuery的DOM操作

1.获取标签

$(选择器) 

获取选择器选中的所有标签，返回一个 jQuery对象
说明：
选择器 —— 和css中的选择器一样
1）常用选择器
a.id选择器
b.class选择器
c.标签选择器
d.父子选择器
e.群组选择器
2）其他的一些选择器

a.console.log($('p+a'))
b.console.log($('#p1~a'))

a.选中紧跟p标签的a标签
b.选中id是p1标签后面所有的兄弟a标签

2.创建和添加标签

1）创建标签

$（'html代码'）

2）添加标签

父标签.append（新标签）

在父标签的最后添加新的标签

父标签.prepend（新标签）

在父标签的最前面添加新的标签

标签.before（新标签）

在指定标签前插入新标签

标签.after（新标签）

在指定标签后插入新标签

3.删除标签

标签.remove（）

针对 jQuery对象所有的操作会作用于 jQuery对象关联的所有的标签

4.复制标签

标签.clone（是否拷贝事件=false）

复制指定标签产生一个新的标签（深拷贝）
事件指的是是否拷贝通过 jQuery绑定的事件

5. jQuery对象和js对象

1）对 jQuery对象的操作，会作用于这个 jQuery对象里面的所有标签
2） jQuery对象转js对象：获取 jQuery对象的元素得到的就是js对象
3）js对象转换成 jQuery对象：$(js对象)

jQuery属性操作

1.标签内容

标签.text()   -  获取标签内容
标签.html()   -  获取标签内容
标签.text(新内容)  -  修改标签内容
标签.html(新内容)   -  修改标签内容

2.value属性

标签.val（）
标签.val（新内容）

3.class属性

标签.addClass(class值)    -   添加class
标签.removeClass(class值)   -  删除class

4.普通属性

标签.attr(属性名)  -  获取指定属性的值
标签.attr(属性名, 值)  -  修改指定属性的值

5.样式属性

标签.css(样式属性名)   -   获取样式属性值
标签.css(样式属性名, 值)  -  设置样式
标签.css({属性名:值, 属性名2:值2...}) - 同时设置多个属性(属性名按照js的要求转换)