jquery学习教程1

沙海
沙海
沙海
164
文章
2
评论
2019年1月10日17:32:55 评论 64 2614字阅读8分42秒

内容介绍

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
沙海
  • 版权声明:本站是一个IT技术分享社区,沙海技术团队的技术分享社区,我们会经常分享资源和教程。
  • 转载请注明:jquery学习教程1 - GYHQQ社区 ☜(ˆ▽ˆ)
专业承接各类企业网站的开发和维护
阿里云企业级云服务器新用户1折特惠
网站https安全证书安装,伪静态配置
Linux服务器网站环境安装
收藏排行榜分页查询功能 JavaScript

收藏排行榜分页查询功能

收藏排行榜分页查询功能 需求分析 当用户需要查询当前网站那些旅游线路被收藏更多次或者更热门时,我们可以通过点击“收藏排行榜”导航栏超链接完成根据旅游线路表中收藏次数倒序查询数据,并将查询结果展示在fa...
JavaMail&定时器 Java

JavaMail&定时器

第1章 Filter拦截方式 1.1 include 当设置过滤器的拦截方式为include的时候,只有当使用include方式转发的请求才能被拦截 1.1.1 include拦截方式代码演示 1.创...
Linux搭建web环境手册 Redis

Linux搭建web环境手册

使用说明 说明:该笔记是在linux上安装jdk,mysql,tomcat,redis等软件,以便于建立一个linux系统下的web环境,具体安装过程的流程截图等可以参考我的另一篇图片教程:Linux...
Redis(缓存技术)教程 Java

Redis(缓存技术)教程

概述 Redis是用C语言开发的一个开源的高性能键值对(key-value)数据库 为什么要使用redis? 场景: 在企业级开发,需要完成导航条的数据,但是导航条的数据一般都是来源于数据库,只要每个...
匿名

发表评论

匿名网友 填写信息

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