1500字范文 > jquery选择器（selector）事件处理

jquery选择器（selector）事件处理

时间：2019-12-19 00:34:03

一、选择器（selector）

可以通过选择器获得某个或某些元素对象。通过jQuery函数结合选择器获得某个或某些元素对象的jquery对象。

1. 基本选择器

id选择器

<html lang="en"><head><title>Document</title><script src="js/jquery-3.2.1.js"></script><script>$(function(){alert($("#text1").val());});</script></head><body><input type="text" id="text1" value="111"><input type="text" value="222"><input type="text" value="333"></body></html>

类选择器

<html lang="en"><head><title>Document</title><script src="js/jquery-3.2.1.js"></script><script>$(function(){alert("ok");$(".text1").val("000");});</script></head><body><input type="text" id="text1" value="111"><input type="text" class="text1" value="222"><input type="text" class="text1" value="333"></body></html>

html元素选择器

<html lang="en"><head><title>Document</title><script src="js/jquery-3.2.1.js"></script><script>$(function(){alert("ok");$("input").val("000");});</script></head><body><input type="text" id="text1" value="111"><input type="text" class="text1" value="222"><input type="text" class="text1" value="333"></body></html>

选择器合并

<html lang="en"><head><title>Document</title><script src="js/jquery-3.2.1.js"></script><script>$(function(){alert("ok");$("#text1,.text1").val("000");});</script></head><body><input type="text" id="text1" value="111"><input type="text" class="text1" value="222"><input type="text" value="333"></body></html>

2. 层级选择器

有层级关系时，例如子元素、后代元素、兄弟元素的选择时。

查找后代元素

ancestor descendant

<html lang="en"><head><title>Document</title><script src="js/jquery-3.2.1.js"></script><script>$(function(){alert("ok");$("form input").val("000");});</script></head><body><form><input type="text" id="text1" value="111"><div><input type="text" class="text1" value="222"></div></form><input type="text" value="333"></body></html>

获得子元素的选择器

parent > child

<html lang="en"><head><title>Document</title><script src="js/jquery-3.2.1.js"></script><script>$(function(){alert("ok");$("form>input").val("000");});</script></head><body><form><input type="text" id="text1" value="111"><div><input type="text" class="text1" value="222"></div></form><input type="text" value="333"></body></html>

获得下一个兄弟元素

prev + next

<html lang="en"><head><title>Document</title><script src="js/jquery-3.2.1.js"></script><script>$(function(){alert("ok");$("label+input").val("000");});</script></head><body><form><label>姓名：</label><input type="text" id="text1" value="111"><div><label>年龄：</label><input type="text" class="text1" value="222"><input type="text" value="333"></div></form></body></html>

获得后面的所有兄弟元素

prev ~ siblings

<html lang="en"><head><title>Document</title><script src="js/jquery-3.2.1.js"></script><script>$(function(){alert("ok");$("label~input").val("000");});</script></head><body><form><label>姓名：</label><input type="text" id="text1" value="111"><div><input type="text" value="444"><label>年龄：</label><input type="text" class="text1" value="222"><input type="text" value="333"></div></form></body></html>

3. 基本过滤选择器

通过数量过滤出选择的元素，包括:first 、:last 、:eq(index) 、:gt(index)、:lt(index) 、:even 、:odd

4. 属性过滤选择器

通过元素的属性进行过滤 [属性] 或 [属性=‘值’] 或 [属性!='值']

<html lang="en"><head><title>Document</title><script src="js/jquery-3.2.1.js"></script><script>$(function(){alert("ok");//输入框的值设置为000//$("label~input[type='text']").val("000");//输入框内容为空的设置为000//$("input[value='']").val("000");});</script></head><body><form><label>姓名：</label><input type="text" id="text1" value="111"><div><label>年龄：</label><input type="text" class="text1" value="222"><input type="text" value=''><input type="button" value="确定"></div></form></body></html>