01.JQuery的基础和选择器
2019-05-07 本文已影响0人
yangsg
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]") | 隐藏域 |
