3.jquery的选择器语法

一、什么是选择器语法

  1. 就是对DOM对象进行定位的条件，比如根据ID定位，根据标签类型名…
  2. jquery中只有三种选择器

二、基本选择器

1、定位条件

可以根据ID编号，根据标签类型名，根据Class名(和CSS一样都是三种)

2、选择器的使用(第四种几乎不用)

  1. $("#idname")

    代替document.getElementById(“idname”)，根据ID编号定位对应的DOM对象。让DOM对象保存到一个数组中并返回。返回的这个数组就是jquery对象

  2. $(".classname")

    代替document.getElementsByClassName(“classname”)将使用了指定的样式选择器的dom对象保存到同一个数组中，并返回。返回的这个数组就是jquery对象

  3. $(“标签名”)

    代替document.getElementsByTagName(“标签名”)将所有指定的标签类型的DOM对象保存到同一个数组中，并返回。返回的这个数组就是jquery对象

  4. $(" * ")

    通配符，用来定位浏览器中所有的DOM对象保存到同一个数组中并返回

  5. $(“条件1，条件2”)

    组合选择器，只要DOM对象满足其中的一种条件，就会被定位并保存到数组中

3、jquery选择器实例

准备代码示例：

/*CSS部分代码*/
div{
	background: gray;
	width:200px;
	height:100px;
}

<!--html部分代码-->
<body>
	<!--定义被选择对象-->
	<div id="id1" class = "class1"></div><br />
	<div class="class1"></div><br />
	<div></div><br />
	<span>我是span标签</span><br />
	
	<!--定义按钮-->
	<input type="button" id="btn1" value="选择id为id1的元素" onclick = "func1()"/>
	<input type="button" id="btn2" value="选择class为class1的元素" onclick="func2()" />
	<input type="button" id="btn3" value="选择所有div元素" onclick="func3()"/>
	<input type="button" id="btn4" value="选择所有元素" onclick="func4()"/>
	<input type="button" id="btn5" value="选择id为id1和所有的span元素" onclick = "func5()" />
</body>
<script src = "jquery.js"></script>	<!--导入jquery-->

jquery对象中有一个功能函数css( ) 用来将jquery对象中所有的DOM对象的样式属性进行统一赋值

function func1(){
	//选择所有id名为id1的标签，将其样式中的背景色设置绿色
	var $obj = $("#id1");
	$obj.css("background-color","green");
}

function func2(){
	//选择所有class名为class1的标签，将其样式中的背景色设置绿色
	var $obj = $(".class1");
	$obj.css("background-color","blue");
}

function func3(){
	//将所有的div标签背景色设为红色
	var $obj = $("div");
	$obj.css("background-color","red");
}
		
function func4(){
    //将所有的DOM标签背景色设置为黄色(整个页面都是黄的)
	var $obj = $("*");
	$obj.css("background-color","yellow");
}

function func5(){
    //选择id名为id1和所有的span元素的DOM对象，并将其字体大小和字体颜色更改
    var $obj = $("#id1,span");
    $obj.css("font-size","50");
    $obj.css("color","red");
}

三、层级选择器

1、定位条件

  • 可以根据标签之间父子关系定位

  • 可以根据标签之间兄弟关系定位

2、标签之间的关系

  • 父子关系：就是包含关系4

    <tr>
	<td>
    	<input type = "checkbox" />
    </td>
</tr>

    td就是tr的直接子标签

    input是td的直接子标签

    input是tr的间接子标签

  • 兄弟关系：两个标签拥有相同的父标签，并且彼此之间没有包含关系

    <body>
    <div>兄弟1</div>
    <div>兄弟2</div>
    <p>兄弟3</p>
</body>

    这两个div标签和p标签属于兄弟关系

3、层级选择器的使用

  1. $(“定位父标签条件>定位子标签条件”)

    定位当前父标签下，所有满足条件的直接子标签

  2. $(“定位父标签条件 定位子标签条件”)

    定位当前父标签下，所有满足条件的直接子标签 和 间接子标签

  3. $(“定位当前标签条件~定位兄弟标签条件”)

    定位当前标签之后 ，所有满足条件的兄弟标签

  4. $(“定位当前标签条件 + 定位兄弟标签条件”)

    定位当前标签后面与之紧邻的，并且满足条件的所有兄弟标签

  5. $(“定位当前标签条件”).siblings(“定位兄弟标签条件”)

    定位当前标签前面与后面 所有满足条件的兄弟标签

<body>
	<!--定义被选择的对象-->
	<div id = "one">我是div01</div>
	<div id = "two">我是div02</div>
	<div>
		我是div03
		<div class = "son">我是div03的子div</div>
		<div class = "son">我是div03的子div</div>
	</div>
	<div>我是div04</div>
	<span>我是span标签</span>
	<br />
	<!--定义按钮-->
	<input type="button" id = "btn01" value = "选择body中的所有div子标签" onclick = "func1()"/>
	<input type="button" id = "btn02" value = "选择body下的直接div子标签" onclick = "func2()"/>
	<input type="button" id = "btn03" value = "选择id为one的下一个兄弟div" onclick = "func3()"/>
	<input type="button" id = "btn04" value = "选择id为two的所有后面的兄弟div" onclick = "func4()"/>
	<input type="button" id = "btn05" value = "选择id为two的所有兄弟div" onclick = "func5()"/>
</body>

/*选择body中的所有div子标签,将其背景色样式换为pink*/
function func1(){
    $("body div").css("background-color","pink");
}

function func2(){
    /*选择body下的直接div子标签*/
    $("body>div").css("background-color","orange");
}

function func3(){
    /*选择id为one的下一个兄弟div*/
    $("#one+div").css("background-color","green");
}

function func4(){
    /*选择id为two的所有后面的兄弟div*/
    $("#two~div").css("background-color","yellow");
}

function func5(){
    /*选择id为two的所有兄弟div*/
    $("#two").siblings("div").css("background-color","red");
}
4、INPUT标签选择器

  1. INPUT标签组成：

    <input type = "text"/>
<input type = "password"/>
<input type = "radio"/>
<input type = "checkbox"/>
<input type = "file"/>
<input type = "button"/>
<input type = "submit"/>
<input type = "reset"/>

  2. INPUT标签的作用

    作为浏览器向网站发送请求，实质上是携带者请求参数发送过去

  3. INPUT标签的使用

    $(":type属性名字")

  4. 例子

    • $(":button")：定位页面中所有的button关联的DOM
    • $(":checkbox")：定位页面中所有的checkbox关联的DOM
    • $(":table")：无法定位任何内容(因为table不属于input-type中的一种)
    <form id = "myForm" action = "">
    用户名:
    <input type="text" name="username"/><br /><br />

    密&nbsp;&nbsp;码:
    <input type="password" name="password"/><br /><br />

    性&nbsp;&nbsp;别:
    <input type="radio" name="gender" value="1" checked/>男
    <input type="radio" name="gender" value="0"/>女<br /><br />

    照&nbsp;&nbsp;片:
    <input type="file" name="photo"/><br /><br />

    兴&nbsp;&nbsp;趣:
    <input type="checkbox" name="interest" value="music" checked/>音乐
    <input type="checkbox" name="interest" value="food"/>美食
    <input type="checkbox" name="interest" value="travel"/>旅游
    <input type="checkbox" name="interest" value="shopping"/>购物
    <br /><br />

    <!--定义按钮-->
    <button id="btn01" onclick="func1()">选择文本输入框并输出用户输入的值</button>
    <button id="btn02" onclick="func2()">选择密码输入框输出用户输入的密码</button>
    <button id="btn03" onclick="func3()">选择单选框的value属性值</button>
    <button id="btn04" onclick="func4()">选择文件上传框并输出用户选择的文件</button>
    <button id="btn05">选择复选框并输出用户选择的值</button>
</form>

    /*
		val()函数

			1.jquery对象中一个功能函数
			2.读取jquery对象中[第一个DOM对象]的value属性内容
	 */
function func1(){
    var $obj = $(":text");
    var value = $obj.val();
    alert("文本框的value值"+value);
}

function func2(){
    var value = $(":password").val();
    alert("密码框内容" + value);
}

function func3(){
    var $obj = $(":radio");
    /*
		//jquery对象转为DOM对象
		for(var i = 0;i < $obj.length;i++){
			var domObj = $obj[i];
			myFun(i,domObj);
		}
	*/

    //each函数可以简化上述写法
    /*
		each函数遍历jquery对象中的DOM对象
		每次读取一个[下标值]和对象的[DOM对象]交给处理函数
	*/
    $obj.each(myFun);
}

//第一个参数代表下标，第二个参数代表这个下标所对应的DOM对象
function myFun(index,domObj){
    alert("第" + (index+1) + "个radio标签的value是"+ domObj.val());
}

function func4(){
    alert($(":file").val());
}