Jquery的总结

Jquery的基本使用
  1. 导入核心js库
  2. 页面载入事件(程序入口)
  3. 确定标签派发的具体事件
  4. 根据Jq的选择器获取标签对象设置他的属性
Jquery的动画效果
  • 基本效果:hide(毫秒值)/show(毫秒值)
  • 滑动效果:slideDown(毫秒值)由上到下显示/slideUp(毫秒值)由下到上隐藏
  • 淡入淡出效果:fadeIn(毫秒值)淡入/fadeOut(毫秒值)淡出
    图片的显示,隐藏效果
Jquery的定时弹出和隐藏广告

定时弹出隐藏广告

Jquery的选择器
一、基本选择器
  • $("#id"):ID选择器
  • $(".class"):类选择器
  • $(“element”):标签选择器
  • $("*"):通配符选择器
  • $(“selector1,selector2”):并集选择器
$(function(){
	$("#btn1").click(function(){
		//id选择器
		$("#two").css("background-color","palegreen") ;
		//$(".mini").css("background-color","pink") ;//class选择器		
		//$("div").css("background-color","red") ;//元素选择器
	    //$("*").css("background-color","greenyellow") ;	//通配符选择器$
	    //$(".mini,span").css("background-color","palegreen") ;//并集选择器
	}) ;
}) ;
二、层级选择器
  • 子元素选择器:$(“selsecor1>selector2”),只找儿子
  • 后代选择器:$(“selsecor1 selector2”),儿子,孙子都找
  • 相邻兄弟选择器:$(“selsecor1+selector2”),selsecor1元素后相邻的元素,紧挨着的那个兄弟
  • Sibling选择器:$(“selsecor1~selector2”)selsecor1元素之后指定selector2元素,找到所有和表单同辈的元素,和相邻兄弟选择器相似,可以不紧挨着
$(function(){
	$("#btn1").click(function(){
		//后代选择器:selector1 selector2
		$("body div").css("background-color","palegreen") 		
	}) ;
	
	$("#btn2").click(function(){
//		子元素选择器:父元素>子元素,
$("body > div").css("background-color","palegreen") ;	
	}) ;
	
	$("#btn3").click(function(){
 	//选中id为的one相邻兄弟元素	,one之后的紧挨的一个
		$("#one+#two").css("background-color","red") ;
	}) ;	
	$("#btn4").click(function(){
		//sibling
		$("#two ~ #three").css("background-color","greenyellow") ;
	}) ;
	
三、基本过滤器
  1. 过滤掉第一个元素 $(“div”:first) 等价于$(“div”).first()
  2. 过滤掉当前页面中元素的数量是偶数位:even ;   奇数位:odd
  3. lt(index) 小于给定索引值的元素从0开始
  4. gt(index) 大于给定索引值的元素从0开始
  5. Jq语法给某个元素设置背景(background-color)
  6. 标签对象.css(“key”,“value”)
$(function(){
		$("#btn1").click(function(){			 
      //俩个方法一样
      // $("div:first").css("background-color","pink") ;
		 $("div").first().css("background-color","pink") ;
		}) ;
      //偶数
		$("#btn2").click(function(){		
		 $("div:even").css("background-color","pink") ;
		}) ;
      //奇数		
		$("#btn3").click(function(){
			 $("div:odd").css("background-color","pink") ;
		}) ;		
		/**

		 * Jquery:
		 * lt(index)	小于给定索引值的元素从0开始
		 * gt(index)大于给定索引值的元素从0开始
		 */
		$("#btn4").click(function(){		
			 $("div:gt(2)").css("background-color","pink") ;
		}) ;		
	}) ;
四、属性选择器
Jq的属性选择器和XML解析:dom解析 xpath技术类似
		[]:相当于定语,xxx的标签
	Jq:$("标签名称[href]") :将@标记去掉(指定属性名称)
	
	XML解析
	xpath:"//list[@id='xx']" :@没有省略
<script src="js/jquery-1.11.0.js"></script>
<script>
	$(function(){
		//$("标签名称[属性]")
		
//		$("a[href]").css("color","red") ;
		//可以指定多个属性
		//$("标签名称[属性1][属性2]")
		//$("a[href][title]").css("color","green") ;
		
		//指定多个属性,并且确定属性的值
		$("a[href][title='test']").css("color","red") ;
	});
</script>
	</head>
	<body>
	<a href="#">href 111</a><br />
	<a href="#" title="test">href 222</a>
	</body>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值