#jQuery选择器

请列举出在CSS中学习过的选择器的类型

jQuery选择器的优势有哪些？

jQuery选择器包括哪几大类？

通过位置选取元素的jQuery选择器有哪些？

课件

1jQuery选择器

2jQuery选择器分类

jQuery选择器功能强大，种类也很多，分类如下

通过CSS选择器选取元素

基本选择器

层次选择器

属性选择器

通过过滤选择器选择元素

基本过滤选择器

可见性过滤选择器

3jQuery选择器注意事项2-1

总结

代码

示例1：基本选择器.#

body,h1,h2,h3,p,ul,li,dl,dt,dd,div,section{margin: 0;padding: 0;}

body{

font-family: "微软雅黑";

font-size: 12px;

line-height: 28px;

}

#book{

margin: 5px auto 0 auto;

width: 650px;

overflow: hidden;

}

.imgLeft{

float:left;

width: 210px;

}

.imgLeft img{width: 200px;}

.textRight{

float: right;

width: 440px;

}

#book h1{font-size: 16px; line-height: 50px;}

.textRight dl{padding-left: 5em;}

.textRight dl dd{display: none;}

#jdPrice p{ display:inline;}

/**

* Created by zongjuan.wang on 2016/6/15.

$(document).ready(function(){

$("dt").click(function(){ //获取<dt>标签并为其添加click事件函数

$("dd").css("display","block"); //获取<dd>标签设置显示

});

$("h1").css("color","blue"); //获取并设置<h1>字体颜色为蓝色

/* 获取并设置所有class为price的元素背景颜色和内边距 */

$(".price").css({"background":"#efefef","padding":"5px"});

/* 获取并设置id为author的元素字体颜色 */

$("#author").css("color","#083499");

/* 获取并设置所有<dt>、<dd>、class为intro的元素字体颜色 */

$(".intro,dt,dd").css("color","#ff0000");

$("*").css("font-weight","bold");//设置所有元素的字体加粗显示

})

<!DOCTYPE html>

<html>

</head>

<body>

<h1>岛上书店【荐书联盟推荐】[The Storied Life of A.J.Fikry]</h1>

<p class="intro">自营图书几十万畅销品种阶梯满减，抽奖赢魅蓝note3、JDRead阅读器！</p>

<p id="author">[美] 加·泽文（Gabrielle Zevin）著；孙仲旭，李玉瑶译</p>

<p id="mobilePrice">促销信息：<span>手机专享价</span> <span>￥9.90</span></p>

<dl>

<dt>以下促销可在购物车任选其一</dt>

<dd><span>加价购</span> 满99.00元另加6.18元即可在购物车换购热销商品</dd>

</dl>

</div>

</section>

</body>

</html>

示例2：层次选择器

body,h1,h2,h3,p,ul,li,dl,dt,dd,div,section{margin: 0;padding: 0;}

body{

font-family: "微软雅黑";

font-size: 12px;

line-height: 28px;

}

#book{

margin: 5px auto 0 auto;

width: 650px;

overflow: hidden;

}

.imgLeft{

float:left;

width: 210px;

}

.imgLeft img{width: 200px;}

.textRight{

float: right;

width: 440px;

}

#book h1{font-size: 16px; line-height: 50px;}

.textRight dl{padding-left: 5em;}

#jdPrice p{ display:inline;}

/**

* Created by zongjuan.wang on 2016/6/15.

$(document).ready(function(){

//$(".textRight p").css("color","red"); //后代选择器

//$(".textRight>p").css("color","red"); //子选择器

// $("h1+p").css("text-decoration","underline"); //相邻元素选择器

$("h1~p").css("text-decoration","underline"); //同辈元素选择器

})

<!DOCTYPE html>

<html>

</head>

<body>

<h1>岛上书店【荐书联盟推荐】[The Storied Life of A.J.Fikry]</h1>

<p class="intro">自营图书几十万畅销品种阶梯满减，抽奖赢魅蓝note3、JDRead阅读器！</p>

<p id="author">[美] 加·泽文（Gabrielle Zevin）著；孙仲旭，李玉瑶译</p>

<p id="mobilePrice">促销信息：<span>手机专享价</span> <span>￥9.90</span></p>

<dl>

<dt>以下促销可在购物车任选其一</dt>

<dd><span>加价购</span> 满99.00元另加6.18元即可在购物车换购热销商品</dd>

</dl>

</div>

</section>

</body>

</html>

示例3：属性选择器

body,ul,li,div,section,header{margin: 0;padding: 0;}

ul,li{list-style: none;}

body{

font-family:"微软雅黑";

font-size: 12px;

line-height: 28px;

}

#news{

border: 1px solid #cccccc;

width: 280px;

overflow: hidden;

margin: 5px auto 0 auto;

}

#news header{

border-bottom: 1px solid #cccccc;

font-size: 16px;

line-height: 40px;

padding-left:15px;

color: #666666;

font-weight: bold;

}

#news header a{text-decoration: none; color: #666666; float: right; padding-right: 10px;}

#news ul li{padding-left: 10px;}

#news ul li a{color: #686868; text-decoration: none; display: inline-block;}

#news ul li a:hover{color: #b02f4a;}

#news ul li a span{font-size: 13px; font-weight: bold; margin-right: 5px;}

/**

* Created by zongjuan.wang on 2016/6/16.

$(document).ready(function(){

//$("#news a[class]").css("background","#c9cbcb"); //带有class的属性

//$("#news a[class='hot']").css("background","#c9cbcb"); //带有class的属性且值为hot

//$("#news a[class!='hot']").css("background","#c9cbcb"); //class的属性且值不是hot

//$("#news a[href^='www']").css("background","#c9cbcb"); //href值以www开头

//$("#news a[href$='html']").css("background","#c9cbcb"); //href值以html结尾

$("#news a[href*='k2']").css("background","#c9cbcb"); //href值包含k2

})

<!DOCTYPE html>

<html>

</head>

<body>

<ul>

<li><a href="www.jd.com/news.aspx?id=29257"><span>[公告]</span>京东无锡馆正式启动</a></li>

<li><a href="www.jd.com/news.aspx?id=29252"><span>[公告]</span>节能领跑京东先行</a></li>

<li><a href="sale.jd.com/act/ugk2937w.html" class="last"><span>[特惠]</span>高洁丝实力撩货，领券五折</a></li>

</ul>

</section>

</body>

</html>

示例4：基本过滤选择器

*{padding:0;margin:0;}

html,body{font-family:"微软雅黑";}

.contain{width:320px;margin:5px auto; border: 1px solid #2a65ba;}

ul{list-style:none;}

li{padding-left:15px;line-height:40px;font-size:12px;color:#000;border-bottom:1px #aaaaaa dashed;}

h2{font-size:16px;padding-left:20px;line-height:40px;}

/**

* Created by zongjuan.wang on 2016/6/17.

$(document).ready(function(){

//用过滤选择器给h2设置背景颜色和字体颜色

$(".contain :header").css({"background":"#2a65ba","color":"#ffffff"});

//li 最后一个没有边框

$(".contain li:last").css("border","none");

//改变第一个li的字体大小和颜色

// $(".contain li:first").css({"font-size":"16px","color":"#e90202"});

//设置偶数行背景颜色

// $(".contain li:even").css("background","#f0f0f0");

//设置奇数行背景颜色

//$(".contain li:odd").css("background","#cccccc");

//设置前两个li的字体颜色（从0开始,小于2）

$(".contain li:lt(2)").css({"color":"#708b02"});

//设置后两个li的字体颜色（从0开始，大于3）

$(".contain li:gt(3)").css({"color":"#b66302"});

//改变第3个li的背景颜色（从0开始

//$(".contain li:eq(2)").css({"background":"#02acaa"});

});

<!doctype html>

<head>

<title>仿冬奥列表内容</title>

</head>

<body>

<ul>

<li> 贝克汉姆：衷心希望北京能够申办成功！</li>

<li> 姚明：北京申冬奥是个非常棒的机会！加油！</li>

<li> 张虹：北京办冬奥，大家的热情定超乎想象！ </li>

<li> 肖恩怀特：我爱北京，支持北京申办冬奥会！</li>

<li> 赵宏博：北京申办冬奥会是再合适不过了！</li>

<li> 你喜欢哪些冬季运动项目？(点击进入调查页)</li>

</ul>

</div>

</body>

</html>

示例5：可见性过滤选择器show/hide

<!DOCTYPE html>

<html>

<title>可见性过滤选择器</title>

#txt_show {display:none; color:#00C;}

#txt_hide {display:block; color:#F30;}

</style>

</head>

<body>

<p id="txt_hide">点击按钮，我会被隐藏哦~</p>

$(document).ready(function(){

$("#show").click(function(){

$("p:hidden").show();

})

$("#hide").click(function(){

$("p:visible").hide();

})

</script>

</body>

</html>

6JS库-前端框架（库）-jQuery选择器相关推荐

5JS库-前端框架（库）-初识jQuery
前端框架(库) #初识jQuery jQuery由美国人John Resig于2006年创建 jQuery是目前最流行的JavaScript程序库,它是对JavaScript对象和函数的封装它的设计 ...
【Java Web前端开发】前端框架 bootstrap+jquery+angularjs探索
文章目录 1 Bootstrap 2 jQuery 3 AngularJS 1 Bootstrap 在Bootstrap的官网介绍中,Bootstrap is the most popular HTM ...
前端框架：jQuery
一.jQuery介绍 jQuery是什么? jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或Javascript框架).jQ ...
全面、详细的前端组件库
全面.详细的前端组件库前端组件库搭建web app常用的样式/组件等收集列表(移动优先) 0. 前端自动化(Workflow) 前端构建工具 Yeoman – a set of tools for ...
常用的编程语言介绍以及各语言的特点（前端，前端框架，后端）
常用的编程语言介绍以及各语言的特点编程语言(programming language),是用来定义计算机程序的形式语言.它是一种被标准化的交流技巧,用来向计算机发出指令.一种计算机语言让程序员能够准 ...
2018几大主流的 UI/JS 前端框架
2016年开始应该是互联网飞速发展的几年,同时也是Web前端开发非常火爆的一年,Web 前端技术发展速度让人感觉几乎不是继承式的迭代,而是一次次的变革和创造.这一年中有很多热门的前端开发框架,下面源码 ...
Vue.js 2 渐进式前端框架的最佳学习方法
Vue.js作为一个后起的前端框架,借鉴了Angular .React等现代前端框架/库的诸多特点,并且取得了相当不错的成绩. Vue.js的定位是一个渐进式框架,作者的说法是: 与其他框架的区别就 ...
前端框架千千万，抓住两条主线成一半
作者:大漠穷秋百花齐放的前端框架 2007 年的时候我刚毕业,当时最火的前端框架是 jQuery 和 Ext JS,那时候大家纠结的问题是:我到底是用 jQuery 呢还是用 Ext JS 呢? 后 ...
前端框架千千万，每隔两年翻一番
01 百花齐放的前端框架 2007 年的时候我刚毕业,当时最火的前端框架是 jQuery 和 Ext JS,那时候大家纠结的问题是:我到底是用 jQuery 呢还是用 Ext JS 呢? 后来又出现了 ...

6JS库-前端框架（库）-jQuery选择器

#jQuery选择器

课件

1jQuery选择器

2jQuery选择器分类

通过CSS选择器选取元素

通过过滤选择器选择元素

3jQuery选择器注意事项2-1

总结

代码

示例1：基本选择器.#

示例2：层次选择器

示例3：属性选择器

示例4：基本过滤选择器

示例5：可见性过滤选择器show/hide

6JS库-前端框架（库）-jQuery选择器相关推荐

最新文章

热门文章