jQuery基本概念:
1、jQuery是包装 js dom 的函数库 ,是 js的封装的一个框架, 把js的大量语法进行封装。
2、引入jquery库 (js文件)后window多了两个属性:window
.jQuery 和 window
.$ 且两个值相同 window
.jQuery= window
.$ =jQuery
3、jQuery 在库里面是个函数 函数执行返回的是一个实例对象
4、jQuery 对象内部包含的是dom元素对象的伪数组(可能只有一个元素)那就有length、index、each()等属性和方法, 但没有数组特别的方法:forEach()、pop()、push()、splice()等。
jQuery的几种选择器:
1、基本选择器:
种类 | 用法 |
---|
id | console.log($("#btn")); |
class | console.log($(".btn")); |
元素 | console.log($(“button”)); |
* | console.log($("*"));//获取所有的元素 |
复合元素选取 | console.log($(“button,input”)); |
<div id="div1" class="box">div1</div>
<div id="div2" class="box">div2</div>
<div id="div3" >div3</div>
<span class="box">span</span>
<script type="text/javascript" src="./jquery/jquery.js"></script>
<script type="text/javascript">
$('#div1').css('background','red');
$('#div2').css({
'background':'green',
'color':'yellow',
})
$('.box').css('background','pink');
$('div,span').css('background','blue');
$('div.box').css('background','red');
</script>
2、层次选择器:
种类 | 用法 |
---|
父元素下的所有XX元素 | $(‘ul span’) |
父元素下的所有子元素XX | $(‘ul>span’) |
下一个子元素 | $(".li2+li") |
获取当前匹配元素之后的所有 | $(".li2~li") |
<ul>
<li>11</li>
<li title="hello">22</li>
<li class="box">33</li>
<li title="hello"><span>44</span></li>
<span>55</span>
</ul>
<script type="text/javascript" src="./jquery/jquery.js"></script>
<script type="text/javascript">
$('ul span').css('background','yellow');
$('ul>span').css('background','green');
$('ul .box~ *').css('background','red');
</script>
3、基本筛选器:
种类 | 用法 |
---|
| $(“ul.menu>li:first”) |
| $(“ul.menu>li:last”) |
– | $(“ul.menu>li:not(.li2)”) |
偶数获取 | $(“ul.menu>li:even”) |
奇数获取 | $(“ul.menu>li:odd”) |
按照索引来获取 | $(“ul.menu>li:eq(2)”) |
获取大于索引 | $(“ul.menu>li:gt(2)”) |
获取所有的h标签 | $(":header") |
获取获得焦点的元素 | $(“input:focus”) |
直接获取html | $(":root") |
4、内容选择器:
种类 | 用法 |
---|
包含某个内容 | $(“div:contains(‘今’)”) |
直接获取空元素 | $(“div:empty”) |
匹配包含某个元素的父元素 | $(“ul:has(.li2)”) |
匹配的元素必须是父元素 | $(“div:parent”) |
根据元素的显示隐藏来匹配元素 | $(“button:visible”) $(“button:hidden”) |
根据元素的属性来匹配元素 | $(“button[id]”) $(“button[id][class]”) $(“button[id=‘btn’]”) $(“button[id=‘btn’][class=‘btn’]”) $(“button[id!=‘btn’]”) $(“button[id!=‘btn’][class!=‘btn’]”) |
获取的属性值以什么开头 | $(“button[id^=‘b’]”) |
获取的属性值以什么结尾 | $(“button[id $=‘n’]”) |
获取的属性值包含什么 | $(“button[id*=‘n’]”) |
5、过滤选择器:
种类 | 用法 |
---|
匹配第一个子元素 | $(“ul>li:first-child”) |
匹配最后一个子元素 | $(“ul>li:last-child”) |
匹配父元素 里面元素的第一个 | $(“ul>li:first-of-type”) |
匹配父元素 里面元素的最后一个 | $(“ul>li:last-of-type”) |
括号里面写的是序号 1·开始 | $(“ul>li:nth-child(2)”) |
括号里面写的是序号 1·开始 后往前 | $(“ul>li:nth-last-child(2)”) |
后往前 按类型获取标签里面的最后一个 | $(“ul>:nth-last-of-type(1)”) |
前往后 按类型获取标签里面的第一个 | $(“ul>:nth-of-type(1)”) |
匹配的元素必须是父元素的唯一子元素 | $(“ul:only-child”) |
获取父元素里面同类型标签里面只有唯一的一个标签 全部获取到 | $(“ul>p:only-of-type”) |
6、表单元素选择器:
匹配所有 input, textarea, select 和 button 元素 | $(":input") |
---|
获取单行文本框的 | $(":text") |
获取密码框的 | $(":password") |
获取单选按钮的 | $(":radio") |
获取复选框的 | $(":checked") |
获取表单提交的 | $(":submit") |
获取重置按钮 | $(":reset") |
获取CheckBox radio 被选择的元素 | $(“input:checked”) |
匹配被选择的下拉的option | $(“select option:selected”) |