odd").css("background-color", "#bbbbff"); 子元素伪类选择器 子元素伪类选择器就是选择某一个元素下面的子元素的方式，在jQuery中，子元素伪类选择器分为两大类...事件名称 触发方式 返回值 keydown 在键盘上按下某键时触发，一直按一直触发 返回键盘代码 keypress 在键盘上按下一个能产生字符的按键时触发 返回ASCII码 keyup 松开某一键时触发...返回键盘代码 jQuery的事件处理 1. jQuery常用的事件方法 鼠标操作事件 方法 描述 mousedown() 鼠标的键被按下 mouseenter() 当鼠标指针进入目标时 mouseleave...绑定与接触事件 绑定事件 绑定事件就是将页面中的元素事件类型与其在收到该事件之后期望进行的操作联系到一起。...trigger(type,[data])函数式jQuery提供的事件触发器之一，其作用是对页面上所有匹配的元素触发某一类型的事件。
() "请输入关键字" CSS 1.addClass（为每个匹配的元素添加指定的类名） 111 $('span').addClass('c1'...) 2.removeClass（从所有匹配的元素中删除全部或者指定的类） 111 $('span').removeClass...).mouseup() //元素上放松鼠标按钮时触发事件 $("p").mousemove() //当鼠标指针在指定的元素中移动时触发事件 $("p").mouseover() //当鼠标指针位于元素上方时触发事件...$("p").mouseout() //当鼠标指针从元素上移开时触发事件 $(window).keydown() //当键盘或按钮被按下时触发事件 $(window).keypress(...").select() //当input 元素中的文本被选择时触发事件 $("form").submit() //当提交表单时触发事件 $(window).unload() //用户离开页面时
遍历、组合 add(expr) 在原对象的基础上在附加符合指定表达式的jquery对象 HelloHello Again 的对象，所有一共有3个，从上面的函数运行结果可以看到$("p").add("span")是3个对象的集合，分别是[Hello]，[<span...add(el) 在匹配对象的基础上再附加指定的dom元素。...为a的层上时图层增加一个red样式，离开层时移出red样式 bind(type, fn) 用户将一个事件和触发事件的方式绑定到匹配对象上。...(fn) unclick(fn) click(fn)：增加一个点击时触发某函数的事件 click()：可以在其他事件中执行匹配对象的click事件。
) 方法描述：为 JavaScript 的 “resize” 事件绑定一个处理函数，或者触发元素上的该事件。...2. scroll() 方法描述：为 JavaScript 的 “scroll” 事件绑定一个处理函数，或者触发元素上的该事件。...需求描述：要求移除上一节中设置的事件委托，然后在分别点击 li 进行验证是否移除事件委托 1111 2222 3333</li...注意： mouseenter 事件和 mouseover 的不同之处是事件的冒泡的方式。 mouseenter 事件只会在绑定它的元素上被调用，而不会在后代节点上被触发。...注意： mouseleave 事件和 mouseout 的不同之处是事件的冒泡的方式。 mouseleave 事件只会在绑定它的元素上被调用，而不会在后代节点上被触发。
> content3 1.1.2 效果图 1.1.3 扩展 实例html代码中 <div id="aa...类来显示在面板中的16x16图标 null width 数字 设置面板的宽度 auto height 数字 设置面板的高度 auto left 数字 设置面板左侧位置 null top 数字 设置面板的顶部位置...href 字符串 一个远程的URL加载数据，然后显示在面板中 null loadingMessage 字符串 当加载远程数据时，在面板中显示的信息 Loading… 10.3 事件 名字 参数 描述...，该节点参数包含以下属性： id:节点ID text:节点的文本 attributes:节点自定义属性 target:点击DOM对象的目标 onDblClick node 用户双击一个节点时触发，参数同...此例最外层写在了body上，也可以写在某个div上。
，在3.x版本的jQuery中则没有这个问题。...阻止冒泡事件的方法：在我们希望触发的标签的事件函数中加： e.stopPropagation; //问题的演示 div p ...--为每一个li标签添加c1类--> 注意: jQuery的方法返回一个jQuery对象，遍历jQuery集合中的元素 - 被称为隐式迭代的过程。...终止each循环 return false； 3.9.2.data() 在匹配的元素集合中的所有元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。....data(key, value): 描述：在匹配的元素上存储任意相关数据。这里存储的值是不可见的。
var domObject2 = $('div').get(0) 2.1 jQuery选择器 2.1.1 基础选择器 名称 用法 描述 ID选择器 $(’#id’) 获取指定ID的元素 全选选择器 $(...3.切换类 $("div").toggleClass("current"); 在原生js中className会覆盖类名，在jQuery中指操作指定类名，不影响原先的类名 3.2 jQuery效果...div加定位，否则无效 3.2.5 事件切换 jQuery中有hover()事件，功能类似于css中的hover hover(function,function) 传入2个参数，第一个参数是鼠标移入是触发的函数...>123 $('div').html('ljc'); //div中只剩ljc 普通元素文本内容 只会获取文本的内容，不会获取标签 表单的值 val() console.log...('click','li') 只触发一次的事件 $('div').one('click',function(){}) 5.1.3 tigger()自动触发事件 // 会触发元素的默认行为 $("div"
方法 描述 addClass() 向匹配的元素添加指定的类名。 after() 在匹配的元素之后插入内容。 append() 向匹配元素集合中的每个元素结尾插入由参数指定的内容。...appendTo() 向目标结尾插入匹配元素集合中的每个元素。 attr() 设置或返回匹配元素的属性和值。 before() 在每个匹配的元素之前插入内容。...prependTo() 向目标开头插入匹配元素集合中的每个元素。 remove() 移除所有匹配的元素。 removeAttr() 从所有匹配的元素中移除指定的属性。...) 28 span 29 30 31 32 33 div (祖父) 34 p (直接父) 35 span 36 37 38 </div
> 你可以在JQuery的ready方法中调用dropdown方法： <!...Bootstrap为下拉插件提供了一些附加事件,它们是： show.bs.dropdown: 这个事件在句柄被单击时触发;下拉句柄收到请求去显示隐藏菜单； shown.bs.dropdown: 这个事件在菜单被显示时触发...； hide.bs.dropdown: 这个事件在菜单关闭前触发； hidden.bs.dropdown: 这个事件在菜单关闭后触发； show或hide事件在完成请求之前发生，而在请求完成时触发shown...让我展示一个如何使用这些事件的例子。我已经写了下面的JQuery代码片段去监听所有的下拉插件状态，并打印每个事件触发时的状态。 <!...该插件在任何DOM元素中侦听滚动，并根据元素的滚动位置在导航栏中突出显示菜单项。 基本上，它是一个双组件的插件;它由一个导航条和一个内容区域组成。内容区域划分为多个部分，每个部分都有一个惟一的ID。
与scrollLeft offset方法与position方法 jQuery事件机制 jQuery事件发展历程(了解) on注册事件(重点) 事件解绑 触发事件 jQuery事件对象 jQuery补充知识点...基本选择器 名称 用法 描述 ID选择器 $(“#id”); 获取指定ID的元素 类选择器 $(“.class”); 获取同一类class的元素 标签选择器 $(“div”); 获取同一类标签的所有元素...最现代的方式，兼容zepto(移动端类似jQuery的一个库)，强烈建议使用。 on注册简单事件 // 表示给$(selector)绑定事件，并且由自己触发，不支持动态绑定。...() { //需求:给tab栏的每一个li标签设置鼠标移入事件: 当前li添加active类,其他的兄弟li移除active类. // 找到当前tab栏索引一致的div,让他添加 selected...类,其他的兄弟div移除selected类.
...中each静态方法和map静态方法的区别 1.each静态方法默认的返回值就是，遍历谁就返回谁 map静态方法默认的返回值是一个空数组 2.each静态方法不支持在回调函数中对遍历的数组进行处理...我是div中的span $(function()...应该在该标签中添加一个子标签span， 然后用trigger时，直接触发子标签span即可， 否则只能触发事件，不能触发默认行为...中如果通过核心函数找到的元素不知一个，那么在添加事件的时候，jQuery 会遍历所有找到的元素，给所有找到的元素添加事件 */
3.2.1、通过id获取元素 在CSS中经常使用id来控制元素，在jQuery中获取元素时，也使用同样方法。与CSS一样，在id前面加上#号。...在jQuery中，可以获取同一类名的多个HTML元素，编写方式同CSS，即在类名的前面加上点号。...，如 $('span') //所有的span结点，一个包装集 $('p span') //p标签下的所有span节点，后代节点 $('p>span'...,触发 blur事件 $("button").mousedown()//当按下鼠标时触发事件 $("button").mouseup() //节点上放松鼠标按钮时触发事件 $("p").mousemove...() //当鼠标指针在指定的节点中移动时触发事件 $("p").mouseover() //当鼠标指针位于节点上方时触发事件 $("p").mouseout() //当鼠标指针从节点上移开时触发事件
$("div").find("*"); 返回 的所有后代 3.jQuery遍历-同胞(siblings) 同胞拥有相同的父元素.通过jQuery,您能够在DOM树中遍历元素的同胞元素...jQuery在进行值获取时,只会返回第一个元素对应的值. 1.3 操作样式类名(jQuery获取并设置 CSS 类): $("#div1").addClass("divClass2") //为...主动触发事件: 可使用jquery对象上的trigger方法来触发对象上绑定的事件....; }); 触发hello事件 element.trigger("hello"); 事件冒泡: 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序...$("#div1").load("demo_test.txt #p1"); 把"demo_test.txt"文件中id="p1"的元素的内容,加载到指定的元素中.
web前端 Jquery 时隔几天，天气依旧炎热，不过坐在空调房里的我一点也感觉不到~(笑)。我的事也在稳步进行着，这个下午继续我上一篇的Jquery。 ...事件详解 在很多Jquery代码中，我们总是能看到是这样的形式： $(document).ready(function(){ //Jquery代码 }); 所有的代码被套在了最外层的...事件是什么概念，和很多编程一样，事件是由用户在执行相应的操作后自动触发的一个过程，我们可以给某事件绑定一个处理函数，当用户触发了这个事件后，就能执行我们绑定的函数。 ...我也列举一些常用的html操作方法（更详细地在w3school中查看） 方法 举例 例子说明 html() var txt = $("div#main").html(); id=main的div元素，...' prepend() $("div#main").prepend('leavesongs.com'); 向id=main的div元素中，在最前端增加内容 attr() $("table").
touchmove：当手指在屏幕上滑动时连续触发。通常我们再滑屏页面，会调用event的preventDefault()可以阻止默认情况的发生：阻止页面滚动。...touchend：当手指离开屏幕时触发。 touchcancel：系统停止跟踪触摸时候会触发。例如在触摸过程中突然页面alert()一个提示框，此时会触发该事件，这个事件比较少用。...2、event事件 originalEvent：（原生事件）是jquery封装的事件。� targetTouches：目标元素的所有当前触摸。...三、响应式开发 1、什么是响应式开发 在移动互联日益成熟的时候，我们在桌面浏览器上开发的网页已经无法满足移动设备的阅读。 通常的做法是针对移动端单独做一套特定的版本。...text-center"> 6 hidden类：设置在不同的屏幕下隐藏。
应是selector的祖辈元素，selector触发的事件可以被其祖辈元素在事件流中捕获，从而以"代理"的形式触发事件。...同样以初始HTML代码为例，我们可以编写如下jQuery代码： // 为div中的所有p元素绑定click事件处理程序 // 只有n2、n3可以触发该事件 $("div").on("click", "p...); } }); 11,trigger trigger()函数用于在每个匹配元素上触发指定类型的事件。...12,triggerHandler triggerHandler()函数用于在每个匹配元素上触发指定类型的事件。...是支持冒泡的，当我们把鼠标光标放入文本框时，该事件冒泡传递到父元素p上，因此可以在p元素上触发focusin事件。
再看看其他操作样式的类名吧： // 为id为div1的对象追加样式divClass2 $("#div1").addClass("divClass2") // 移除id为div1的对象的class名为...html('xxx'); jquery 中获取或者设置某个属性值时可以使用如下方法： // 取出图片的地址 var $src = $('#img1').prop('src');...@#$%^&*]{6,20}$/; //手机号码验证： var rePhone = /^1[34578]\d{9}$/; 3.高级 3.1 事件冒泡 先来看看什么是事件冒泡： 在一个对象上触发某类事件...答：事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。... 2、 prepend() 和 prependTo()：在现存元素的内部，从前面放入元素 3、 after() 和 insertAfter()：在现存元素的外部
>元素下的子元素 $("prev+next") $('.one+div')选取class为one的下一个元素 $("prev~siblings") $('#two~div')选取id...在jQuery中，通常事件绑定是通过bind(type[,data],fn)方法实现的，其第一个参数为事件类型，非常丰富，包括blur,focus,load,resize,unload,click,dblclick...事件冒泡就是当页面上有个元素时，其中一个嵌套在另一个中，如果均绑定了click事件，那么触发内层元素的click事件时，会同时触发外部的click事件。...这样的机制在有时是需要的，但有时却不是期望的，那么就绪要通过event.stopPropagation()方法来禁止事件的冒泡了， 此外，在jQuery中，可以通过event.preventDefault...需要注意的，jQuery实际上对event进行了封装，以屏蔽不同浏览器的差异，event.target用于获取触发事件的元素，.relatedTarget获取相关元素(mouseover,mouseout
选择器 基本选择器的语法：$("选择器").action(); 2.1 基本选择器 名称 语法 说明 标签选择器 element 选取指定标签名的元素 类选择器 .class 选取指定类名的元素 ID选择器...方法,必须是转化为jQuery节点 alert($(this).html()); //$(this)转换为jQuery节点 }); 3.6.5 end() 结束当前链条中的最近的筛选操作，并将匹配元素集还原为之前的状态...() 鼠标离开被选元素是会触发 鼠标在其被选元素的子元素上来回进入时，不触发 4.1.2 键盘事件 方法 说明 keydown() 键盘按下事件 keyup() 键盘弹起事件 keypress 产生可打印的字符事件...随着鼠标的点击自动切换函数 toggleClass(类名) 相当于addClas("类名")，removeClass() 4.4 jQuery 动画效果 4.4.1 控制元素的显示及隐藏 方法 说明...bannerFlog = false; }); //开启自动轮播 setInterval(function(){ // 判断当前是不是鼠标在某个轮播图片的数字上
install jquery 2.入口函数介绍 2.1window.onload事件的问题 在之前DOM课 中咱们已经说过用window的onload事件作为JS代码的入口，时机并不好。...因为window.onload事件是在页面的图片、第三方脚本、样式等都下载和加载完成后才会触发。而我们希望是页面的HTML的文档树对象可进行交互就立即绑定DOM的事件和做一些初始化工作。...描述 ID选择器 $("#id"); 获取指定ID的元素 全选选择器 $('*'); 匹配所有元素 类选择器 $(".class"); 获取同一类class的元素 标签选择器 $("div"); 获取同一类标签的所有元素...可以通过 原型上的click方法进行绑定点击事件。...// 点击了当前行， 那么让当前行 背景高亮，让其他的兄弟节点背景不高亮。 // jQuery的事件处理程序中。 this依然指向 绑定事件dom对象。
领取专属 10元无门槛券
手把手带您无忧上云
