Web前端基础(15):jQuery基础(二)
程序员文章站
2022-03-08 14:45:51
1. jQuery选择器 jQuery选择器是jQuery强大的体现，它提供了一组方法，让我们更加方便的获取到页面中的元素。 1.1 基本选择器 例子如下： < ......</div>
<div class="content">
<h1>1. jquery选择器</h1>
<p>jquery选择器是jquery强大的体现，它提供了一组方法，让我们更加方便的获取到页面中的元素。</p>
<h2>1.1 基本选择器</h2>
<p><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlczQuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAxOTExMjAvYl8wXzIwMTkxMTIwMDc0ODExMzgyNC5wbmc=" alt="Web前端基础(15):jQuery基础(二)" title="Web前端基础(15):jQuery基础(二)"></p>
<p>例子如下：</p>
<p> </p>
<p> </p>
<div class="cnblogs_code">
<pre class="brush: javascript;"><!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div></div>
<div id="box"></div>
<div class="box"></div>
<div class="box"></div>
<div></div>
<script type="text/javascript" src="js/jquery-2.1.0.js"></script>
<script type="text/javascript">
//入口函数
$(function(){
//三种方式获取jquery对象
var jqbox1 = $("#box");
var jqbox2 = $(".box");
var jqbox3 = $('div');
//操作标签选择器
jqbox3.css('width', '100');
jqbox3.css('height', 100);
jqbox3.css('background-color', 'red');
jqbox3.css('margin-top', 10);
//操作类选择器(隐式迭代，不用一个一个设置)
jqbox2.css("background", "green");
jqbox2.text('哈哈哈')
//操作id选择器
jqbox1.css("background", "yellow");
})
</script>
</body>
</html></pre>
</div>
<p><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlczQuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAxOTExMjAvYl8wXzIwMTkxMTIwMDc0ODExODc4MC5wbmc=" alt="Web前端基础(15):jQuery基础(二)" title="Web前端基础(15):jQuery基础(二)"></p>
<p> </p>
<p> </p>
<h2>1.2 层级选择器</h2>
<p><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlczQuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAxOTExMjAvYl8wXzIwMTkxMTIwMDc0ODEyNzk2NS5wbmc=" alt="Web前端基础(15):jQuery基础(二)" title="Web前端基础(15):jQuery基础(二)"></p>
<p> </p>
<p> </p>
<blockquote>
<p>a b，获得a元素内部的所有的b元素。(祖先) -- 后代 </p>
<p>a > b，获得a元素下面的所有的b元素。(父子)</p>
<p>a + b，获得a元素同级下一个b元素。(兄弟) </p>
<p>a ~ b，获得a元素同级所有的b元素。(兄弟)</p>
</blockquote>
<p> 例子如下：</p>
<div class="cnblogs_code">
<pre class="brush: javascript;"><!doctype html>
<html>
<head lang="en">
<meta charset="utf-8">
<title></title>
<script src="js/jquery-2.1.0.js"></script>
<script>
$(function () {
//获取ul中的li设置为粉色
//后代：儿孙重孙曾孙玄孙....
var jqli = $("ul li");
jqli.css("margin", 5);
jqli.css("background", "pink");
//子代：亲儿子
var jqotherli = $("ul>li");
jqotherli.css("background", "red");
});
</script>
</head>
<body>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
<ol>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ol>
</ul>
</body>
</html></pre>
</div>
<p><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlczQuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAxOTExMjAvYl8wXzIwMTkxMTIwMDc0ODEyODYyMy5wbmc=" alt="Web前端基础(15):jQuery基础(二)" title="Web前端基础(15):jQuery基础(二)"></p>
<p> </p>
<p> </p>
<h2>1.3 基本过滤选择器</h2>
<p><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlczQuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAxOTExMjAvYl8wXzIwMTkxMTIwMDc0ODEyNTA4MS5qcGc=" alt="Web前端基础(15):jQuery基础(二)" title="Web前端基础(15):jQuery基础(二)"></p>
<p> </p>
<p> </p>
<div class="cnblogs_code">
<pre class="brush: javascript;">:first 第一个
:last 最后一个
:not(...) 删除指定内容。例如：1234：not(3) --> 124
:even 偶数，从0开始计数 -- 操作索引号，页面显示奇数项
:odd 奇数
:eq(index) 等于index
:gt(index) 大于index
:lt(index) 小于index
--------------------------------------------------------
:header 获得标题（<h1>/<h2> ...）
:animated 获得动画的
:focus 获得焦点</pre>
</div>
<p>例子如下：</p>
<div class="cnblogs_code">
<pre class="brush: javascript;"><!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>基本过滤选择器</title>
</head>
<body>
<ul>
<li>哈哈哈哈，基本过滤选择器</li>
<li>嘿嘿嘿</li>
<li>天王盖地虎</li>
<li>小鸡炖蘑菇</li>
</ul>
</body>
<script src="js/jquery-2.1.0.js"></script>
<script type="text/javascript">
$(function(){
//获取第一个 :first ,获取最后一个 :last
//奇数
$('li:odd').css('color','red');
//偶数
$('li:even').css('color','green');
//选中索引值为1的元素 *
$('li:eq(1)').css('font-size','30px');
//大于索引值1
$('li:gt(1)').css('font-size','50px');
//小于索引值1
$('li:lt(1)').css('font-size','12px');
})
</script>
</html></pre>
</div>
<p><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlczQuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAxOTExMjAvYl8wXzIwMTkxMTIwMDc0ODEzNjAyMy5qcGc=" alt="Web前端基础(15):jQuery基础(二)" title="Web前端基础(15):jQuery基础(二)"></p>
<p> </p>
<p> </p>
<h2>1.4 属性选择器</h2>
<p><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlczQuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAxOTExMjAvYl8wXzIwMTkxMTIwMDc0ODEzNTM2Ni5qcGc=" alt="Web前端基础(15):jQuery基础(二)" title="Web前端基础(15):jQuery基础(二)"></p>
<p> </p>
<p> </p>
<div class="cnblogs_code">
<pre class="brush: javascript;">[属性名] 获得有属性名的元素。
[属性名=值] 获得属性名等于值的元素
[属性名!=值] 获得属性名不等于值的元素
[...][...][...] 复合属性选择器，多个属性同时过滤。where...and...and...
---------------------------------------------------------
[属性名^=值] 获得属性名以值开头的元素
[属性名$=值] 获得属性名以值结尾的元素
[属性名*=值] 获得属性名含有值的元素</pre>
</div>
<p>例子如下：</p>
<div class="cnblogs_code">
<pre class="brush: javascript;"><!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="box">
<h2 class="title">属性元素器</h2>
<!--<p class="p1">我是一个段落</p>-->
<ul>
<li id="li1">分手应该体面</li>
<li class="what" id="li2">分手应该体面</li>
<li class="what">分手应该体面</li>
<li class="heihei">分手应该体面</li>
</ul>
<form action="" method="post">
<input name="username" type='text' value="1" checked="checked" />
<input name="username1111" type='text' value="1" />
<input name="username2222" type='text' value="1" />
<input name="username3333" type='text' value="1" />
<button class="btn-default">按钮1</button>
<button class="btn-info">按钮1</button>
<button class="btn-success">按钮1</button>
<button class="btn-danger">按钮1</button>
</form>
</div>
</body>
<script src="js/jquery-2.1.0.js"></script>
<script type="text/javascript">
$(function(){
//标签名[属性名] 查找所有含有id属性的该标签名的元素
$('li[id]').css('color','red');
//匹配给定的属性是what值得元素
$('li[class=what]').css('font-size','30px');
//[attr!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素
$('li[class!=what]').css('font-size','50px');
//匹配给定的属性是以某些值开始的元素
$('input[name^=username]').css('background','gray');
//匹配给定的属性是以某些值结尾的元素
$('input[name$=222]').css('background','greenyellow');
//匹配给定的属性是以包含某些值的元素
$('button[class*=btn]').css('background','red')
})
</script>
</html></pre>
</div>
<p><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlczQuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAxOTExMjAvYl8wXzIwMTkxMTIwMDc0ODE0OTgyMC5qcGc=" alt="Web前端基础(15):jQuery基础(二)" title="Web前端基础(15):jQuery基础(二)"></p> </div>
<div class="info-pre-next">
<p>
上一篇： <a href="/article/106977.html">
滴滴在日本推出DiDi Premium服务：可打雷克萨斯等高级车 </a>
</p>
<p>
下一篇： <a href="/article/106979.html">
jquery 获取元素(父节点,子节点,兄弟节点) </a>
</p>
</div>
<div class="wz_tuijian">
<p>
推荐阅读 </p>
<ul>
<li>
<a href="/article/2369961.html" target="_blank" title="html综述一 jQuery基础使用（动态在body中创建div节点）_html/css_WEB-ITnose">
<h2>
html综述一 jQuery基础使用（动态在body中创建div节点）_html/css_WEB-ITnose </h2>
</a>
</li>
<li>
<a href="/article/2362836.html" target="_blank" title="前端开发基础之HTML--标签系列（1）_html/css_WEB-ITnose">
<h2>
前端开发基础之HTML--标签系列（1）_html/css_WEB-ITnose </h2>
</a>
</li>
<li>
<a href="/article/2362347.html" target="_blank" title="零基础学习web前端的几大阶段">
<h2>
零基础学习web前端的几大阶段 </h2>
</a>
</li>
<li>
<a href="/article/2361086.html" target="_blank" title="2015年10月15日学习html基础笔记_html/css_WEB-ITnose">
<h2>
2015年10月15日学习html基础笔记_html/css_WEB-ITnose </h2>
</a>
</li>
<li>
<a href="/article/2358305.html" target="_blank" title="web前端篇：JavaScript基础篇（易懂小白上手快）-2">
<h2>
web前端篇：JavaScript基础篇（易懂小白上手快）-2 </h2>
</a>
</li>
<li>
<a href="/article/2355164.html" target="_blank" title="css3的基础用法，新手必看哈（还有css3和jquery动画的对比）_html/css_WEB-ITnose">
<h2>
css3的基础用法，新手必看哈（还有css3和jquery动画的对比）_html/css_WEB-ITnose </h2>
</a>
</li>
<li>
<a href="/article/2348814.html" target="_blank" title="百度前端学院-基础学院-第二课">
<h2>
百度前端学院-基础学院-第二课 </h2>
</a>
</li>
<li>
<a href="/article/2339526.html" target="_blank" title="html综述一 jQuery基础使用（动态在body中创建div节点）_html/css_WEB-ITnose">
<h2>
html综述一 jQuery基础使用（动态在body中创建div节点）_html/css_WEB-ITnose </h2>
</a>
</li>
<li>
<a href="/article/2338291.html" target="_blank" title="Web前端基础(16):jQuery基础(三)">
<h2>
Web前端基础(16):jQuery基础(三) </h2>
</a>
</li>
<li>
<a href="/article/2330291.html" target="_blank" title="前端开发app用什么框架（学web前端开发需要的基础）">
<h2>
前端开发app用什么框架（学web前端开发需要的基础） </h2>
</a>
</li>
</ul>
</div>
</article>
</div>
</main>
<footer><div class="box"><div class="ft_nav"><div class="ft_about"><p>关于网站</p><ul><li><a href="/sitemap.xml" target="_blank" title="网站地图">网站地图</a></li><li><a href="/list/2/" title="最新程序员文章站">最新程序员文章站</a></li></ul></div><div class="ft_contact"><ul><li>本站所有数据收集于网络如有侵犯到您的权益，请联系我们进行下架处理。</li><li class="email_show"></li></ul></div></div><div class="copyright"><div class="cr_left"><p> 备案号：<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20058927号</a></p><p>© Copyright © 2020-2022 www.superweb999.com 程序员文章站. </p></div></div></div></footer> </body>
</html>