jQuery基础之一
标签：
JavaScript
初识jQuery
jQuery封装JavaScript中多个好用的函数成为并形成代码库，
操作时也更符合我们的习惯，并且减少了浏览器之间的兼容性。
引入
本地
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="jquery.js" type="text/javascript"></script>
联网
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://libs.baidu.com/jquery/1.9.0/jquery.js"
type="text/javascript"></script>jQuery基础选择器
选择器
选择网页中的DOM元素,精确更改网页中各个DOM元素的CSS属性等
jQuery中的基础选择器很类似于CSS普通选择器
标签选择器
如：$("div")
id 选择器
$("#ID")
.class 选择器
$(".className")
* 选择器
$("*")
获取网页中的全部元素包括<head>,<body>
技巧：如获取div标签下的全部子元素
$("div *")
slec1,slect2,selecN 选择器
$("slec1,slect2,selecN")
请获取选择器slec1,slect2,selecN选择的元素
实例:
$("div,.red,#one")==$("div")+$(".red")+$("#one")
注意： 选择器之间用","隔开,只有一个选引号DOM层级之内
prev+next选择器
$("prev+next")
查找与"prev"元素紧邻的下一个"next"元素
实例：
$("div+p")
释义:查找与div同一DOM层级的下面的第一个p元素
prev~siblings选择器
类似于prev+next只不过是后面所有的"siblings"元素
DOM层级之间
ance desc 选择器
ance==ancestor desc==descendant祖先子孙选择器
实例：
$("div p") 将获取页面中所有div下所有p元素
注意：
ance desc之间为一个空格
获取的是所有的desc后代元素
不仅仅是第一代子元素
parent>child 选择器
$("parent>child")
类似于祖先子孙选择器但只是parent的第一代孩子
jQuery过滤性选择器
过滤性选择器是在基础选择器的基础上,在对获得的元素对象加以筛选。
注意：下列所有的过滤性选择器
紧邻前面的基础性选择器(之间没有空格)
所有过滤性选择器都不能独立存在,前面要有基础选择器普通过滤性选择器
:first 过滤性选择器
从已经获取到的所有元素中只选择第一个
实例：
$("li:first")
从已经获取到的所有li标签中只选择第一个
:last 过滤性选择器
同:first:eq(index) 过滤选择器
从一组标签中选择一个任意的一个
实例：
$("li:eq(3)")
释义：从已经获取到的所有li标签中只选择第四个
:contains(text) 过滤选择器
对已经获取到的元素再次选择,只保留含有text文本的元素
实例:
$("li:contains('土豪')")
释义：选择li标签内部含有"土豪"的li标签
注意：
当具有双重引号时必须是单双引号一起
不能只有单引号或只有双引号
contains具有"s"
:has(selector) 过滤选择器
获取选择器中包含指定selector的所有元素
实例：
$("li:has('p')")
释义：获取包含p标签的所有li标签属性过滤选择器
[attribute=value] 属性选择器
实例：
$("li[title='黛玉']")
获取title的属性值为"黛玉"的li标签
[attribute!=value] 属性选择器
取反[attribute=value]
[attribute*=value] 属性选择器
实例:
$("li[title*='最']")
获取title的属性值中只要包含"最"字即可的所有li标签特殊属性
:hidden 过滤选择器
获取指定的所有具有隐藏属性的元素
实例：
$("p:hidden")
释义:获取所有具有display:none属性的p标签
:visible 过滤选择器
与:hidden相反
子元素位置
:first-child 子元素过滤选择器
实例:
$("li:first-child")
只获取li是第一个子孩子的li标签
:last-child 子元素过滤选择器
实例:
$("li:first-child")
只获取li是最后一个子孩子的li标签jQuery表单选择器
针对表单元素设置的选择器
注意：
表单元素的过滤选择器与前面的基础选择器之间具有空格
且所有的基础选择器都是获取的整个表单普通选择器
:input
获取全部的表单元素
实例
$("form :input")
获取表单的所有子元素
:text
获取表单中全部的单行文本框
<input type="text" />
实例
$("form :text")
:password
获取密码框选择框选择器
:radio
获取全部单选按钮
:checkbox
获取全部复选框按钮选择器
:submit
实例
$("#frmTest input:submit")
注意：
获取提交按钮时,前面要有input
:button
获取全部的<button>状态选择器
:checked
获取如单选框,复选框，下拉列表框等处于该表单下的
选中状态的全部元素
:selected
只获取<select>中处于选中状态的option
实例：
$("#frmTest :selected")点击查看更多内容
22人点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦