jquary学习（二）jquary的使用，jQuery中的选择器
jquary学习（二）jquary的使用，jQuery中的选择器
一写代码就开心
发布于 2021-06-17 19:27:23
发布于 2021-06-17 19:27:23
文章被收录于专栏：java和python
目录
- 首先在官网下载jquary的js文件
- html页面文件里面引入
- jQuery中的选择器
- 基本选择器id 选择器标签选择器 (“a”)类选择器 (“.class”)
首先在官网下载jquary的js文件
在这里插入图片描述
我们需要在代码里面引入 以上 红框里面的随便一个js文件
html页面文件里面引入
在这里插入图片描述
以后就可以在这个HTML页面使用jquary的语法了
jQuery中的选择器
我们打开jquary的中文参考文档
在这里插入图片描述
在这里插入图片描述
打开就是以上的界面。
基本选择器
在这里插入图片描述
先看基本选择器
id 选择器
function demo1(){
//使用JS方式获得--HTMLInputElement
var uname=document.getElementById("uname");
//使用JQ获得 获得ID名称为unam的对象 也就是获取的是一个数组
// Object---[Element,Element,Element,Element]
var un=$("#uname");
alert(un[0]);
/**
* js--获得的是一个Element
* jq--获得的是Object对象，就是一个数组
*
* jq对象如何转换成一个js对象？
*
* jq[0]--使用下标
* js对象如何可以转成jq?
*
* $(js对象)
*
* **/
}标签选择器 $(“a”)
function demo2(){
// js
var val= document.getElementsByTagName("input");
// jq [...]
var inp= $("input");
console.log(inp[0].value);
//inp.eq(1) --获得下标为1的元素对象 ，这个对象仍是JQ
console.log(inp.eq(1).val());
}类选择器 $(“.class”) $(“h2.class”)
function demo3(){
//获得所有类名叫a 的元素对象
var as=$(".a");
}层级选择器
function demo1(){
//√ 在给定的祖先元素下匹配所有的后代元素--获得指定的所有的元素
$("div span").css("background-color","green");
//√ 获得给定祖先元素下的直系子节点对象
//$("div>span").css("background-color","green");
//获得指定元素的下一个节点元素 注意需要紧跟当前元素
//$("#span2+span").css("background-color","green");
//匹配 当前元素之后的所有 span 元素
// $("#span2~span").css("background-color","green");
}<body>
<button onclick="demo1()">选择器</button>
<div style="border: 2px solid red;height: 200px;">
<span>Item 1</span> <br/>
<span id="span2">Item 2</span> <br/>
<span>Item 3</span> <br/>
<span>Item 4</span> <br/>
<p>
<span>Item 11</span> <br/>
<span>Item 12</span> <br/>
<span>Item 13</span> <br/>
</p>
</div>
</body>位置选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-1.12.3.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
//当前元素的第一个节点
//$("ul li:first").css("background-color","green");
//$("ul li").first().css("background-color","green");
//获得最后一个节点
//$("ul li:last").css("background-color","green");
//$("ul li").last().css("background-color","green");
//√获得所有奇数行对象
//$("ul li:even").css("background-color","green");
//√获得所有偶数行对象
//$("ul li:odd").css("background-color","red");
//√匹配一个给定索引值的元素--里面书写的是下标0开始
//$("ul li:eq(2)").css("background-color","red");
//$("ul li").eq(3).css("background-color","red");
//匹配所有大于索引值为2的元素
//$("ul li:gt(2)").css("background-color","red");
// 匹配所有下于索引值为2的元素
$("ul li:lt(2)").css("background-color","red");
})
</script>
</head>
<body>
<div id="" style="height: 200px; border: 1px solid red;">
<ul>
<li>List Item1</li>
<li>List Item2</li>
<li>List Item3</li>
</ul>
<ul>
<li>List Item21</li>
<li>List Item22</li>
<li>List Item23</li>
</ul>
</div>
</body>
</html>子元素选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-1.12.3.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
//第一个 而此选择符将为每个父元素匹配一个子元素
//$("ul li:first-child").css("background-color","green");
//最后一个 而此选择符将为每个父元素匹配一个子元素
//$("ul li:last-child").css("background-color","red");
//√ 匹配每一个ul 中的li标签的位置 注意：从1开始的
//$("ul li:nth-child(1)").css("background-color","red");
//$("ul li:nth-child(odd)").css("background-color","red");
//获得只含有一个元素的对象
$("ul li:only-child").css("background-color","red");
})
</script>
</head>
<body>
<div id="" style="height: 200px; border: 1px solid red;">
<ul>
<li>List Item1</li>
<li>List Item2</li>
<li>List Item3</li>
</ul>
<ul>
<li>List Item21</li>
<!--<li>List Item22</li>
<li>List Item23</li>-->
</ul>
</div>
</body>
</html>属性选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-1.12.3.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
//√获得type 属性为text的所有标签对象
//$("input[type=text]").css("border-color","#007108")
//获得input标签 name属性是sxt开头的所有标签对象
//$("input[name^=sxt]").css("border-color","red")
//获得input标签 name属性是sxt结尾的所有标签对象
//$("input[name$=sxt]").css("border-color","red")
//获得input标签 name属性含有sxt所有标签对象
//$("input[name*=sxt]").css("border-color","red")
//获得input标签 name属性不等于sxt_name所有标签对象
$("input[name!=sxt_name]").css("border-color","red")
})
</script>
</head>
<body>
<p>
<input type="text" name="sxt_name" id="" value="" />
</p>
<p>
<input type="text" name="sxt_uname" id="" value="" />
</p>
<p>
<input type="password" name="pwd_sxt" id="" value="" />
</p>
<p>
<input type="password" name="filesxtfile" id="" value="" />
</p>
</body>
</html>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2021/06/13 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
