作为一个后端程序员，也是要和前端页面打交道的。最常见的场景莫过DOM元素操作和前端页面使用AJAX向服务器发送请求。
实现上述两个功能当然可以使用原生js来完成，但在实际开发过程中很少这样做，通常会使用一些别人封装好的js库来辅助我们的工作，jQuery就是这些辅助库中的一员。
常用选择器
| 选择器 |
说明 |
| element |
$('标签名')，$('a')选取页面上的所有a标签，返回类型是DOM元素数组 |
| class |
$('.类名')，$('.cls')选取页面上class属性为cls的标签，返回类型是DOM元素数组 |
| id |
$('#value')，选取页面上id=value的标签 |
|
$('[name]')，选取带有name属性的标签，返回类型是DOM元素数组 |
|
$('[name="tag"]')，选取name=tag的标签，返回类型是DOM元素数组 |
| attribute |
$('[name!="tag"]')，选取name不等于tag的标签，返回类型是DOM元素数组 |
|
$('[href=".jpg"]')，选取所有href属性值以 ".jpg" 结尾的标签，返回类型是DOM元素数组 |
| : |
说明 |
| :hidden |
$("label:hidden")，所有隐藏的label元素，返回类型是DOM元素数组 |
| :visible |
$("lable:visible")，所有可见的label元素，返回类型是DOM元素数组 |
| :first |
$("p:first")，选择页面上的第一个p元素 |
| :last |
$("p:last")，选择页面上的最后一个p元素 |
| :even |
$("tr:even")，选取页面上索引为偶数的tr元素，返回类型是DOM元素数组 |
| :odd |
$("tr:odd")，选取页面上索引为奇数的tr元素，返回类型是DOM元素数组 |
| :not() |
$("input:not(:empty)")，所有不为空的 input 元素 |
| input |
说明 |
| :input |
选取页面上的所有input元素，返回类型是DOM元素数组 |
| :type |
$(":text")等价于$('input[type=text]')，选取页面中所有type="text"的input元素。input常用type值有text,radio,checkbox,text,submit,password等。 |
选择器的综合使用
//操作多种标签
$('p,div,input').attr('name','multi');
// 一个标签使用多个样式类
<div class='main-title ng-binding ng-scope'></div>
$('.main-title.ng-binding.ng-scope');
//选取被选中的radiobutton
$(':radio[name=""]:checked');
或
$(':radio:checked');//选取页面上所有被选中的radiobutton
//选取class属性值是style的p标签
$('p.style');
//选取div所有子元素中的p标签
$('div p');
或
$('div>p').;
//获取值是★的td标签
$('td:contains("★")')
//选择id='table'的标签中的第一个tr标签
$('#table tr:first');
//选取id='table'标签中的索引为奇数且没有使用类名为'last'的所有tr标签
//且为选择的元素添加even类
$('#table tr:odd:not(.last)').addClass('even');
//对id='table'标签中的索引大于0小于3的所有tr标签使用类名为'three'的样式
$('#table tr:gt(0):lt(3)').addClass('three');
//表单
$("#form1 :enabled");//选取id为form1的表单内所有启用的元素
$("#form1:enabled");//选取id为form1的已启用的表单，注意这里#form1和:enabled之间没有空格，有空格表示选取子元素
$("#form1 :disabled");//选取id为form1的表单内所有禁用的元素
常用方法
jQuery的方法只有jQuery对象才可以调用，DOM对象不能调用。
//DOM转jQuery
var win=$(window);//将window转换为jQuery对象
//jQuery对象win转DOM对象
win.get[0];
//或
win[0];
| 样式属性 |
说明 |
| attr() |
$('#key').attr('id'),获取id属性值;$('#key').attr('name','tag'),设置name属性值为tag,$('#key').attr('id',''),将id属性值设为默认值 |
| removeAttr |
删除属性，删除的属性不再占用内存资源，在源代码中看不到 |
| css() |
$('#key').css('color','red')，设置id=key的标签文本颜色为红色 |
| addClass('className') |
给元素添加样式 |
| removeClass('className') |
移除样式 |
| toggleClass('className') |
启用或关闭样式 |
| 内容操作 |
说明 |
| text() |
针对非input使用，text()获取元素中的文本，text('str')设置元素文本为str |
| html() |
和text类似，不同之处是html()可以使用html样式，$('p').html('<b>p</b>'),p标签上显示粗体字母p |
| val() |
针对input使用，val()获取元素中的value属性值，value('str')设置元素value属性值为str |
| load() |
发送AJAX请求，重新获取标签要呈现的内容$('#lessonList').empty().load('/Lesson/UnionSearch/conditions?' + conditions); |
| 元素操作 |
说明 |
| hide() |
隐藏元素 |
| show() |
显示元素 |
$('<p id="pTag"></p>') |
创建p元素 |
| append() |
向元素末尾添加子元素 |
| appendTo() |
将元素添加到指定的元素末尾 |
| children('selector') |
获取标签的所有子元素（不包括子元素的子元素），selector表示选择器,可省略 |
| find('selector') |
根据selector获取元素的所有子元素（包括子元素的子元素），selector不可省略 |
| each() |
遍历元素数组,例：$('p').each(function(){$(this).text('p');}); |
结语
以上这些是我在开发过程常用到的一些选择器和方法，在此做个总结以备后续查询使用。
最后说一点，同一个jQuery方法，可能会因为jQuery版本的不同而产生不同的效果。
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
