1. jQuery语法
1.1. jQuery语法是为html元素的选取编制的, 可以对元素执行某些操作。
1.2. 基础语法是: $(selector).action()
1.2.1. 美元符号定义jQuery。
1.2.2. 选择符(selector)"查询"和"查找"html元素。
1.2.3. jQuery的action()执行对元素的操作。
1.3. 示例
$(this).hide() // 隐藏当前元素
$("p").hide() // 隐藏所有段落
$(".test").hide() // 隐藏所有class="test"的所有元素
$("#test").hide() // 隐藏所有id="test"的元素2. 文档就绪函数
2.1. jQuery函数位于一个document ready函数中:
$(document).ready(function(){
--- jQuery functions go here ----
});2.2. 这是为了防止文档在完全加载(就绪)之前运行jQuery代码。
2.3. 如果在文档没有完全加载之前就运行函数, 操作可能失败。下面是两个具体的例子:
2.3.1. 试图隐藏一个不存在的元素。
2.3.2. 获得未完全加载的图像的大小。
3. jQuery选择器
3.1. 选择器允许您对元素组或单个元素进行操作。
3.2. jQuery选择器
4. jQuery元素选择器
4.1. jQuery使用CSS选择器来选取html元素。
4.1.1. $("p")选取<p>元素。
4.1.2. $("p.intro")选取所有class="intro"的<p>元素。
4.1.3. $("p#demo")选取id="demo"的<p>元素。
5. jQuery属性选择器
5.1. jQuery使用XPath表达式来选择带有给定属性的元素。
5.1.1. $("[href]")选取所有带有href属性的元素。
5.1.2. $("[href='#']")选取所有带有href值等于"#"的元素。
5.1.3. $("[href!='#']")选取所有带有href值不等于"#"的元素。
5.1.4. $("[href$='.jpg']")选取所有href值以".jpg"结尾的元素。
6. jQuery CSS选择器
6.1. jQuery CSS选择器可用于改变html元素的CSS属性。
6.2. 下面的例子把所有p元素的背景颜色更改为红色:
$("p").css("background-color","red");7. jQuery事件
7.1. jQuery是为事件处理特别设计的。
7.2. jQuery事件
8. jQuery事件函数
8.1. 事件处理程序指的是当html中发生某些事件时所调用的方法。术语由事件"触发"(或"激发")经常会被使用。
8.2. jQuery事件处理方法是jQuery中的核心函数。
8.3. jQuery事件方法会触发匹配元素的事件, 或将函数绑定到所有匹配元素的某个事件。
9. jQuery名称冲突
9.1. jQuery使用$符号作为jQuery的简介方式。
9.2. 某些其他JavaScript库中的函数(比如: Prototype)同样使用$符号。
9.3. jQuery使用名为noConflict()的方法来解决该问题。
var jq = jQuery.noConflict(); // 帮助您使用自己的名称jq来代替$符号。10. 总结
10.1. 由于jQuery是为处理html事件而特别设计的, 那么当您遵循以下原则时, 您的代码会更恰当且更易维护:
- 把所有jQuery代码置于事件处理函数中
- 把所有事件处理函数置于文档就绪事件处理器中
- 把jQuery代码置于单独的.js文件中
- 如果存在名称冲突, 则重命名jQuery库
11. 例子
11.1. 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery选择器</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// 元素选择器
$('th').css('width', '200px');
$('td').css('width', '200px');
// 分组选择器
$('table, td, th').css('border', '1px solid black');
// first和last伪类选择器
$('tr:first').css('color', 'red');
$('tr:last').css('color', 'pink');
// 奇偶伪类选择器, jQuery奇偶是从0开始的
$('tr:odd').css('background-color', 'green');
$('tr:even').css('background-color', 'yellow');
// 下标从0开始, tr:eq(3)下标为3的tr, tr:gt(3)下标大于3的tr, tr:lt(3)下标小于3的tr
$('tr:eq(3)').css('height', '100px');
$('tr:gt(3)').css('height', '60px');
$('tr:lt(3)').css('height', '40px');
// not和empty伪类选择器
$('td:not(:empty)').css('font-size', '24px');
// 标题伪类选择器
$(':header').css('text-decoration', 'line-through');
// 属性选择器, [attribute!=value]看起来有问题
$('[href]').css('text-decoration', 'none');
$('[href="https://www.baidu.com"]').css('color', 'red');
// $('[href!="https://www.baidu.com"]').css('color', 'green');
$('[href$="cn"]').css('font-size', '24px');
// input伪类选择器
var inputArr = $(':input').toArray();
// jQuery里面不能使用let关键字
for(var item in inputArr){
// id选择器
$("#formP").append(inputArr[item].name + " ");
}
// text伪类选择器
var textArr = $(':text').toArray();
for(var item in textArr){
// class选择器
$(".inputText").append(textArr[item].name + " ");
}
// password伪类选择器
var passwordArr = $(':password').toArray();
for(var item in passwordArr){
$(".input.password").append(passwordArr[item].name + " ");
}
// radio伪类选择器
var radioArr = $(':radio').toArray();
for(var item in radioArr){
$("#formRadio").append(radioArr[item].value + " ");
}
// checkbox伪类选择器
var checkboxArr = $(':checkbox').toArray();
for(var item in checkboxArr){
$("#formCheckbox").append(checkboxArr[item].value + " ");
}
// submit伪类选择器
var submitArr = $(':submit').toArray();
for(var item in submitArr){
$("#formSubmit").append(submitArr[item].name + " ");
}
// reset伪类选择器
var resetArr = $(':reset').toArray();
for(var item in resetArr){
$("#formReset").append(resetArr[item].name + " ");
}
// button伪类选择器
var buttonArr = $(':button').toArray();
for(var item in buttonArr){
$("#formButton").append(buttonArr[item].name + " ");
}
// image伪类选择器
var imageArr = $(':image').toArray();
for(var item in imageArr){
$("#formImage").append(imageArr[item].name + " ");
}
// file伪类选择器
var fileArr = $(':file').toArray();
for(var item in fileArr){
$("#formFile").append(fileArr[item].name + " ");
}
// enabled伪类选择器
var enabledArr = $(':enabled').toArray();
for(var item in enabledArr){
var obj = enabledArr[item];
var nodeName = obj.nodeName.toLowerCase();
nodeName === "option" ? $("#formEnabled").append(obj.value + " ") : $("#formEnabled").append(obj.name + " ");
}
// disabled伪类选择器
var disabledArr = $(':disabled').toArray();
for(var item in disabledArr){
$("#formDisabled").append(disabledArr[item].name + " ");
}
// selected伪类选择器
var selectedArr = $(':selected').toArray();
for(var item in selectedArr){
$("#formSelected").append(selectedArr[item].value + " ");
}
// checked伪类选择器
var checkedArr = $(':checked').toArray();
for(var item in checkedArr){
$("#formChecked").append(checkedArr[item].value + " ");
}
// hidden伪类选择器, 不显示的元素display: none;
var hiddenArr = $('p:hidden').toArray();
for(var item in hiddenArr){
$("#hiddenP").append(hiddenArr[item].id + " ");
}
// visible伪类选择器, 显示的元素display不为none;
var visibleArr = $('p:visible').toArray();
for(var item in visibleArr){
var obj = visibleArr[item];
obj.id === "" ? $("#visibleP").append(obj.className + " ") : $("#visibleP").append(obj.id + " ");
}
});
</script>
</head>
<body>
<div style="float: left;">
<table>
<tr><th>头部1</th><th>头部2</th></tr>
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
<tr><td>5</td><td>6</td></tr>
<tr><td>7</td><td>8</td></tr>
<tr><td>9</td><td></td></tr>
</table>
</div>
<div style="float: left; margin-left: 100px;">
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
</div>
<div style="clear: left;">
<a href="https://www.baidu.com">百度</a>
<a href="">csdn</a>
<a href="https://www.w3school.com.cn">w3school</a>
</div>
<p id="formP"></p>
<p class="inputText"></p>
<p class="input password"></p>
<p id="formRadio"></p>
<p id="formCheckbox"></p>
<p id="formSubmit"></p>
<p id="formReset"></p>
<p id="formButton"></p>
<p id="formImage"></p>
<p id="formFile"></p>
<p id="formEnabled"></p>
<p id="formDisabled"></p>
<p id="formSelected"></p>
<p id="formChecked"></p>
<p id="hiddenP"></p>
<p id="displayNone" style="display: none;">我是一个隐藏的P</p>
<p id="visibleP"></p>
<form>
<input type="hidden" name="id" value="1001" />
<input type="text" name="userName" value="zhangsan" disabled="disabled" />
<input type="password" name="pwd" value="123456" />
<input type="file" name="picture" /><br /><br />
男<input type="radio" name="sex" value="男" checked="checked" /> 女<input type="radio" name="sex" value="女" />
旅游<input type="checkbox" name="hobby" value="旅游" checked="checked" /> 听歌<input type="checkbox" name="hobby" value="听歌" />
游泳<input type="checkbox" name="hobby" value="游泳" />
<select name="address">
<option value="洛阳">洛阳</option>
<option value="濮阳">濮阳</option>
<option value="南阳">南阳</option>
<option value="信阳">信阳</option>
<option value="安阳">安阳</option>
<option value="郑州" selected="selected">郑州</option>
</select><br /><br />
<input type="image" name="imageButton" src="submit.png" alt="submit" /> <button name="onlyButton" type="button">我就是一个按钮</button>
<input type="reset" name="resetButton" value="重置" /> <input name="submitButton" type="submit" value="提交" />
</form>
</body>
</html>11.2. 效果图
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
