1、关于页面元素的引用 通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对 象(集合对象),不能直接调用dom....innerHTML; 3、如何获取jQuery集合的某一项 对于获取的元素集合,获取其中的某一项(通过索引指定)可以使用eq或get(n)方法或者索引号获取,要注意,eq返回的是jquery对象,而...对于jquery对象只能使用 jquery的方法,而dom对象只能使用dom的方法,如要获取第三个元素的内容。...$("#msg").click(fn); //为id为msg的元素单击事件添加函数 同样blur,focus,select,submit事件都可以有着两种调用方法 5、集合处理功能 对于jquery...如: $("#msg")[0],$("div").eq(1)[0],$("div").get()[1],$("td")[5] 这些都是Dom对象,可以使用Dom中的方法,但不能再使用jQuery的方法
元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用dom定义的方法。...如:$("#msg")[0],$("div").eq(1)[0],$("div").get()[1],$("td")[5]这些都是dom对象,可以使用dom中的方法,但不能再使用Jquery的方法。...(0).innerHTML; 3、如何获取jQuery集合的某一项 对于获取的元素集合,获取其中的某一项(通过索引指定)可以使用eq或get(n)方法或者索引号获取,要注意,eq返回的是jquery...对于jquery对象只能使用jquery的方法,而dom对象只能使用dom的方法,如要获取第三个元素的内容。...同样blur,focus,select,submit事件都可以有着两种调用方法 5、集合处理功能 对于jquery返回的集合内容无需我们自己循环遍历并对每个对象分别做处理,jquery已经为我们提供的很方便的方法进行集合的处理
鼠标单击事件 click 鼠标进入事件 mouseover 鼠标离开事件 mouseout 鼠标移动事件 mousemove 4.1.6. jQuery操作CSS l通过jQuery可以很方便的来操作...'); 升级版: 牛逼版: 2)删除类 -删除一个类 removeClass(class)删除某个元素的一个 CSS 类 $('div').removeClass('myClass1'); -...删除多个类 removeClass(class1 class2 class3…)删除某个元素的多个 CSS 类 $('div').removeClass('myClass1 myClass2');...; offset().top; position()获取某个元素相对于父元素的偏移位置 position().left position().top 4.1.7.2.操作HTML l使用jQuery...p $(“div~p”) 选取紧跟后的兄弟元素中的所有p 间接后代: 直接后代: 紧跟第一个兄弟: 选取紧跟后面所有兄弟元素 【注意点】:一定是紧跟着(紧挨着)的,中间不能有插队!!!
//JQuery中目前有两个合成事件hover(),toggle();你可以这样理解:合成事件就是可以触发两个函数的事件 //...,第二次单击隐藏,同样可以用合成时间toggle(),这个时候的a也不会跳转 $(function(){ $(“a”).toggle(function(){ $(this).next().show();...//这是第一次单击后的操作,当然你可以给这个标题搞个背景色。...使用addClass(),再次单击就用removeClass去掉就可以 },function(){ $(this).next().hide(); }) }); 3、 事件冒泡示例代码...(){ alert(“子元素事件被激活”); }); });*/ //单击b包含的内容会激活两个事件,这样怎么才能解决?
dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用dom定义的方法。...如:$("#msg")[0],$("div").eq(1)[0],$("div").get()[1],$("td")[5]这些都是dom对象,可以使用dom中的方法,但不能再使用Jquery的方法。....innerHTML; 3、如何获取jQuery集合的某一项 对于获取的元素集合,获取其中的某一项(通过索引指定)可以使用eq或get(n)方法或者索引号获取,要注意,eq返回的是jquery对象,而...对于jquery对象只能使用jquery的方法,而dom对象只能使用dom的方法,如要获取第三个 元素的内容。...(fn); //为id为msg的元素单击事件添加函数 同样blur, focus, select, submit事件都可以有着两种调用方法 5、集合处理功能 对于jquery返回的集合内容无需我们自己循环遍历并对每个对象分别做处理
JQuery 一.JQuery基础语法 1.概念 JQuery是javaScript的一个库,Jquery基于javascript开发出来。目的就是为了简化javascript的开发。...():增加元素的样式,addClass("样式名") removeClass():移除元素的样式,removeClass('样式名') 总结: 1.基本选择器,重点前3个;id 类样式 标签;其他了解即可...Click事件 3.1 jQuery基础事件 3.1.1 鼠标事件 方法 描述 执行时机 click( ) 触发或将函数绑定到指定元素的click事件 单击鼠标时 mouseover( ) 触发或将函数绑定到指定元素的...,则先把两个匿名函数写出来; $("td").hover( //addClass/removeClass,也可以用.css(属性,值); function(){$(this)....(){ //来获取一下src,这个图片的路径信息;好处:可以得到路径信息, //将来可以修改.
jQuery 语法是为 HTML 元素的选取编制的,可以对元素执行某些操作。...对象(集合对象),不能直接调用dom定义的方法。...对于获取的元素集合,获取其中的某一项(通过索引指定)可以使用eq或get(n)方法或者索引号获取,要注意,eq返回的是jQuery对象,而get(n)和索引返回的是dom元素对象。...对于jQuery对象只能使用jQuery的方法,而dom对象只能使用dom的方法,如要获取第三个元素的内容。...$('#msg').click(); // 触发 id 为 msg 的元素的单击事件 $('#msg').click(fn); // 为 id 为 msg 的元素的单击事件添加函数 如果选中多个元素,
一、事件概述 事件的基本概念 上一章我们讲解了使用jQuery选择器获取元素,并通过一些方法来操作元素,本章我们讲解事件的概念,通过事件我们可以加强用户与浏览器的交互性,例如可以实现当用户点击某个元素的时候...二、鼠标单击事件 我们先来将最常用的鼠标单击事件click,jQuery的基本语法如下所示: 1 $("selector").click(function(){ 2 //事件触发执行的代码 3...}) 我们先通过$(“selector”)选择器获取元素,然后通过click为元素定义事件,这样当我们用鼠标单击这个元素的时候,就会执行花括号中的代码。...下面的代码可以让我们判断是第几个元素触发了事件,当点击时会输出对应的下角标。...,我们可以通过数组的下标来获取数组中的元素。
xx,父级执行了命令 find选中子集执行了命令 下面的选择器很重要 .parent()选择元素的父元素 可以先用一个this,然后找到这个元素的父级。....children()选择元素的所有子元素 括号里面放具体的哪一个子集。...; 别人 其他的button不能是绿色 // 这个this -- 会自动检索事件发生的目标 -- jq $(this) $(this)...,运动曲线,回调函数三个参数,但这三个参数可以可以不写 fadeTo() 设置透明度,参数一是时间,参数2是透明度0-1的数值。...***事件属性 click() 鼠标单击 ready() DOM加载完成 blur() 元素失去焦点 focus()元素获得焦点 submit()用户提交表单 hover()同时为mouseenter
4.JQuery好处: jQuery是免费、开源的,jQuery的语法设计可以使开发更加便捷,例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。...Jquery 的初体验 需求:使用Jquery和javascript给一个按钮绑定单击事件 注意:使用Jquery之前要将第三方jar包导入 jquery对象不能使用dom对象的属性和方法 var divObj = document.getElementById("testDiv"); // jquery对象也不能使用dom对象的属性和方法...("testDiv"); //dom对象不能使用jquery对象的方法 divObj.onclick = function(){ alert(1); } Dom对象和Jquery对象互转dom对象转化为...}); $('#btn04').click(function(){ //offset() - 返回第一个匹配元素相对于文档的位置。
中有一个addClass方法,可以给标签添加类样式,相对的removeClass方法则是删除标签中的类样式: "); }); val方法可以返回或设置被选元素的值,元素的值是通过 value 属性设置的。该方法大多用于 input 元素。...jQuery的显示/隐藏效果 show方法可以显示某个组件,hide方法则可以隐藏某个组件: 可以设置元素从隐藏到完全可见的速度,可以直接传递毫秒数,也可以传递字符串:slow、normal、fast等。...,如果被选元素可见,则隐藏这些元素,如果被选元素隐藏,则显示这些元素,同样的可以设置过程时间和回调函数: <!
如何使用jQuery来检测右键和左键的鼠标单击两种情况: $("#someelement").bind('mousedown', function(e) { if( (navigator.userAgent.indexOf...('blind', {}, 500) }, 5000); //而这是在1.4中可以使用delay()这一功能来实现的方式(这很像是休眠) $(".mydiv").delay(5000).hide('blind...在jQuery中如何测试某个元素是否可见 if($(element).is(':visible') == 'true') { //该元素是可见的 } 16....如何把一个元素放在屏幕的中心位置: jQuery.fn.center = function() { this.css('position','absolute'); this.css('top',...在jQuery中如何使用.siblings()来选择同辈元素 // 不这样做 $('#nav li').click(function(){ $('#nav li').removeClass('active
jQuery 判断元素上是否绑定了事件 //jQuery event封装支持判断元素上是否绑定了事件,此方法只适用于jQuery绑定的事件 var $events = $("#foo").data("events...jQuery就不需要花费更多的时间来搜索 //你想要的元素。...还要记住的一点是, //针对于你的页面上的元素的操作越具体化, //就越能降低执行和搜索的时间。...它存在…… } 如何使用jQuery来检测右键和左键的鼠标单击两种情况: $("#someelement").live('click', function(e) { if( (!...1.4中可以使用delay()这一功能来实现的方式(这很像是休眠) $(".mydiv").delay(5000).hide('blind', {}, 500); 如何把已创建的元素动态地添加到DOM
说白了就是定义好的一个 JS 文件,内部封装了很多功能,可以大大简化我们的 JS 操作步骤。 jQuery 官网:https://www.jquery.com。 要想使用,必须要引入该文件。...jQuery 的核心语法 $(); 2、JQuery基本语法 2.1、JS对象和JQuery对象转换 jQuery 本质上虽然也是 JS,但如果想使用 jQuery 的属性和方法那么必须保证对象是 jQuery...对象,而不是 JS 方式获得的 DOM 对象,二者的 API 方法不能混合使用,若想使用对方的 API,需要进行对象的转换。...3、JQuery选择器 3.1、基本选择器 选择器:类似于 CSS 的选择器,可以帮助我们获取元素。 例如:id 选择器、类选择器、元素选择器、属性选择器等等。...,可以帮助我们获取元素。
两行代码有相同的部分,那么可以考虑使用链式编程。 <!...() $(this).addClass('active').siblings().removeClass() // 显示内容 三个div -- 获取到鼠标移入的菜单的下标...-1.12.4.min.js"> $(function(){ // 单击一级菜单.../js/jquery-1.12.4.min.js"> $(function(){ // 左侧的span单击,隐藏left.../ $('.right span').click(function(){ // $('.right').hide(500) // }) // 单击
需求说明: 在页面中有一个图片和一个关闭按钮 当滚动条向下或向右移动时,图片和关闭按钮随滚动条移动,相对于浏览器的位置固定 单击“关闭”按钮时,页面中的图片和关闭按钮不显示 可以增加许多相同的图片上传的行 关键代码: up.onclick = function() {...选择器 上机练习1 制作图书简介页面 需求说明: 根据提供的素材,在图书简介页面上增加jQuery代码,使用基本选择器和层次选择器,获取并设置页面元素 “自营图书几十万”……一行字体颜色为红色 京东价...美化英雄联盟简介页 需求说明: 单击p元素后,设置class为txt_box的元素的内class为current的元素的背景颜色为#6ff,p的组他不是有span的背景颜色为#f9f,紧邻好h1后的...“非缘勿扰”dd元素中有id属性的span元素的文本{主演,导演,标签,剧情}颜色值为#ff0099,字体加粗 单击文本“导演”,文字“赖水清”为加粗 单击文本“标签”他之后的“苏有朋”和“2013”的背景颜色为
); }); //单击a标签Dragging //实现思想:1.单击标签时将追加至...” + tmpDragingNodeUlId).append($(currentDrageLiId)); //移动前:同级->在源节点当前拖拽时的前个元素变为最后元素图标切换...currentDrageLiId)).insertAfter($(“#” + tmpDragingNodeAId)); //移动前:同级->在源节点当前拖拽时的前个元素变为最后元素图标切换... } } //移动后:目标父节点切换图标、目录图标【不能移入自身的子节点...不然鼠标移上节点又显示原来拖拽时的样式 【移动后(移除)再移上鼠标不能显示样式bug NOTDO】 $(“a”).unbind(“mouseover”).unbind
真正使用的时候,后台只需要传data到前端,加载到页面就ok了。 这里面依赖了JQuery、XBGMenuTree.css、XBGMenuTree.js。 JQuery文件没什么好说的。...主要有这几点: (1)$(function() {}); 当文档载入完毕就执行的意思 (2)jQuery插件开发分为两种: 1、 类级别 类级别你可以理解为拓展jquery类,最明显的例子是$.ajax...(1)比如一些位置的知识: jquery获取元素位置的方法有两个: position方法: 获取匹配元素集中第一个元素的坐标,获取的是该元素相当于最近的一个拥有绝对或者相对定位的父元素的偏移位置。...使用: $("#target").position().left; $("#target").position().top; offset方法: 获取匹配元素集中第一个元素的坐标,获取的是该元素相对于...使用: offset方法: 获取匹配元素集中第一个元素的坐标,获取的是该元素相对于document对象的偏移位置。 使用: (2)CSS 伪元素 ?
jQuery选择器 jQuery的基本用法 jQuery.js”> 单击鼠标时运行脚本 dblclick:当双击鼠标时运行脚本 mousedown:当按下鼠标按钮时运行脚本 mousemove:当鼠标指针移动时运行脚本 mouseout:当鼠标指针移出元素时运行脚本...(selector).index() – 返回指定元素相对于其他指定元素的 index 位置。...返回元素集合的函数都可以传传参数筛选,比如:parents()、siblings()、nextAll()、prevAll()、siblings()。...(selector).addClass() – 向被选元素添加一个或多个类 (selector).removeClass() – 从被选元素删除一个或多个类 (selector).toggleClass