引入jQuery文件
jQuery的选择器学习:
基本选择器
id选择器
标签选择器
类选择器
组合选择器
层级选择器
子选择器
注意:
jQuery中的选择器获取的是存储了HTML元素对象的数组。
jQuery获取的元素对象不能够直接使用js中的内容,按照数组的取出方式将对象取出后可以使用js的内容。
jquery操作元素属性
获取:
对象名.attr("属性名")//返回当前的属性值
注意此种方式不能获取value的实时的数据,使用对象名.val()进行获取
修改:
对象名.attr("属性名","新的值");
jQuery操作内容学习
获取元素对象
1、获取
对象名.html();//返回当前对象的所有内容,包括HTML标签
对象名.text();//返回当前对象的文本内容,不包括HTML标签
2、修改
对象名.html("新的内容");//新的内容会将原有的内容覆盖,HTMl标签会被解析
对象名.text("新的内容");//新的内容会将原有的内容覆盖,HTML标签不会被解析
jquery操作元素的样式
1、使用css()
对象名.css("属性名")//返回当前属性的样式值
对象名.css("属性名","样式值")//增加、修改属性的样式值
对象名.css({"属性名":"样式值","属性名":"样式值",...})//使用json传参,提升代码书写效率
2、使用addClass()
对象名.addClass("类选择器名")//追击一个样式
对象名.removeClass("类选择器名")//删除一个样式
jQuery操作文档结构学习
获取元素对象
1、内部插入
append("内容") 将指定的内容追加到对象的内部
appendto(元素对象或选择器) 将指定的元素对象追加到指定的对象内容后
prepend() 将指定的内容追加到对象的前面
prependto() 将指定的元素对象追加到指定的对象前面
2、外部插入
after 将指定的内容追加到指定的元素后面
before 将指定的内容追加到指定的元素前面
insertAfter 把所有匹配的元素添加到另一个指定的元素集合的后面
insertBefore 把所有匹配的元素添加到另一个指定的元素集合的前面
3、替换
replaceWith
replaceAll
4、删除(清空)
empty()
5、复制
clone()
clone().prependto()
jquery动态操作事件
元素对象.bind("事件名",fn)//动态的给指定的元素对象追加指定指定的事件及监听函数
注意:
js是一次添加,如果多次添加会覆盖的效果
jQuery是追加的效果,可以实现给一个事件添加不同的监听函数
元素对象.unBind("事件名")//移除指定的元素对象的指定事件
注意:js方式添加的事件不能移除
元素对象.one("事件名",fn)//给指定的元素对象添加一次性事件,事件被触发后则失效
注意:可以给事件添加多个一次函数,unBind可以解绑
页面载入事件:
$(document).ready(fn);
页面载入成功后调用传入的函数对象
注意:
此方式可以给页面载入动态的添加多个函数对象,不会被覆盖