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选择器及事件相关推荐

jQuery的认识和使用（jQuery选择器、事件、遍历、效果）
修改时间:2021年1月27日作者:pp_x 邮箱:pp_x12138@163.com 文章目录 jQuery jQuery介绍 jQuery能做什么 jQuery的优势 jQuery的基础语法 j ...
11.jQuery选择器和事件
选择器://基本选择器#指定id //选择指定id对应的元素.指定类 //选择指定类对应的集合标签 //选择指定标签对应的集合选择器,选择器 //组合选择器选择器选择器 //后代选择器选择器> ...
JQuery中的事件和选择器
学习jQuery最应该了解的也就是JQuery中的事件和选择器. 那么常见的事件有哪些: 鼠标事件:mousedown鼠标按下,mouseup鼠标松开,mouseenter鼠标进入某个元素 mouse ...
jQuery随笔20190711~0713(选择器、事件、效果)
目录 1.jQuery简介 2.下载jQuery 3.jQuery选择器 4.jQuery事件 5.jQuery效果 1)隐藏和显示 2)淡入淡出 3)滑动 4)动画 5)停止动画 6)jQuer ...
【JavaLearn】（22）jQuery介绍、选择器、事件、动画、DOM编程、操作CSS、表单验证
目录 1. jQuery定义和特点 1.1 jQuery 入门 1.2 jQuery对象和DOM对象 2. jQuery 选择器 2.1 基本选择器 2.2 属性选择器 2.3 位置选择器 2.4 表 ...
【JavaLearn】#（22）jQuery介绍、选择器、事件、动画、DOM编程、操作CSS、表单验证
1. jQuery定义和特点 1.1 jQuery 入门对 JavaScript 进行了封装,降低了使用JavaScript的难度,可以大幅提高开发效率(Write less, do more) j ...
jQuery入门、选择器、事件、静态方法、动画
目录第一章-jQuery基础知识 1.jQuery入门 1.1.jQuery介绍 1.2.jQuery安装 1.3.jQuery函数 1.4.jQuery对象 2.jQuery选择器 3.jQuer ...
jQuery 效果函数，jquery文档操作，jQuery属性操作方法，jQuerycss操作函数，jQuery参考手册-事件，jQuery选择器
jQuery 效果函数方法描述 animate() 对被选元素应用"自定义"的动画 clearQueue() 对被选元素移除所有排队的函数(仍未运行的) delay() 对被选 ...
1.jQuery基础语法 2.jQuery选择器、操作页面文档元素 3.jqueryDOM操作 4.jqueryCSS操作 5.Jquery事件 6.Jquery动画...
这周的学习让我初步了解到JQuery作为js库的封装的伟大性.Write less Do more 才是我们真正应该做到的! 1.jQuery基础语法 · 链式编程 $("#div1&quo ...

jQuery选择器及事件

jQuery选择器及事件相关推荐

最新文章

热门文章