jQuery代码基本结构：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
</head>
<body>
<script src="static/js/jquery-3.4.1.js"></script>
<script>
// 代码的基本架构: html文档准备就绪之后,就立即执行ready中的回调函数中的代码
$(document).ready(function () {
//……
});
//简化：
$(function () {
//……
})
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
jQuery常用选择器简介
1 基本选择器
#id: ID选择器
element: 元素/标签选择器
.class: 类/class选择器
*: 通配选择器
selector1,selector2,selectorN: 群组选择器
2 层级选择器
ancestor descendant: 后代选择器, 中间用空格分隔
parent > child: 子选择器
prev + next: 相邻下一个兄弟元素
prev ~ siblings: 相邻后面的所有兄弟元素
3 基本筛选器
:first: 获取第一个元素
:not(selector): 从集合中去掉指定的元素
:even: 匹配集合中索引为偶数的元素(从0开始)
:odd: 匹配集合中索引为奇数的元素(从0开始)
:eq(index): 匹配指定索引的元素
:gt(index): 匹配所有大于指定索引的元素
:lang: 匹配指定语言的元素
:last: 匹配最后一个元素
:lt(index): 匹配所有小于指定索引的元素
:header: 匹配类似<h1>,<h2>,<h3>...标题元素
:animated: 匹配所有正在执行动画的元素
:focus: 匹配当前获取焦点的元素
:root: 获取当前文档根元素,html文档永远是<html>
4 内容筛选器
:contains(text): 返回包含指定文本的元素
:empty: 返回不包含任何子元素或文本的元素
:has(selector): 返回包含有指定元素(由选择器设置)的元素
:parent: 匹配含有子元素或文本的元素(非空元素)
5 可见性选择器
:hidden: 获取所有不见的元素或type="hidden"的元素
:visible: 匹配所有可见元素
6 属性选择器
[attribute]: 匹配包含指定属性的元素,如$('p[id]')
[attribute=value]: 匹配属性等于指定值的元素,$('p[id="news"]')
[attribute!=value]:匹配属性不等于指定值的元素,$('p[id!="news"]')
[attribute^=value]: 匹配属性以指定文本开始的元素,$('p[id^="pre"]')
[attribute$=value]: 匹配属性以指定文本结束的元素,$('p[id$="pre"]')
[attribute*=value]: 匹配属性包含指定文本的元素,$('p[id*="pre"]')
[attrSel1][attrSel2][attrSelN]:匹配同时满足多个属性选择器的元素,是前面的复合
7 子元素选择器
:first-child: 匹配指定元素的第一个子元素, 如$('ul :first-child')
注: 与:first不同, 可能会匹配到多个父级的第一个子元素,类似:nth-child(1)
:first-of-type: 与上面的类似,但多个元素的类型限制,$('div p:first-of-type')
:last-child: 匹配指定元素的最后一个子元素, 如$('ul :last-child')
:last-of-type:与上面的类似,但多个元素的类型限制,$('div p:last-of-type')
:nth-child(): 匹配父元素下指定索引的元素(从1开始),$('ul :nth-child(2)')
:nth-last-child(): 匹配父元素下倒数索引的元素, $('ul :nth-last-child(3)')
:nth-last-of-type(): 与前一个相比,多了元素类型限制
:nth-of-type(): 功能与:nth-child()类似,但多了元素类型限制,:前加选择器名
:only-child: 匹配父元素下唯一子元素, $('div :only-child')
only-of-type: 匹配父元素下唯一指定类型的子元素,$('div p:only-of-type')
8 表单选择器
8.1 控件类型选择器
选择器名称与控件中的type属性值对应, 如type="text",就用:text表示
:input: 匹配<input>, <textarea>, <select>, <button>元素
:text: 匹配<input type="text">的元素, 即所有单行文本框
:password: 匹配所有密码框元素,<input type="password">
:radio: 匹配所有单选按钮元素,<input type="radio">
:checkbox: 匹配所有复选框元素, <input type="checkbox">
:submit: 匹配提交按钮,因为<button>默认type="submit",所以总会匹配
:image: 匹配所有图像域控件<input type="image">
:reset: 返回重置按钮控件<input type="reset">
:button: 返回所有按钮控件<input type="button">
:file: 返回所有的文件上传域控件<input type="file">
:hidden: 返回隐藏域控制<input type="hidden">
特别提示:
该选择器是jQuery独有,非CSS规范,无法利用原生DOM的性能优势
属于过时的选择器, 推荐使用[type="类型"]替代
如果仍想使用该选择器, 推荐使用.filter(':input/:text...')代替
8.2 控件状态选择器
:enabled: 匹配表单中所有有效的元素(无disabled属性)
:disabled: 匹配所有禁用的元素
:checked: 匹配复选框,单选框中的被选中的元素(具有checked属性的元素)
:selected: 匹配下拉列表中被选中的元素(具有selected属性的元素)
DOM对象与jQuery对象的相互转换
DOM转jQuery: $()
jQuery转DOM: $()[], $().get()
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
</head>
<body>
<!--内容选择器演示-->
<div>
<p>西门大官人</p>
</div>
<div>
<h3>朱老师</h3>
</div>
<div></div>
<!--id class 元素 选择器-->
<div id="big">
<div class="small">
<p>我是p标签</p>
</div>
</div>
<!--子元素选择器演示-->
<ul>
<li>XXXXXX 1 XXXXXX</li>
<li>XXXXXX 2 XXXXXX</li>
<li>XXXXXX 3 XXXXXX</li>
<li>XXXXXX 4 XXXXXX</li>
<li>XXXXXX 5 XXXXXX</li>
<li>XXXXXX 6 XXXXXX</li>
<li>XXXXXX 7 XXXXXX</li>
<li>XXXXXX 8 XXXXXX</li>
</ul>
<!--表单选择器演示-->
<form action="" onsubmit="return false">
<p><label>帐号:<input type="text"></label></p>
<p><label>密码:<input type="password" disabled></label></p>
<p><label>记住<input type="checkbox" ></label></p>
<p>
<label>语言:
<select name="lang">
<option value="cn">中文</option>
<option value="en" selected>英文</option>
<option value="jp">日文</option>
</select>
</label>
</p>
<p><label>备注:<textarea name=""cols="30" rows="10" disabled></textarea></label></p>
<p><button type="submit">提交</button></p>
</form>
<script src="static/js/jquery-3.4.1.js"></script>
<script>
// 代码的基本架构: html文档准备就绪之后,就立即执行ready中的回调函数中的代码
// $(document).ready(function () {
// //……
// });
//简化：
$(function () {
//测试是否成功导入了jQuery
// console.log($);
//选择包含有h3元素的div
$('div:has(h3)').css('color','red');
//返回以div为父元素的元素
// console.log($('div:parent'));
//:input选中的是input,select,textarea,button
$(':input').css('background-color','pink');
//检查下复选框的背景颜色，也是粉色pink
// console.log($(':checkbox').css('background-color'));
//:disabled 选择禁用的
// $(':disabled').css('background-color','green');
//只选择textarea为禁用的
$('textarea:disabled').css('background-color','green');
//复选框添加属性checked
$('input[type=checkbox]').attr('checked',true);
//id class 元素 选择器
$('#big').css({
'width':'200px',
'height':'200px',
'border':'1px solid black'
});
$('.small').css({
'width':'100px',
'height':'100px',
'border':'1px solid black'
});
$('.small p').css('color','red');
//子元素选择器
$('ul :first-child').css('color','green');
$('ul :last-child').css('font-size','20px');
$('li:nth-of-type(1)').css('background-color','red');
$('ul :nth-child(2)').css('background-color','orange');
// DOM对象与jQuery对象的相互转换
// DOM转jQuery: $()
// jQuery转DOM: $()[], $().get()
var lis=$('li');
console.log(lis);//jQuery对象
console.log(lis[2]);//DOM对象
console.log(lis.get());//DOM对象
console.log($(lis));//jQuery对象
})
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
