jquery学习教程1

  • A+
所属分类:JavaScript JavaWeb

内容介绍

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群
  • weinxin
  • 官方微信公众号
  • weinxin
沙海
TripodCloud:性价比最高的CN2 GIA服务器
C语言速查手册
美女讲师教你学C语言
网站https安全证书安装,伪静态配置

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: