jQuery选择器及事件

|-----jQuery选择器是jQuery的核心：$("选择器")：工厂函数

|-----基本选择器

n 基本选择器包括标签选择器、类选择器、ID选择器、并集选择器(,)和全局选择器

*：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>

|----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选择器属性选择器

|------过滤选择器素材

<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

$(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>

<br />

<br />

<br />

<input type="radio" value="男" />男  

<input type="radio" value="女" />女

<br />

<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>

<style>

#mydiv{

width:100px;

height:100px;

background-color: cornflowerblue;

/*定位*/

position:relative;

}

</style>

$(function(){

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

$("#mydiv").animate({left: "-50px"}, "slow");

});

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

$("#mydiv").animate({left: "+50px"}, "slow");

});

</script>

</head>

<body>

<br />

</body>

</html>

|-----追加样式：addClass(多个情况);

|-------hasclass

jQuery选择器及事件

猜你喜欢