jquery - yaokun123/php-wiki GitHub Wiki

jQuery

一、为什么要学习jQuery

  • 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:匹配所有input,textarea,select和button元素
: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:匹配含有子元素或者文本的元素
⚠️ **GitHub.com Fallback** ⚠️