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的要求转换)