6.4 jQuery选择器

一、dom与jq之间的转换：
先获取DOM对象，然后在将其用工厂函数包装成jQuery对象

将jQuery转换成DOM对象：

<script>
1、 /*dom对象获取*/
var tv_div = document.getElementById("tv_div")
alert(tv_div .innerHTML)
/*DOM转jquery对象*/
var $tv_div = $(tv_div )
alert($objJQ.html())

2、 /*jquery转换为Dom*/
var tv_div = $tv_div[0];
var tv_div1= $tv_div.get(0)
alert(tv_div.innerHTML)
alert(tv_div1.innerHTML)
</script>

二、jQuery选择器：

基本选择器：

1，标签选择器

2，类选择器

3，id选择器

4，并集选择器

5，全局选择器

<script>

// $("h1+p").css({"color":"#ff0"})
//后边所有的同辈p
// $("h1~p").css({"color":"#083499"})
//lei选择器
// $(".textRight").css({"color":"#ff0"})
//所有的p标签
// $("p").css({"color":"red"});
//id选择器
// $("#author").css({"color":"red"})
//子选择器
$(".price>p").css({"color":"#083499"});

</script>

三、层次选择器：

1，后代选择器

2，子选择器

3.相邻选择器

4，同辈选择器

script>
$(document).ready(function(){
/*后代选择器*/
$("#book p").css({"color":"blue"})
/*子选择器*/
$("#book>p").css({"color":"blue"})
/*相邻选择器*/
$("#book+p").css({"color":"blue"})
/*同辈选择器*/
$("#book~p").css({"color":"blue"})
})
</script>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>制作非缘勿扰页面特效 </title>
<link rel="stylesheet" href="css/style.css">

</head>
<body>
<div class='main' >
<div class='left'>
<img src="images/pic.gif" />
<br/><br/>
<img src="images/col.gif" alt="收藏本片"/>
</div>
<div class='right'>
<dl>
<dt>非缘勿扰</dt>
<dd><span id="star">主演：</span>苏有朋/秦岚/傅艺伟等</dd>
<dd><span id='director'>导演：</span><span title="导演">赖水清</span></dd>
<dd><span id='label'>标签：</span><span>苏有朋</span> 国产电视剧 <span>2013</span> 连续剧 </dd>
<dd><span id="drama">剧情：</span>当代都市，大年女刘林、杨阳都在寻找自己的如意郎君，刘林偶遇陆氏房地产总裁路西诺，两人成了欢喜冤家，遭到暗恋西诺的丁娟的嫉恨。。。<a href="#">点击了解更多 </a></dd>
</dl>
<img src="images/btn.gif"/>
</div>
</div>
<script src="js/jquery-1.8.3.js"></script>
<script>
$(document).ready(function () {
$(".right>dl>dt").click(function () {
$(".right>dl dd span[id]").css({"color":"#FF0099","font-weight":" bold"})
});
$("#director").click(function () {
$("span[title]").css({"font-weight":" bold"})
});
$("#label").click(function () {
$("#label~span").css({"background-color":"#E0F8EA","color":"#10A14B",
"padding":"2px 8px"})
});
$("img[alt='收藏本片']").click(function () {
alert("您已收藏成功！")
})
})
</script>
</body>
</html>

四、属性选择器：

1，$("[src]") //只要属性中包含src = "#" 的属性，就会被选中

2,[attribute = value] //属性attribute的值等于value时就会被选中

3,[ attribute != value ] //不等于

4,[ attribute^ = value ] //value开头的

5,[attribute$ = value ] //以value结尾的

6,[attribute* = value] //只要包含了value

<script>
/*属性选择器*//*包含选择器，包含class的a标签都被选中*/
$("#news a[class]").css({"background-color":"red"})
/*class属性为more的都被选择*/
$("a[class=more]").hide()
/*class属性不为more的都被选择*/
$("a[class!=more]").hide()
/*herf以www开头的*/
$("#news a[href^='www']").css({"background-color":"red"})
/*herf以html结尾的*/
$("#news a[href$='html']").css({"background-color":"red"})
/*href全部被选择*/
</script>

五、过滤选择器：

1，基本过滤选择器

2，可见性过滤选择器

3，表单对象过滤器

4，内容过滤器，子元素过滤器

基本过滤器：

：first选取第一个子元素

：last 选取最后一个子元素

：not（selector) 不包含selector属性的所有元素

：even 偶数行（由索引）来判断索引从零开始

：odd 奇数行一样由零开始索引

：eq(index) 索引等于index的元素

：gt(index) 大于index索引的元素都被选中

：lt(index) 小于index索引的元素都被选中

：header 选取所有的h1~h6标题元素

：focus 选取当前获取焦点的元素

：animated 选取当前所有的的动画

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>全网热播视频</title>
<link rel="stylesheet" href="css/play.css">
<style>
b{
background-color: #d7d7d7;
}
</style>
</head>
<body>
<section id="play">
<h1>全网热播视频</h1>
<ul>
<li><img src="images/flv01.jpg"><p>昊花梦</p><span>1</span></li>
<li><img src="images/flv02.jpg"><p>好先生</p><span>2</span></li>
<li>
<ol>
<li><span>3</span>三八线<p>加入看单</p></li>
<li><span>4</span>吉详天宝<p>加入看单</p></li>
<li><span>5</span>亲爱的翻译官<p>加入看单</p></li>
<li><span>6</span>仙剑云之凡<p>加入看单</p></li>
<li><span>7</span>权力的游戏第五季<p>加入看单</p></li>
<li><span>8</span>琅琊榜<p>加入看单</p></li>
<li><span>9</span>那年青春我们正好<p>加入看单</p></li>
<li><span>10</span>乡村受情8（上）<p>加入看单</p></li>
</ol>
</li>
</ul>
</section>
<script src="js/jquery-1.12.4.js"></script>

<script type="text/javascript">
$(document).ready(function () {
$("#play ul>li:not(li:last) ").css({"margin-right":"10px"});
$("#play ul>li:last").css({"background-color":"#f0f0f0"});
$("#play ul>li>span:lt(2)").css({"background":"#f0a30f"});
$("ol>li span:lt(1)").css({"background":"#f0a30f"});
$("ol>li span:gt(0)").css({"background":"#a4a3a3"});
$("#play ol>li:lt(5)").css({"background":"url(images/orange.jpg) right -4px no-repeat"});
$("#play ol>li:eq(1)").css({"background":"url(images/green.jpg) right -4px no-repeat"});
$("#play ol>li:gt(4)").css({"background":"url(images/green.jpg) right -4px no-repeat"});
$("#play ol>li").mouseover(function () {
$(this).find("p:hidden").show();
})
$("#play ol>li").mouseout(function(){
$(this).find("p:visible").hide();
})
})

</script>
</body>
</html>

可见性过滤选择器：

：visible 选取所有可见的元素

：hidden 选取所有隐藏元素

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>

</head>
<body>
<p id="txt_show">我被隐藏了！</p>
<p id="txt_hide"> 我显示出来了！</p>
<input type="button" value="隐藏" id="hide">
<input type="button" value="显示" id="show">
<script src="../js/jquery-1.8.3.js"></script>
<script>
$(document).ready(function () {
$("#hide").click(function () {
$("p:visible").hide();
});
$("#show").click(function () {
$("p:hidden").show();
});
})
</script>
</body>
</html>

有特殊符号的元素名称要用特殊的解决方法，一般来说程序员要规避到特殊符号！

例如： id= “id#a" id = "id[2]

$("#id \\#a")

$("#id\\[2\\]")

猜你喜欢