jQuery笔记$("1")——jQuery选择器

最新推荐文章于 2022-05-31 10:10:01 发布

wzl454823

最新推荐文章于 2022-05-31 10:10:01 发布

阅读量133

点赞数

分类专栏： jQuery 文章标签： jQuery 三星 CSS XHTML HTML ViewUI

本文链接：https://blog.csdn.net/wzl454823/article/details/83736641

版权

jQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

开始学习jQuery。
以前没学习过js，大多都是改，现在感觉不够了，需要系统的了解一下。
昨天去图书馆借了《锋利的jQuery》开始自学jQuery顺便学习下JS。
开始讲了一些基础的东西，感觉就是在用$(“”)选择html里面的内容对其进行操作。想法比较简单，毕竟刚刚看嘛，做了第一个[b]jQuery的例子[/b]：


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>1-1</title>
<script src="js/jquery-1.3.1.js" type="text/javascript"> </script>
<script type="text/javascript">
	$(document).ready(function(){
		alert("Hello World!");	
	});
</script>
</head>

<body>
</body>
</html>

知道了格式，alert方法输出”里面的值”。

[b]基本选择器：[/b]


1．$(“#one”).css(“background”,”#bbffaa”);//改变id为one元素的背景颜色
2．$('.mini’).css(“background”,”#bbffaa”);//改变class为mini元素的背景颜色
3．$('div’).css(“background”,”#bbffaa”);//改变所有元素为<div>的背景颜色
4．$('*').css(“background”,”#bbffaa”);//改变所有元素的背景颜色
5．$(“span,#two”).css(“background”,”#bbffaa”);//改变所有<span>和id为two的元素

[b]层次选择器：[/b]


1.$("ancestor descendant")//选取ancestor元素中所有的descendant元素
2.$("parent>child")//选取parent元素下child元素
3.$("prev+next")//选取紧挨着prev的next元素
4.$("prev~siblings")//选取prev之后所有siblings元素

[b]后俩种层选择器与方法的等价关系[/b]


1.$(".one+div");等价于$(".one").next("div");
2.$(".one~div");等价于$(".one").nextAll("div");

结束练习
1.用toggle()。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
 *{ margin:0; padding:0;}
body {font-size:12px;text-align:center;}
a { color:#04D; text-decoration:none;}
a:hover { color:#F50; text-decoration:underline;}
.SubCategoryBox {width:600px; margin:0 auto; text-align:center;margin-top:40px;}
.SubCategoryBox ul { list-style:none;}
.SubCategoryBox ul li { display:block; float:left; width:200px; line-height:20px;}
.showmore { clear:both; text-align:center;padding-top:10px;}
.showmore a { display:block; width:120px; margin:0 auto; line-height:24px; border:1px solid #AAA;}
.promoted a { color:#F50;}
</style>
<script src="js/jquery-1.3.1.js" type="text/javascript"> </script>
<script type="text/javascript">
$(function(){ 								    
		var $needhide = $('ul li:gt(5):not(:last)');//选择从第七个开始除去最后一个的所有li
		$needhide.hide();//设置为不可见
		var $needbtn = $('div.showmore > a');//匹配showmore元素下的所有a（显示品牌链接）
		$needbtn.click(function(){
		$needhide.toggle();
		return false;
		})

})
</script>
</head>

<body>
<div class="SubCategoryBox">
<ul>
<li ><a href="#">佳能</a><i>(30440) </i></li>
<li ><a href="#">索尼</a><i>(27220) </i></li>
<li ><a href="#">三星</a><i>(20808) </i></li>
<li ><a href="#">尼康</a><i>(17821) </i></li>
<li ><a href="#">松下</a><i>(12289) </i></li>
<li ><a href="#">卡西欧</a><i>(8242) </i></li>
<li ><a href="#">富士</a><i>(14894) </i></li>
<li ><a href="#">柯达</a><i>(9520) </i></li>
<li ><a href="#">宾得</a><i>(2195) </i></li>
<li ><a href="#">理光</a><i>(4114) </i></li>
<li ><a href="#">奥林巴斯</a><i>(12205) </i></li>
<li ><a href="#">明基</a><i>(1466) </i></li>
<li ><a href="#">爱国者</a><i>(3091) </i></li>
<li ><a href="#">其它品牌相机</a><i>(7275) </i></li>
</ul>
<div class="showmore">
<a href=""><span>显示全部</span></a>
</div>
</div>
</body>
</html>

2.用hide()和show()。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
 *{ margin:0; padding:0;}
body {font-size:12px;text-align:center;}
a { color:#04D; text-decoration:none;}
a:hover { color:#F50; text-decoration:underline;}
.SubCategoryBox {width:600px; margin:0 auto; text-align:center;margin-top:40px;}
.SubCategoryBox ul { list-style:none;}
.SubCategoryBox ul li { display:block; float:left; width:200px; line-height:20px;}
.showmore { clear:both; text-align:center;padding-top:10px;}
.showmore a { display:block; width:120px; margin:0 auto; line-height:24px; border:1px solid #AAA;}
.promoted a { color:#F50;}
</style>
<script src="js/jquery-1.3.1.js" type="text/javascript"> </script>
<script type="text/javascript">
$(function(){ 								    
		var $needhide = $('ul li:gt(5):not(:last)');
		$needhide.hide();
		var $needbtn = $('div.showmore > a');
		$needbtn.click(function(){
			if($needhide.is(':visible')){
				$needhide.hide();
				$('.showmore a span').text('显示全部');
			}
			else{
				$needhide.show();
				$('.showmore a span').text('显示精简');
			}
		return false;
		})

})
</script>
</head>

<body>
<div class="SubCategoryBox">
<ul>
<li ><a href="#">佳能</a><i>(30440) </i></li>
<li ><a href="#">索尼</a><i>(27220) </i></li>
<li ><a href="#">三星</a><i>(20808) </i></li>
<li ><a href="#">尼康</a><i>(17821) </i></li>
<li ><a href="#">松下</a><i>(12289) </i></li>
<li ><a href="#">卡西欧</a><i>(8242) </i></li>
<li ><a href="#">富士</a><i>(14894) </i></li>
<li ><a href="#">柯达</a><i>(9520) </i></li>
<li ><a href="#">宾得</a><i>(2195) </i></li>
<li ><a href="#">理光</a><i>(4114) </i></li>
<li ><a href="#">奥林巴斯</a><i>(12205) </i></li>
<li ><a href="#">明基</a><i>(1466) </i></li>
<li ><a href="#">爱国者</a><i>(3091) </i></li>
<li ><a href="#">其它品牌相机</a><i>(7275) </i></li>
</ul>
<div class="showmore">
<a href=""><span>显示全部</span></a>
</div>
</div>
</body>
</html>

递归做的动作效果


 function animateIt() {
		  $("#mover").slideToggle("slow", animateIt);
	    }
		animateIt();

转义字符


<div id="id#b">bb</div>
<div id="id[1]">cc</div>


$("#id\\#b")
$("#id\\[1\\]")

手动重置页面元素


$("#reset").click(function(){
		  $("*").removeAttr("style");
		   $("div[class=none]").css({"display":"none"}); 
	  });

wzl454823

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery笔记$("1")——jQuery选择器

开始学习jQuery。以前没学习过js，大多都是改，现在感觉不够了，需要系统的了解一下。昨天去图书馆借了《锋利的jQuery》开始自学jQuery顺便学习下JS。开始讲了一些基础的东西，感觉就是在用$(“”)选择html里面的内容对其进行操作。想法比较简单，毕竟刚刚看嘛，做了第一个[b]jQuery的例子[/b]：[code="js"]1-1 ...
复制链接

扫一扫