内容介绍
1.Jquery的选择器
2.Jquery的方法
操作标签的文本和value属性值
操作标签的样式
操作标签的属性
对某些标签插入指定标签的方法
jquery(jq)
概述
jquery:是javascript的一套框架 作用:大大简化javascript的代码量 倡导写更少的代码,做更多的事情 框架:对原有javascript的功能代码进行封装,对外提供更加简单的语法方式实现同样的功能,大大提高开发的效率
了解:jquery框架封装javascript的原理
jquery的使用
条件:需要引入jquery框架文件 jquery框架文件就是对javascript功能代码的二次封装 简称js库
js库的版本: 1.x:兼容IE6/7/8,使用最为广泛的 企业应用 2.x:不兼容IE6/7/8,很少有人使用 3.x:不兼容IE6/7/8,只支持最新的浏览器。除非特殊要求,一般不会使用3.x版本的 开发版本:命名为jQuery-x.x.x.js 好处:代码格式好 便于看源码 但是体积大 生产版本:命名为jQuery-x.x.x.min.js 好处:体积小 代码格式不好
快速入门
1 导入js库(jquery-3.3.1.min.js) 2 编写页面加载事件测试是否引入成功
js和jq的页面加载事件区别面试题
js页面加载事件:只执行一次,如果有多个是按照页面从上到下的加载顺序后面的覆盖前面的 jq页面加载事件:有多少个页面加载方法,就执行多少个,执行顺序是按照页面的从上到下的顺序 Ps: jquery3.0以上是随机执行
js的dom对象和jq的对象进行互转(了解)
js的dom对象有自己的方法和属性 jquery对象也有自己的方法和属性 特点:jquery对象不能使用js的dom对象方法和属性 js的dom对象也不能使用jquery的方法和属性 解决: 只要jquery对象转成js的dom对象 就可以使用js的方法和属性 只要js的dom对象转成jquery对象 就可以使用jq的方法和属性 jquery转换成js的dom对象: $("元素标签")[0] js的dom对象转换成jquery对象:$(js的dom对象)
jQuery操作标签的文本和value值方法(掌握)
val() html() text()
val([value]): 获得/设置元素value属性相应的值 html([value]): 获得/设置元素的标签体内容 text([value]): 获得/设置元素的文本内容
jq的选择器必掌握
目的:使用选择器的目的最终都是为了获取标签
1 基本选择器
ID选择器 $("#id名称") 需要html标签上有id属性 类选择器 $(".class名称") 需要html标签上有class属性 元素选择器 $("标签元素名称")
2 层级选择器
元素1 元素2 匹配元素1下面的所有元素2(包含子子孙孙) 元素1>元素2 匹配元素1下面的所有元素2(只包含子元素)
3 基本过滤选择器
元素:first 根据过滤获取第一个元素 元素:last 根据过滤获取最后一个元素 元素:even 根据过滤获取偶数索引的元素 元素:odd 根据过滤获取奇数索引的元素 元素:not(元素) 根据过滤获取不包含指定元素的所有元素 元素:eq(索引) 根据过滤获取索引相等的元素 元素:gt(索引) 根据过滤获取大于索引的元素 元素:lt(索引) 根据过滤获取小于索引的元素 :header 根据过滤获取标题 (hn标签)
4 属性选择器
$("元素[属性名]") 根据标签元素的属性名来匹配 $("元素[属性名=值]") 根据标签元素的属性名的值来匹配 $("元素[属性名=值][...]") 包含多个属性条件的选择器
5 表单属性选择器
元素:enabled 获取所有可用的标签元素 元素:disabled 获取所有不可用的标签元素 元素:checked 获取默认被选中的input标签元素 元素:selected 获取默认被选中的select标签元素
jquery操作标签样式掌握
css(name,[value]) 获取/设置指定的CSS样式 addClass(value) 给指定的标签添加样式 removeClass(value) 删除指定的样式 toggleClass(value) 切换样式,如果没有样式,则添加,如果有样式,则删除
jQuery对标签属性进行操作掌握
attr()方法或prop()方法 ps:建议1.6以前可以用attr来操作属性 1.6以后可以用prop来操作属性
jquery指定插入标签的方法掌握
append(element) 添加成最后一个子元素,两者之间是父子关系 prepend(element) 添加成第一个子元素,两者之间是父子关系 before(element) 添加到当前元素的前面,两者之间是兄弟关系 after(element) 添加到当前元素的后面,两者之间是兄弟关系 remove() 删除元素 empty() 清空元素的所有子元素
jquery的方法整理
1:jquery操作标签的文本和value值方法 html([值]): <div><a href=#>文本</a></div> text([值]): <div>文本</div> val([值]): <input type="text" name="username" value="abcd/1234"/> value值:abcd/1234 2:jquery操作标签的样式方法 css(属性名,属性值) 获取/设置指定的CSS样式 addClass(value) 给指定的标签添加样式 removeClass(value) 删除指定的样式 toggleClass(value) 切换样式,如果没有样式,则添加,如果有样式,则删除 3:jquery操作标签属性的方法 attr("属性名","属性值")方法或prop("属性名","属性值")方法 ps:建议1.6以前可以用attr来操作属性 1.6以后可以用prop来操作属性 4:jquery操作标签添加指定标签 append(element) 添加成最后一个子元素,两者之间是父子关系 prepend(element) 添加成第一个子元素,两者之间是父子关系 before(element) 添加到当前元素的前面,两者之间是兄弟关系 after(element) 添加到当前元素的后面,两者之间是兄弟关系 remove() 删除元素 empty() 清空元素的所有子元素
案例
案例1:隔行换色 案例2:复选框的全选全不选操作 案例3:QQ表情发表案例
继续阅读

资源分享QQ群
本站是一个IT技术分享社区, 会经常分享资源和教程; 分享的时代, 请别再沉默!
评论