JQuery选择器语法
什么是选择器语法:
1、就是对DOM对象进行定位的条件,比如根据ID定位,根据标签类型名定位
2、jquery中只有三种选择器
一、基本选择器:
<body>
<script src="js/jquery-3.4.1.js"></script>
<h2>今天星期二</h2><br><br><br>
第一个文本框:<input type="text" class="mytxt" id="one" value="这是第一个文本框" /><br><br>
第二个文本框:<input type="text" class="mytxt" id="one1" value="这是第二个文本框" /><br><br>
<input type="button" value="one点" onclick="fun1()"/>
<input type="button" value="two点" onclick="fun2()"/>
</body>
1、【定位条件】:可以根据ID编号,根据标签类型名,根据标签采用样式选择器
2、【使用】:
- id选择器:
$(“#id编号”):代替document.getElementByID(“”)
根据ID编号定位对应的DOM对象。让DOM对象保存到一个数组中
并返回。返回这个数据就是【jquery对象】
<script type="text/javascript">
function fun1(){
//使用javaScript完成功能
// var one = document.getElementById(one)
// alert(one.value)
//使用jQuery完成相同的功能
alert($("#one").val())
}
</script>
- 类选择器
$(“.样式选择器名称”):代替 document.getElmentByClassName(“样式选择器名”)
将使用了指定的样式选择器的dom对象保存到同一个数组中,并返回。返回
这个数组就是【jquery对象】
function fun2(){
//使用JavaScript完成功能
// var txts = vadocument.getElementsByClassName("text");
// alert(txts[1].val());
alert($(".mytxt").val());
}
- 标签选择器:
$(“标签类型名”):代替document.getElmentByTagName()
将所有指定的标签类型关联的DOM对象保存到同一个数组中并返回,返回这个
数组就是【jquery对象】
function fun3(){
var inputs = $("input");
for (var i = 0; i < inputs.length; i++) {
//此处jQuery对象的inputs在添加了索引后变为dom对象,所以可以使用innerHTML
alert(inputs[i].innerHTML)
}
}
- 全选选择器
$(“*”):定位浏览器中所有的DOM对象保存到同一个数组中并返回。
返回的这个数组就是【jquery对象】
function fun4(){
//选中所有元素
$("*").css("background","blue");
}
- 组合选择器
$(“条件1,条件2”):只要DOM对象满足其中的一种条件,就会被定位到数组中
相当于mysql or where sal >=3000 or job = ‘manger’
function fun5(){
//组合选择
$("#one,.two").css("background","pink");
}
二、层级选择器:
- 【定位条件】:可以根据标签之间父子/(兄弟)关系定位
- 【标签之间的关系】:
<!--
input是body的直接子标签
div是body的间接子标签
input和script是兄弟关系(没有包含关系,有着共同的父标签)
-->
<body>
<form>
<input type="butten"></input>
<input type="butten"></input>
<script type="text/javascript">
<div></div>
</script>
</form>
<input type="butten"></input>
<input type="butten"></input>
</body>
//var v=$("form>input");// 仅仅是本form元素下的不在其他容器包裹中的的input子元素才可以,
//如果input元素又被放到本from下另一个div的容器中,则不被选择
//var v=$("form+input");//只取form元素一个同辈份的紧挨着的input元素,一定是同级元素
//var v=$("form~input");//只取form元素所有同辈份的兄弟input元素,一定是同级元素,挨不挨着无所谓
三、表单属性选择器
文本框:<input id="txt" type="text" value="我是type=text"><br/>
性别:<br />
<input type="radio" name="sex" value="man" >男<br>
<input type="radio" name="sex" value="woman" >女<br>
爱好:<br />
<input type="checkbox" name="hobby" value="bike">骑行<br />
<input type="checkbox" name="hobby" value="football">足球<br />
<input type="checkbox" name="hobby" value="music">音乐<br>
<br><p>功能按钮</p>
<input type="button" value="读取text的值" onclick="fun1()"><br />
<input type="button" value="读取radio的值" onclick="fun2()"><br />
<input type="button" value="读取checkbox的值" onclick="fun3()"><br />
- 【定位条件】:可以根据表单的type属性进行定位
- 表单元素与非表单元素的区别:
表单元素用来与客户进行数据交互的,是提交到服务器的元素.
非表单元素就是用来呈现数据的.
只有input元素的type属性值可以做为表单属性选择器
不可以做为表单属性选择器: (下拉列表框) (多行文框)
选择方式如下:
function fun1(){
//读取text的值
alert($(":text").val())
}
function fun2(){
//读取radio的值,":checked"表示只有勾选的才可以被选中
var radios = $(":radio:checked");
for (var i = 0; i < radios.length; i++) {
alert(radios[i].value);
}
}
function fun3(){
//读取checkbox的值
var checkboxs = $(":checkbox:checked");
for (var i = 0; i < checkboxs.length; i++) {
alert(checkboxs[i].value);
}
}