为什么要学习 jQuery

发布于 2021-06-25 12:39:36 字数 3213 浏览 1316 评论 0

1、使用 JavaScript 开发过程中,有许多的缺点

1、查找元素的方法太少,麻烦。
2、遍历伪数组很麻烦,通常要嵌套一大堆的 for 循环。
3、有兼容性问题。
4、要想实现简单的动画效果,也很麻烦。
5、代码冗余。
6、js注册事件会被覆盖。

2、jQuery 的优点

1、出色的浏览器兼容性。
2、强大的选择器。
3、出色的DOM操作的封装。
4、完善的Ajax支持。
5、链式操作方式。
6、隐式迭代。
7、丰富的插件支持。

3、jQuery 初体验

1、需要引入 jQuery 文件:<script src="jquery-1.12.4.js"></script>
2、入口函数的标准:

//window.onload=function(){}只能使用一次
$(document).ready(function(){//dom结构加载完成之后立即执行,可重复使用多次。
  $("div").show(3000);//加上时间会有动画效果
  //隐式迭代:偷偷的遍历,jquery会自动的遍历,不需要我们遍历。
})

4、jQuery 对象与 DOM 对象

1、jQuery对象是通过jQuery方法包装后的对象,可以使用jQuery中的属性和方法。
2、DOM对象式DOM节点对象,可以使用DOM下的属性和方法。
3、jQuery对象和DOM对象的属性和方法不可以混合使用。
4、jQuery对象和DOM对象可以相互转换。

jQuery对象转为DOM对象:
jQuery对象是一个类似数组,可以通过 [index] 的方法得到相应的DOM对象。
另一种方法事故jQuery本身提供的,通过get(index)方法得到相应的DOM对象。

DOM 对象转为 jQuery 对象:
对于一个 DOM 对象,只需要用 $() 把DOM对象包装起来就可以获得一个jQuery对象了。

5、jQuery 选择器

格式:$("选择器")

基本选择器

基本选择器是 jQuery 中最常用的选择器,也是最简单的选择器,它通过元素 id、class、和标签名等来查找 DOM 元素。
ID选择器:$("#id值")
类选择器:$(".类名")
标签选择器:$("标签名")
全选择器:$("*")
并集选择器:$("selector1,selector2,selector3,...")

层级选择器

通过DOM元素之间的层级关系来获取特定元素
后代选择器:$("selector1 selector2")
子选择器:$("selector1>selector2")
相邻(下一个)兄弟选择器:$("selector1+selector2")
所有(下面)兄弟选择器:$("selector~selector2")

基本匹配选择器

:first:获取匹配的第一个元素
:last:获取匹配的最后一个元素
:not(selector):去除所有与给定选择器匹配的元素
:even:匹配所有索引值为偶数的元素,从0开始计数
:odd:匹配所有索引值为基数的元素,从0开始计数
:eq(index):匹配一个给定索引值的元素
:gt(index):匹配所有大于给定索引值的元素
:lt(index):匹配所有小于给定索引值的元素
:header:匹配如h1,h2,h3之类的标题元素

属性匹配选择器

[attribute]:匹配包含给定属性的元素。
[attribute=value]:匹配给定的属性是某个特定值的元素。
[attribute!=value]:匹配所有不含邮指定的属性,或者属性不等于特定值的元素。
[attribute^=value]:匹配给定值的属性是以某些值开始的元素。
[attribute=$=value]:匹配给定值的属性是以某些值结束的元素。
[attribute*=value]:匹配给定的属性是以包含某些值的元素。
[attrSel1][attrSel2][attrSelN]:复合属性选择器,需要同时满足多个条件时使用。

子元素匹配选择器

:nth-child:匹配其父元素下的第N个子或奇偶元素
:first-child:匹配第一个子元素
:last-child:匹配最后一个子元素
:only-child:如果某个元素是父元素中唯一的子元素,那将会被匹配

表单匹配选择器

:input:匹配所有 inputtextareaselectbutton 元素
:text:匹配所有的单行文本框
:password:匹配所有的密码框
:radio:匹配所有单选按钮
:checkbox:匹配所有复选框
:submit:匹配所有提交按钮
:reset:匹配所有重置按钮
:button:匹配所有按钮
:file:匹配所有文件域
:hidden:匹配所有不可见元素,或者 type 为 hidden 的元素
:visible:匹配所有可见元素
:enabled:匹配所有可用元素
:disabled:匹配所有不可用元素
:checked:匹配所有选中的被选中元素(复选框、单选框,不包括 select 的 option)
:selected:匹配所有选中的 option 元素

内容匹配选择器

:contains(text)
:has(selector)
:empty:匹配所有不包含子元素或者文本的空元素
:parent:匹配含有子元素或者文本的元素

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

0 文章
0 评论
84961 人气
更多

推荐作者

醉城メ夜风

文章 0 评论 0

远昼

文章 0 评论 0

平生欢

文章 0 评论 0

微凉

文章 0 评论 0

Honwey

文章 0 评论 0

qq_ikhFfg

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文