jQuery选择器及事件
|-----jQuery选择器是jQuery的核心:$("选择器"):工厂函数
|-----基本选择器
n 基本选择器包括标签选择器、类选择器、ID选择器、并集选择器(,)和全局选择器 *:body |
|-----层次选择器 素材
<section id="book"> <div class="imgLeft"><img src="images/store.jpg" alt="岛上书店"></div> <div class="textRight"> <h1>岛上书店【荐书联盟推荐】[The Storied Life of A.J.Fikry]</h1> <p class="intro">自营图书几十万畅销品种阶梯满减,抽奖赢魅蓝note3、JDRead阅读器!</p> <p id="author">[美] 加·泽文(Gabrielle Zevin) 著;孙仲旭,李玉瑶 译</p> <div class="price"> <div id="jdPrice">京东价: <span>¥24.10</span> [6.9折] <p>[定价:<span>¥35.00</span>]</p> (降价通知)</div> <p id="mobilePrice">促销信息:<span>手机专享价</span> <span>¥9.90</span></p> <dl> <dt>以下促销可在购物车任选其一</dt> <dd><span>加价购</span> 满99.00元另加6.18元即可在购物车换购热销商品</dd> <dd><span>满减</span> 满100.00减20.00,满200.00减60.00,满300.00减100.00</dd> </dl> <p id="ticket">领 券:<span>105-6</span> <span>200-16</span></p> </div> </div> </section> |
|----1:后代选择器
|-----属性选择器 [ ]
$(function(){ $("header").click(function(){ //$("a[href^='www']").css("background-color","yellow");//^= 以什么开头 //$("a[href$='html']").css("background-color","yellow");//$= 以什么结尾 $("a[href*='jd']").css("background-color","yellow");//*= 包含指定的内容 }); }); |
|----属性选择器可以支持多个的情况
$("a[href*='jd'][class='hot']").css("background-color","yellow");
|----属性选择器可以与层次选择配合使用
id选择器 属性选择器
|------过滤选择器 素材
<div class="contain"> <h2>祝福冬奥</h2> <ul> <li> 贝克汉姆:衷心希望北京能够申办成功!</li> <li> 姚明:北京申冬奥是个非常棒的机会!加油!</li> <li> 张虹:北京办冬奥,大家的热情定超乎想象! </li> <li> 肖恩怀特:我爱北京,支持北京申办冬奥会!</li> <li> 赵宏博:北京申办冬奥会是再合适不过了!</li> <li> 你喜欢哪些冬季运动项目?(点击进入调查页)</li> </ul> </div> |
|-------样式
*{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;} |
|-----first:第一个,从0开始 last:最后一个 not:过滤 even:偶数行 odd:奇数行
|-----判断 eq:等于 gt:大于 lt:小于
-----可见性过滤器
|-----转义 \\
$("#id\\#a");
$("#id\\[3\\]");
------表单 提供了过滤选择器
|-----表单过滤:作用:用来获取报表中的数据,text
<script> $(function(){ $("input[id='btn']").click(function(){ //获取多个文本值 var $txt=$(":text");//jQuery对象 //alert($txt); var tt=""; for(var i=0;i<$txt.length;i++){ //alert($txt[i].value);//jQuery对象与dom对象进行转换 tt+=$txt[i].value+" "; } var $rd=$(":radio"); for(var j=0;j<$rd.length;j++){ if($rd[j].checked){ alert("性别:"+$rd[j].value); } } $("#mydiv").html(tt); }); }); </script> </head> <body> <input type="text"/> <br /> <input type="text"/> <br /> <input type="text"/> <br /> <input type="radio" value="男" />男 <input type="radio" value="女" />女 <br /> <input type="button" value="表单测试" id="btn"/> <br /> |
--jQuery事件
-----mouseover mouseout
|-----键盘事件
|-----不同的浏览器,统一用event.keyCode
--绑定事件 和 移除事件
-bind(); 和 unbind();
------1:绑定单个事件
$("#mydiv").bind("click",function(){ alert("hello!"); }); |
|------2:绑定多个事件
$("#mydiv").bind({ click:function(){ $("#mydiv").width(300);//宽度方法 }, mouseover:function(){ $("#mydiv").css("background-color","yellow"); }, mouseout:function(){ $("#mydiv").css("background-color","greenyellow"); } }); |
|-------移除事件
---复合事件
-----hover事件:mouseover 和 mouseout
---toggle事件:连续点击
---如果toggle不带任何的参数,相当于show()和hide()组合
|-----toggleClass();
|-----多了检测的功能:检测div是否拥有类样式!
$(function(){ $("input[id='btn']").click(function(){ //如果存在(不存在)就删除(添加)一个类 $("#mydiv").toggleClass("cc"); }); }); |
|-----改变元素的透明度:fadein(); fadeout();
通过不透明度的变化来实现所有匹配元素的淡入效果,并在动画完成后可选地触发一个回调函数。
|-------slideup(); slidedown();改变元素的高度
|-----动画效果 animate
<html> <head> <meta charset="UTF-8"> <title></title> <style> #mydiv{ width:100px; height:100px; background-color: cornflowerblue; /*定位*/ position:relative; } </style> <script src="js/jquery-1.8.3.js"></script> <script> $(function(){ $("#left").click(function(){ $("#mydiv").animate({left: "-50px"}, "slow"); }); $("#right").click(function(){ $("#mydiv").animate({left: "+50px"}, "slow"); }); }); </script> </head> <body> <button id="left">向左</button> <button id="right">向右</button> <br /> <div id="mydiv"></div> </body> </html>
|
|-----追加样式:addClass(多个情况);
|-------hasclass