01.JQuery的基础和选择器

作者: yangsg | 来源:发表于2019-05-07 11:25 被阅读0次

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情，JQuery兼容各种主流浏览器。
JQuery的官网：https://jquery.com/
提供压缩版和非压缩版的下载

jquery-x.x.x.min.js (压缩版) 使用压缩版可以节省客户端下载资源的带宽
jquery-x.x.x.js (非压缩版)源码带有格式，阅读相对容易

从使用效果角度来看，两者是没有区别的

1. 在网页中引入JQuery

下载JQuery文件并放入工程目录中
在HTML文件中通过<script>将JQuery的js文件引入页面
js文件的加载顺序是由上到下的，由于很多第三方js或者自己编写的js可能会使用JQuery的语法，需要将JQuery文件的引入放在最上面

2. JQuery对象和原生对象的比较

2.1 原生对象和JQuery的属性和方法调用

原生对象

var a = document.getElementById("t1"); //原生JS对象

JQuery对象

var a = $("#t1");  //JQuery对象

使用JQuery对象不能调用原生对象属性和方法
使用原生对象不能调用JQuery对象属性和方法

2.2 原生对象和JQuery对象之间的转换

原生 -> JQuery

var a = document.getElementById("t1"); //原生JS对象
var b = $(a);  //JQuery对象

JQuery -> 原生

var a =  $("#t1"); //JQuery对象
var b = a.get(0);  //原生JS对象

如果是数组

var a =  $("input"); //JQuery对象（多个）
var b = new Array();
for(var i = 0; i < a.length; i++){
    b[i] = a.get(i);
}

虽然不同的对象之间不能调用对方属性和方法，但是JQuery语法可以在同一个HTML文件中与原生语法一起存在

3. JQuery选择器

JQuery的选择器是基于CSS选择器实现的

3.1 核心选择器

ID选择器
HTML 代码:

<div id="notMe"><p>id="notMe"</p></div>
<div id="myDiv">id="myDiv"</div>

代码:

$("#myDiv");

结果:

[ <div id="myDiv">id="myDiv"</div> ]

类选择器
HTML 代码:

<div class="notMe">div class="notMe"</div>
<div class="myClass">div class="myClass"</div>
<span class="myClass">span class="myClass"</span>

代码:

$(".myClass");

结果:

[ <div class="myClass">div class="myClass"</div>, 
<span class="myClass">span class="myClass"</span> ]

元素选择器
HTML 代码:

<div>DIV1</div>
<div>DIV2</div>
<span>SPAN</span>jQuery

代码:

$("div");

结果:

[ <div>DIV1</div>, <div>DIV2</div> ]

3.2 组合选择器

并列选择器
使用“，”分隔不同的选择器，得到多个选择器结果的并集
HTML 代码:

<div>div</div>
<p class="myClass">p class="myClass"</p>
<span>span</span>
<p class="notMyClass">p class="notMyClass"</p>

jQuery 代码:

$("div,span,.myClass")

结果:

[ <div>div</div>, <span>span</span>, <p class="myClass">p class="myClass"</p> ]

后代选择器
使用空格分隔不同的选择，相当于在第一选择器的标记的内部去匹配第二个选择器
HTML 代码:

<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />

jQuery 代码:

$("form input")

结果:

[ <input name="name" />, <input name="newsletter" /> ]

子代选择器
使用“>”分隔不同的选择，相当于在第一选择器的标记的直接子代位置去匹配第二个选择器
HTML 代码:

<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />

jQuery 代码:

$("form > input")

结果:

[ <input name="name" /> ]

紧随选择器
使用“+”分隔不同的选择，匹配紧随第一个选择器标记的第二个选择器

<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />

jQuery 代码:

$("label + input")

结果:

[ <input name="name" />, <input name="newsletter" /> ]

跟随选择器
使用“~”分隔不同的选择，匹配在第一个选择器标记之后的所有第二个选择器

<input name="none3" />
<form>
    <label>Name:</label>
    <input name="name" />
    <fieldset>
        <label>Newsletter:</label>
        <input name="newsletter" />
    </fieldset>
</form>
<a href="#">aaa</a>
<input name="none1" />
<a href="#">bbb</a>
<input name="none2" />

jQuery 代码:

$("form ~ input")

结果:

[ <input name="none1" />, <input name="none2" /> ]

3.3 下标选择器

HTML代码

<table border="1" width="800">
    <tr><td></td><td></td></tr>
    <tr><td></td><td></td></tr>
    <tr><td></td><td></td></tr>
    <tr><td></td><td></td></tr>
    <tr><td></td><td></td></tr>
    <tr><td></td><td></td></tr>
    <tr><td></td><td></td></tr>
    <tr><td></td><td></td></tr>
    <tr><td></td><td></td></tr> 
</table>

首尾元素(:first和:last)
为首行和尾行设置背景颜色为“aquamarine”

$("tr:first").css("background-color","aquamarine");
$("tr:last").css("background-color","aquamarine");

奇偶元素(:odd和:even)
为下标偶数行设置背景颜色为“chartreuse”，下标奇数行设置背景颜色为“coral”

$("tr:even").css("background-color","chartreuse");
$("tr:odd").css("background-color","coral");

等于某个下标(:eq(n))
为下标第3行（实际第4行）设置背景颜色为“blue”

$("tr:eq(3)").css("background-color","blue");

大于某个下标(:gt(n))
为下标大于3的行设置背景颜色为“chartreuse”

$("tr:gt(3)").css("background-color","chartreuse");

小于某个下标(:lt(n))
为下标小于3的行设置背景颜色为“coral”

$("tr:lt(3)").css("background-color","coral");

3.4 属性选择器

包含某个属性: [attribute]
HTML代码

<div id="div1"></div>
<div></div>
<div id="div3"></div>
<div id="div4"></div>

jQuery 代码:

var j = $("div[id]");
alert(j.length);

结果:

[ <div id="div1"></div>, <div id="div3"></div>,<div id="div4"></div> ]

某个属性的值是value: [attribute=value]
HTML代码

<input type="text" /><br>
<input type="password" id="p1" /><br>
<input type="password" id="p2"/><br>
<input type="button" value="测试"/><br>

jQuery 代码:

var x = $("input[type=password]");
alert("password标记个数："+x.length);

结果:

[ <input type="password" id="p1" />, <input type="password"  id="p2"/> ]

某个属性的值不是value: [attribute!=value]
HTML代码

<input type="text" /><br>
<input type="password" id="p1" /><br>
<input type="password" id="p2"/><br>
<input type="button" value="测试"/><br>

jQuery 代码:

var x = $("input[type!=password]");
alert("password标记个数："+x.length);

结果:

[ <input type="text"/>, <input type="button"/> ]

某个属性的包含值是value

[attribute^=value] 以value开头
[attribute$=value] 以value结尾
[attribute*=value] 包含value
HTML代码

<input type="checkbox" name="cone"/>1<br>
<input type="checkbox" name="ctwo"/>2<br>
<input type="checkbox" name="cthree"/>3<br>
<input type="checkbox" name="cfour"/>4<br>
<input type="checkbox" name="xall"/>all<br>

jQuery 代码:

var m = $("input[type=checkbox][name^=c]");
alert("名字以c开头的checkbox标记个数："+m.length);

var n = $("input[type=checkbox][name$=e]");
alert("名字以e结尾的checkbox标记个数："+n.length);

var p = $("input[type=checkbox][name*=o]");
alert("名字中包含o的checkbox标记个数："+p.length);

结果:

m = 4; [<input type="checkbox" name="cone"/>,<input type="checkbox" name="ctwo"/>,<input type="checkbox" name="cthree"/>,<input type="checkbox" name="cfour"/>]
n = 2;  [<input type="checkbox" name="cone"/>,<input type="checkbox" name="cthree"/>]
p = 3; [<input type="checkbox" name="cone"/>,<input type="checkbox" name="ctwo"/>,<input type="checkbox" name="cfour"/>]

3.5 状态选择器

显示状态(:visible和:hidden)
内容为空(:empty)
HTML代码

<div>1</div>
<div style="display: none;">2</div>
<div>3</div>
<div style="display: none;"></div>
<div>5</div>
<div></div>

jQuery 代码:

var d1 = $("div:visible");
var d2 = $("div:hidden");
var d3 = $("div:empty");

alert("可见的div数量:"+d1.length);
alert("不可见的div数量:"+d2.length);
alert("内容为空的div数量:"+d3.length);

结果:

d1 = 4;[<div>1</div>,<div>3</div>,<div>5</div>,<div></div> ]
d2 = 2;[<div style="display: none;">2</div>,<div style="display: none;"></div> ]
d3 = 2;[<div style="display: none;"></div>,<div></div> ]

选中状态(:checked和:selected)
HTML代码

<input type="checkbox" name="h1" />1
<input type="checkbox" name="h1" />2
<input type="checkbox" name="h1" />3
<input type="checkbox" name="h1" />4
<input type="button" value="测试" onclick="test1();">
<br>
<select name="s1">
    <option value="-1">-1</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
<input type="button" value="测试" onclick="test2();">

jQuery 代码:

function test1(){
    var h1 = $("input[name=h1]");
    var hc = $("input[name=h1]:checked");
    alert("h1的总数:"+h1.length);
    alert("h1的选中数:"+hc.length);
}

function test2(){
    var s1 = $("select[name=s1] > option");
    var s2 = $("select[name=s1] > option:selected");
    alert("下拉列表选项总数:"+s1.length);
    alert("下拉列表选中项value:"+s2.val());
    alert("下拉列表选中项value:"+$("select[name=s1]").val());
}

结果:

h1总数：4
h1选中数：实际情况
下拉列表选项总数：4
选中项value：实际情况
选中项value：实际情况

启用状态(:enabled和:disabled)
禁用状态disabled与readonly不同，readonly状态最终会被提交给服务器，而disabled的数据不会提交给服务器

HTML代码

<input type="text" value="123"/><br>
<input type="text" readonly value="123"/><br>
<input type="text" disabled value="123"/><br>

jQuery 代码:

var t = $("input[type=text]");
var x = $("input[type=text]:enabled");
var y = $("input[type=text]:disabled");

alert("text总数:"+t.length);
alert("启用text总数:"+x.length);
alert("禁用text总数:"+y.length);

结果:

text总数：3 
启用text：2 [<input type="text" value="123"/>,<input type="text" readonly value="123"/>]
禁用text：1 [<input type="text" disabled value="123"/>]

焦点状态(:focus)
当点击某个按钮时，该按钮会获得焦点。

<input type="button" value="测试1" onclick="test1();">
<input type="button" value="测试2" onclick="test1();">
<input type="button" value="测试3" onclick="test1();">

jQuery 代码:

function test1(){
    var x = $("input[type=button]:focus");
    alert(x.val());
}

结果:点击哪个按钮，显示哪个按钮上的value

3.6 表单选择器

表单选择器	相当于	内容
$(":input")	$("input,textarea,select,button")	匹配所有的表单元素
$(":text")	$("input[type=text]")	文本框
$(":password")	$("input[type=password]")	密码框
$(":radio")	$("input[type=radio]")	单选按钮
$(":checkbox")	$("input[type=checkbox]")	多选按钮
$(":submit")	$("input[type=submit]")	提交按钮
$(":reset")	$("input[type=reset]")	重置按钮
$(":button")	$("input[type=button], button")	普通按钮
$(":file")	$("input[type=file]")	文件域
$(":hidden")	$("input[type=hidden]")	隐藏域

01.JQuery的基础和选择器

1. 在网页中引入JQuery

2. JQuery对象和原生对象的比较

2.1 原生对象和JQuery的属性和方法调用

2.2 原生对象和JQuery对象之间的转换

3. JQuery选择器

3.1 核心选择器

3.2 组合选择器

3.3 下标选择器

3.4 属性选择器

3.5 状态选择器

3.6 表单选择器

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读