它的主旨是以更少的代码实现更多的功能（Write less,do more） jQuery 基本功能 访问和操作 DOM 元素 对页面事件的处理 大量插件在页面中的运用 与 Ajax 技术的完美结合...jQuery的操作按钮，当点击jQuery按钮后会显示图片。 ...再次点击jQuery按钮即可将加载的图片收回。 示例二： (1). Onmouseover事件是指将光标移至元素上产生的事件。 (2)....元素集合 :eq(index) 获取索引值等于 index 的元素，索引号从 0 开始 单个元素，如 $(“li:eq(1)”) 获取索引等于 1 的 元素 :gt(index) 获取索引值大于... index 的元素，索引号从 0 开始 元素集合，如 $("li:gt(1)") 获取索引大 于但不包括 1 的 元素 :lt(index) 获取索引值小于 index 的元素，索引号从 0
input:not(:checked)") :even 选取所有元素中偶数索引的元素，从 0 开始计数 $("tr:even") ----- 选取奇数元素 :odd 选取所有元素中奇数索引的元素 ，从0...slideDown(speed, [callback]) 概述 通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。...这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式显示出来。在jQuery 1.3中，上下的padding和margin也会有动画，效果更流畅。...² 对所有既有id又有class属性div元素，添加一个点击事件，打印div标签中内容 <script type="text/javascript" src=".....⑦：子元素过滤选择器 对某元素<em>中</em><em>的</em>子元素进行选取 :nth-child(index/even/odd) 选取<em>索引</em>为index<em>的</em>元素、<em>索引</em>为偶数<em>的</em>元素、<em>索引</em>为奇数<em>的</em>元素 ----- index 从1开始
jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。...对象[索引] 或者 JQuery对象.get(索引) * JS --> JQuery ： $(JS对象) //1.通过js方式来获取名称叫做div的所有html元素对象 var divs = document.getElementsByTagName("div...html("fff"); } //2.通过JQuery方式来获取名称叫做div的所有html对象 var $divs = $("div"); alert($divs.length...}); }*/ //JQuery入口函数(dom文档加载完成之后执行该函数中的代码) $(function () { //1.获取
('div').hide(); }); jQuery对象和DOM对象 用原生js获取来的对象是DOM对象，用jQuery方法获取过来的对象是jQuery对象。...---- jQuery 效果 可在API文档中查询具体用法：https://jquery.cuishifeng.cn/ jQuery 封装了很多动画效果，例如： 1.显示隐藏效果 1.显示 //（1）...//（3）fn:回调函数，在动画完成时执行的函数，每个元素执行一次 hide([speed,[easing],[fn]]);//中括号表示可以省略此参数，无动画直接显示 3.切换显示和隐藏 toggle...（也可以把绑定事件的on()改为one()表示事件只触发一次） $("p").off(); // 解绑p元素所有事件处理程序 $("p").off( "click"); // 解绑p元素上面的点击事件...可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发。
语法如下：$(“.test”) 实例：用户点击按钮后所有带有 class=”test” 属性的元素都隐藏： $(document).ready(function(){ $("button").click...如：$('li.odd') :first 选取第一个元素，如：$('li:first') :gt(n) 选取结果集中索引大于n的元素，n可以为负值，如：$(':gt(3)') :lt(n) 选取结果集中索引小于...n的元素，n可以为负值，如：$(':lt(3)') :header 选取所有的标题元素，例如 h1、h2、h3…，如：$(':header') :lang() 选取指定语言的所有元素，，如：$('div...") //匹配所有可见元素 :hidden选择所有隐藏的元素，如：$("div:hidden").show(3000)); :visible选择所有隐藏的元素，如： $("div:visible...该事件方法在 jQuery 语法 章节中已经提到过。 click() click() 方法是当按钮点击事件被触发时会调用一个函数。 该函数在用户点击 HTML 元素时执行。
;步长) jq的遍历方式 jq对象.each(callback) 语法： jquery对象.each(function(index,element){}); index:就是元素在集合中的索引 element...：就是集合中的每一个元素对象 this：集合中的每一个元素对象 回调函数返回值： true:如果当前function返回为false，则结束循环(break)。...function adShow() { //获取广告div，调用显示方法 $("#ad").show("slow"); } //隐藏广告 function adHide()...给开始按钮绑定单击事件 1.1 定义循环定时器 1.2 切换小相框的src属性 * 定义数组，存放图片资源路径 * 生成随机数。数组索引 2....:22px"> 插件：增强JQuery的功能 实现方式： $.fn.extend(object) 增强通过Jquery获取的对象的功能 $(“#id”) $.extend
语法： jquery对象.each(function(index,element){}); * index:就是元素在集合中的索引...* element：就是集合中的每一个元素对象 * this：集合中的每一个元素对象 2....分析发现JQuery的显示和隐藏动画效果其实就是控制display 3....function adShow() { //获取广告div，调用显示方法 $("#ad").show("slow");.... $.fn.extend(object) * 增强通过Jquery获取的对象的功能 $("#id") 2. $.extend(object)
$("input:not(:checked)") :even 选取所有元素中偶数索引的元素，从 0 开始计数 $("tr:even") ----- 选取奇数元素 :odd 选取所有元素中奇数索引的元素... $("tr:gt(0)") :lt(index) 选取索引小于指定index的元素 $("tr:lt(2)") :header 选取所有的标题元素 如：h1, h2, h3 $(":header...> slideDown(speed, [callback]) 概述 通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。.../jquery-1.8.3.min.js"> // 点击一个button，动态设置 div的属性 id name class...p元素中内容 $("p").one("click",function(){ alert($(this).text()); }); //页面内有两个按钮，点击按钮1， 触发按钮2的 click事件执行
div" onclick="hideFn()"> <div id="showDiv" style="width:300px;height:300px;background...2 JQuery遍历 js的遍历方式是使用for循环，JQuery提供了三种遍历方式： 1）JQuery对象.each(callback)：回调函数中的参数 index（索引） element（元素对象..."> $(function () { //1.获取所有的ul下的li var citys = $("#city li...id="myDiv" style="width:300px;height:300px;background:pink"> 点击按钮变成绿色，再次点击红色 </body
通过jquery自身的方法获取页面元素的对象，就是jquery对象。...:lt(index) 获取小于给定索引值的元素 :gt(index) 获取大于给定索引值的元素 :eq(index) 获取给定的索引值的元素，从0开始 :odd 获取奇数的元素 :even 获取偶数的元素...) 获取包含给定文本的元素 :empty 获取所有不包含子元素或文本的空元素 如： :has(selector) 获取含所选择器的所有元素 :parent 获取含有子元素或文本的元素...如：dashu, 可见性过滤选择器: :hidden 获取所有不可见元素 :visible 获取所有的可见元素 属性过滤选择器： [attribute...($div); append(function (index,html)) 同上 appendTo: 把选择的元素追加到另一个指定的元素中 appendTo(content)将一个元素插入另一个指定的元素中
]) for..of 3.0 版本之后提供的方式 3、上述遍历方式的实现 $(function () { //1.获取所有ul下的li var citys = $("#city li")...// alert(this.innerHTML) //3.2获取li对象 第二种方式 在回调函数中定义参数 index(索引) element(元素对象) // alert...”按钮，小相框的图片快速切换，点击“停止”按钮，小相框内的图片暂停，大相框展示小相框内的内容。...（2）分析 给开始按钮绑定单击事件 定义循环定时器 切换小相框的src属性。首先定义数组，存放图片资源路径，然后生成随机数，作为数组索引。 2...."> //使用jQuery插件 给jq对象添加2个方法 check()选中所有复选框，uncheck()取消选中所有复选框 //1.定义jQuery的对象插件
"button" value="点击按钮隐藏div" onclick="hideFn()"> <div id="showDiv" style...jq的遍历方式 jq对象.each(callback) 语法： jquery对象.each(function(index,element){}); index：就是元素在集合中的索引 element：就是集合中的每一个元素对象...id="myDiv" style="width:300px;height:300px;background:pink"> 点击按钮变成绿色，再次点击红色 插件 增强JQuery的功能 如何定义插件：（看下面两个案例） $.fn.extend(object) 增强通过Jquery获取的对象的功能 $("#id") ?
语法： jquery对象.each(function(index,element){}); * index:就是元素在集合中的索引 * element：就是集合中的每一个元素对象...* this：集合中的每一个元素对象 2....分析发现JQuery的显示和隐藏动画效果其实就是控制display 3....function adShow() { //获取广告div，调用显示方法 $("#ad").show("slow");.... $.fn.extend(object) * 增强通过Jquery获取的对象的功能 $("#id") 2. $.extend(object) * 增强JQeury对象自身的功能
1、使用jquery一定要引入jquery库吗？ 答案： 是2、jquery中的到底是什么？ 答案： 核心函数3、怎么为按钮添加点击响应函数的？...获取最后个元素 :not(selector) 去除所有与给定选择器匹配的元素 :even 匹配所有索引值为偶数的元素，从 0 开始计数 :odd 匹配所有索引值为奇数的元素，从 0 开始计数 :eq(...index) 匹配一个给定索引值的元素 :gt(index) 匹配所有大于给定索引值的元素 :lt(index) 匹配所有小于给定索引值的元素 :header 匹配如 h1, h2, h3之类的标题元素...jquery动画定义了很多种动画效果，可以很方便的使用这些动画效果 练习：CSS_动画 品牌展示 需求： 1.点击按钮的时候，隐藏和显示卡西欧之后的品牌...2.当显示全部内容的时候，按钮文本为“显示精简品牌” 然后，小三角形向上。所有品牌产品为默认颜色。 3.当只显示精简品牌的时候，要隐藏卡西欧之后的品牌，按钮文本为“显示全部品牌” 然后小三形向下。
按钮组件使用超链接按钮创建。它使用一个普通的标签进行展示。它可以同时显示一个图标和文本,或只有图标或文字。按钮的宽度可以动态和折叠/展开以适应它的文本标签。...常用的属性: plain boolean 为true时显示简洁效果。 iconCls string 显示在按钮文字左侧的图标(16x16)的CSS类ID <!...对话框窗口右上角只有一个关闭按钮用户可以配置对话框的行为显示其他工具, 如collapsible,minimizable,maximizable工具等。...选项卡显示一批面板。但在同一个时间只会显示一个面板。 每个选项卡面板都有头标题和一些小的按钮工具菜单， 包括关闭按钮和其他自定义按钮。 <!...同时获取到索引 var tab = mytab.tabs('getSelected'); index = mytab.tabs('getTabIndex',tab); mytab.tabs
jQuery 代码：$("div")，这样会返回一个包含所有 5 个 div 标签的 jQuery 对象。更详细的解答参见上面链接的文章。 ...如何在点击一个按钮时使用 jQuery 隐藏一个图片？ 这是一个事件处理问题。jQuery为按钮点击之类的事件提供了很好的支持。你可以通过以下代码去隐藏一个通过ID或class定位到的图片。...你可以传一个函数给 each() 方法，被调用的 jQuery 对象会在其每个元素上执行传入的函数。有时这个问题会紧接着上面一个问题，举个例子，如何在 alert 框里显示所有选中项。...如何在点击一个按钮时使用 jQuery 隐藏一个图片？ 这是一个事件处理问题。jQuery为按钮点击之类的事件提供了很好的支持。你可以通过以下代码去隐藏一个通过ID或class定位到的图片。...你可以传一个函数给 each() 方法，被调用的 jQuery 对象会在其每个元素上执行传入的函数。有时这个问题会紧接着上面一个问题，举个例子，如何在 alert 框里显示所有选中项。
（4）能够处理 HTML/JSP/XML、CSS、DOM、事件、实现动画效果，也能提供异步 AJAX 功能 （5）文档手册很全，很详细 （6）成熟的插件可供选择，多种 js 组件，例如日历组件（点击按钮显示下来日期...")选取所有的多选框 $(":file")选取所有的上传按钮 $(":butten")选取所有的按钮 11.过滤器 注意 ： jQuery 对象中存储的 DOM 对象顺序与页面标签声明位置关系 jQuery...语法：$("选择器:eq(数组索引)") 选择数组中小于指定索引的所有dom对象 语法：$("选择器:lt(数组索引)") 选择数组中大于指定索引的所有dom对象 语法：$("选择器:gt(数组索引)...选择器).append(" 我动态添加的 div ") 可以增加任意的页面元素 13.2.6 html函数 设置或返回被选元素的内容（相当于JS中innerHTML）。...注意：在代码中的写的等标签不会在页面中显示，而是会在页面中执行，但是获取的文本内容中含有这个 $(选择器).html()：无参数调用方法，获取 DOM 数组第一个dom对象的在网页上显示的文本内容。
文档处理 事件 动画效果 插件 each、data、Ajax jQuery语法 $符号事jQuery中的重要标识 //在JS中可以通过获取先获取标签，然后去使用对应的方法，在jQuery中一样，...可以先筛选元素（标签），然后再对该元素做出动态操作 格式：$(selector).action() selector：通过选择器获取元素 action：获取元素后的动作行为 jQuery对象 JS中DOM...获取到的元素是DOM对象，那么在jQuery中获取到的元素属于jQuery对象，两者之间方法有差别，虽然 jQuery对象是包装 DOM对象后产生的，但是 jQuery对象无法使用 DOM对象的任何方法...index的那个元素 :even 匹配所有索引值为偶数的元素，从 0 开始计数 :odd 匹配所有索引值为奇数的元素，从 0 开始计数 :gt(index) 匹配所有大于给定索引值的元素 :lt(index...返回窗口的网页显示区域高度 jQuery 方法 说明 offset() 获取匹配元素在当前窗口的相对偏移或设置元素位置 position() 获取匹配元素相对父元素的偏移 scrollTop(
2、 $("p") 是获取所有的 p 标签，然后全部设置文本内容，我们并没有循环设置，但是全部的 p 标签的文本内容都改变了，这是 jQuery 内部自动循环了，这就是隐式迭代。...小总结：jQuery中的一些方法 val(); // 获取或设置表单标签中的 value 值。 css(); // 设置元素的 css 样式属性值。...text(); // 获取或设置标签的文本内容----相当于DOM中的innerText html(); // 获取或设置标签的html内容----相当于DOM中的innerHTML 6、后代（层次）选择器...> 1、jQuery中鼠标进入事件是：mouseenter；鼠标离开事件是：mouseleave 2、css 中的 display:none|block 对应的隐藏和显示在...元素中，索引为2的元素 $("li:odd") // 匹配li元素中，索引为奇数的元素 $("li:even") // 匹配li元素中，索引为偶数的元素 10.1、案例：淘宝精品展示 效果：鼠标进入标签
元素 所有选择器 都以 $() 开始 3.1 元素选择器 基于元素名 选取，如 $("p") 选择所有 元素 michael 学习web开发 继续加油 点击按钮隐藏所有 p 元素.../ 点击按钮隐藏 id=myweb 的元素 $(document).ready(function () {...class 查找元素，如$(".test") 点击按钮，所有带有 class=“test” 属性的元素都被隐藏 $(document).ready(function () {...jQuery 的 attr() 方法可以获取和设置 属性值 如attr("属性名") 获取属性值，attr("属性名", ”属性值“) 设置属性值 <!
领取专属 10元无门槛券
手把手带您无忧上云
