jQuery选择器

作者: Java架构师CAT | 来源:发表于2020-01-16 14:14 被阅读0次

jquery选择器书目录
JQUERY一
jQuser有选择器
选择器
jQuery 基础
jQuery
jQuery选择器
JQuery基础知识
jQuery相关知识
jQuery选择器

jQuery的简介

是一个轻量级的JS库-是一个被封装好的JS文件。提供了更为简便的页面元素操作方式；

极大地简化了 JavaScript 编程。

jQuery选择器

选择器是 jQuery 的根基, 在 jQuery 中, 对事件处理, 遍历 DOM 和 Ajax 操作都依赖于选择器。介绍几种常用选择器：

1、基本选择器

基本选择器是 jQuery 中最常用的选择器, 也是最简单的选择器, 它通过元素 id,class 和标签名来查找 DOM 元素(在网页中id 只能使用一次, class 允许重复使用）

举个例子

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> div, span, p { width: 140px; height: 140px; margin: 5px; background: #aaa; border: #000 1px solid; float: left; font-size: 17px; font-family: Verdana; } div.mini { width: 55px; height: 55px; background-color: #aaa; font-size: 12px; } div.hide { display: none; }</style> <script type="text/javascript" src="jquery-1.7.2.js"></script> <script type="text/javascript"> $(function () { $('#btn1').click(function(){ $('#one').css('background', '#ffbbaa'); }); $('#btn2').click(function () { $('.mini').css('background','#ffbbaa'); }); $('#btn3').click(function () { $('div').css('background','#ffbbaa'); }); $('#btn4').click(function () { $('*').css('background','#ffbbaa'); }) $('#btn5').click(function () { $('span,#two').css('background','#ffbbaa'); }) })</script></head><body><input type="button" value="选择 id 为 one 的元素" id="btn1"/><input type="button" value="选择 class 为 mini 的所有元素" id="btn2"/><input type="button" value="选择元素名是 div 的所有元素" id="btn3"/><input type="button" value="选择所有的元素" id="btn4"/><input type="button" value="选择所有的 span 元素和id为two的元素" id="btn5"/><br><br><div class="one" id="one"> id 为 one,class 为 one 的div <div class="mini">class为mini</div></div><div class="one" id="two" title="test"> id为two,class为one,title为test的div <div class="mini" title="other">class为mini,title为other</div> <div class="mini" title="test">class为mini,title为test</div></div><div class="one"> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini"></div></div><div class="one"> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini" title="tesst">class为mini,title为tesst</div></div><div style="display:none;" class="none">style的display为"none"的div</div><div class="hide">class为"hide"的div</div><div> 包含input的type为"hidden"的div<input type="hidden" size="8"></div><span id="span">^^span元素^^</span></body></html>

过滤选择器

过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM 元素, 该选择器都以“:”开头

举个例子

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">Untitled Documentdiv,span,p{width:140px;height:140px;margin:5px;background:#aaa;border:#0001pxsolid;float: left;font-size:17px;font-family: Verdana; }div.mini{width:55px;height:55px;background-color:#aaa;font-size:12px; }div.hide{display: none; }$(document).ready(function(){functionanmateIt(){$("#mover").slideToggle("slow", anmateIt); } anmateIt();$('#btn1').click(function(){$("div:first").css("background","#ffbbaa"); });$('#btn2').click(function(){$('div:last').css('background','#ffbbaa'); });$('#btn3').click(function(){$('div:not(.one)').css('background','#ffbbaa'); });$('#btn4').click(function(){$('div:even').css('background','#ffbbaa'); });$('#btn5').click(function(){$('div:odd').css('background','#ffbbaa'); });$('#btn6').click(function(){$('div:gt(3)').css('background','#ffbbaa'); });$('#btn7').click(function(){$('div:eq(3)').css('background','#ffbbaa'); });$('#btn8').click(function(){$('div:lt(3)').css('background','#ffbbaa'); });$('#btn9').click(function(){$(':header').css('background','#ffbbaa'); });$('#btn10').click(function(){$(':animated').css('background','#ffbbaa'); });$('#btn11').click(function(){$('#two').nextAll('span:first').css('background','#ffbbaa'); }); })

基本选择器.

id 为 one,class 为 one 的divclass为mini id为two,class为one,title为test的divclass为mini,title为otherclass为mini,title为testclass为miniclass为miniclass为miniclass为miniclass为miniclass为miniclass为mini,title为tesststyle的display为"none"的divclass为"hide"的div包含input的type为"hidden"的div^^span元素 111^^^^span元素 222^^正在执行动画的div元素.

内容过滤选择器：

内容过滤选择器的过滤规则主要体现在它所包含的子元素和文本内容上

//改变含有文本 ‘di’ 的 div 元素的背景色为 # bbffaa//改变不包含子元素(或者文本元素) 的 div 空元素的背景色为 # bbffaa//改变含有 class 为 mini 元素的 div 元素的背景色为 # bbffaa//改变含有子元素(或者文本元素)的div元素的背景色为 # bbffaa$(document).ready(function(){$('#btn1').click(function(){$("div:contains('di')").css('background','#ffbbaa'); });$('#btn2').click(function(){$('div:empty').css('background','#ffbbaa'); });$('#btn3').click(function(){$('div:has(.mini)').css('background','#ffbbaa'); });$('#btn4').click(function(){$("div:parent").css("background","#ffbbaa");// $('div:not(empty)').css('background','#ffbbaa'); }) })

可见性过滤选择器

可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素

$(document).ready(function(){$('#btn1').click(function(){$('div:visible').css('background','#ffbbaa'); });$('#btn2').click(function(){$('div:hidden').show(2000).css('background','#ffbbaa'); });$('#btn3').click(function(){alert($("input:hidden").val()); }) })

属性过滤选择器

属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素

$(document).ready(function(){$('#btn1').click(function(){$('div[title]').css('background','#ffbbaa'); });$('#btn2').click(function(){$("div[title='test']").css('background','#ffbbaa'); });$('#btn3').click(function(){$("div[title!='test']").css('background','#ffbbaa'); });$('#btn4').click(function(){$("div[title^='te']").css('background','#ffbbaa'); });$('#btn5').click(function(){$("div[title$='est']").css('background','#ffbbaa'); });$('#btn6').click(function(){$("div[title*='es']").css('background','#ffbbaa'); });$('#btn7').click(function(){$("div[id][title*='es']").css('background','#ffbbaa'); });$('#btn8').click(function(){$("div[title][title!='test']").css('background','#ffbbaa'); }); })

表单对象过滤选择器

$(function(){$('#btn1').click(function(){$(':text:enabled').val('刘德华'); });$('#btn2').click(function(){$(':text:disabled').val('张学友'); });$('#btn3').click(function(){varnum= $(":checkbox[name='newsletter']:checked").length; alert(num); });$('#btn4').click(function(){$(":checkbox[name='newsletter']:checked").each(function(){alert(this.value); }); });$('#btn5').click(function(){$('select :selected').each(function(){alert(this.value); }); }); }) 对表单内可用input 赋值操作.

获取多选框选中的个数.获取多选框选中的内容.

获取下拉框选中的内容.