antzone{ width:200px; height:100px; background:#ccc; } $(document).ready(function(){ $("#bt").click(function(){ $...div class="antzone"> 点击按钮可以隐藏class属性值为..."antzone"的元素。
场景：某页面用了js延时加载技术处理所有图片，以改善用户体验，但是有几个图片不想延时加载，要求把它们单独挑出来。...研究了一下jQuery的API文档，搞掂了，jQuery真的很方便，贴在这里备份： $().ready(function...div 1 div 2 div 3 上面的代码，将把有附加属性..."delay"，且等于"false"的div排除掉，然后把剩下的div全选中，并设置为红色字体。
（本文年代久远，请谨慎阅读）今天学习了JQuery的一些基本用法，包括JQuery选择器和JQuery包装集； 从现在开始，要慎重区分DOM对象和JQuery对象，两种对象的方法不同，属性不同，在使用中要特别注意...而在JQUERY中则完全不同，JQUERY提供了异常强大的选择器用来帮助我们获取页面上的对象,并且将对象以JQUERY包装集的形式返回。 "$"符号在JQUERY中代表对JQUERY框架集的引用。...（根据元素的css类选择） $("*")选择页面所有元素（选择所有元素） $("#divId, element, .class")（可以将几个选择器用","分隔开然后再拼成一个选择器字符串.会同时选中这几个选择器匹配的内容...[i].innerHTML = 'div' + i;//通过索引访问到的元素不是JQuery对象，而是DOM对象} JQuery包装集 在此介绍一些基本的JQuery包装集及使用 ready()方法...对象，然后用对象的appendTo方法追加到testDiv这个被选元素的结尾，这个被选元素即某个控件， 如一个div块或者一个文本框，效果是在此控件后显示一个下拉框； 其他一些常用的操作JQUERY包装集的函数
当创建新元素（或选择现有元素）时，jQuery返回集合中的元素。jQuery的许多开发人员都认为这个集合是一个数组。.length毕竟，它有一个零索引序列的DOM元素，一些熟悉的数组函数和一个属性。...元素具有任何JavaScript对象的属性。这些属性中的属性.tagName和方法类似.appendChild()。这些属性是通过JavaScript与网页进行交互的唯一方法。...链接不是所有的jQuery对象都被创建=== 关于这种“包装”行为的一个重要细节是每个包装的对象是唯一的。即使使用相同的选择器创建对象或包含对完全相同的DOM元素的引用，这一点也是如此。...链接jQuery对象不是“活” 给定一个jQuery对象，其中包含页面上的所有段落元素： // Selecting all elements on the page....包含在jQuery对象中的元素集将不会改变，除非明确修改。这意味着该集合不是“直播” - 它不会随着文档的更改而自动更新。
并集选择器 $("div,p,li"); 使用逗号分隔，只要符合条件之一就可。...获取所有的div、p、li元素 交集选择器标签指定式选择器） $("div.redClass"); 注意选择器1和选择器2之间没有空格，class为redClass的div元素，注意区分后代选择器。...用法 说明 $("p[attr]") 选取所有该p标签且具有attr属性的节点 $("p[attr=a_value]") 选取所有p标签且具有attr属性并满足属性值为a_value的节点 $("p[...attr^=a_value_head]") 选取所有p标签且attr属性的属性值是以a_value_head开头的 $("p[attr$=a_value_end]") 选取所有p标签且attr属性的属性值是以...a_value_end结尾的 $("p[attr*=a_value") 选取所有p标签且attr属性的属性值中包含a_value 3.8 筛选方法 语法 用法 说明 parent() $("#first
我们已经使用了带有简单Css选择器的jQuery选取函数:$()。现在是时候深入了解jQuery选择器语法，以及一些提取和扩充选中元素集的方法了。...一、jQuery选择器 在CSS3选择器标淮草案定义的选择器语法中，jQuery支持相当完整的一套子集，同时还添加了一些非标准但很有用的伪类。注意:本节讲述的是 jQuery选择器。...=val] 匹配没有attr属性、或attr属性的值不为val的所有元素((jQuery的扩展) [attr^=val] 匹配attr属性值以val开头的元素 [attr$=val] 匹配attr...除了$()函数支持的选择器语法，jQuery还定义了一些选取方法。...jQuery还定义一些其他选取方法可将当前选中元素集作为上下文来使 用。
文章目录 jQuery概念 快速入门 步骤： JQuery对象和JS对象区别与转换 选择器：筛选具有相似特征的元素(标签) 基本操作学习 事件绑定 入口函数 样式控制：css方法 分类 基本选择器...标签选择器（元素选择器） id选择器 类选择器 并集选择器 层级选择器 后代选择器 子选择器 属性选择器 属性名称选择器 属性选择器 复合属性选择器 过滤选择器 首元素选择器 尾元素选择器 非元素选择器...标签选择器（元素选择器） 语法： $(“html标签名”) 获得所有匹配标签名称的元素 id选择器 语法： $(“#id的属性值”) 获得与指定id属性值匹配的元素 类选择器 语法： $(“.class...的属性值”) 获得与指定的class属性值匹配的元素 并集选择器 语法： $(“选择器1,选择器2…”) 获取多个选择器选中的所有元素 层级选择器 后代选择器 语法： $("A B ") 选择A元素内部的所有...B元素 子选择器 语法： $(“A > B”) 选择A元素内部的所有B子元素 属性选择器 属性名称选择器 语法： $(“A[属性名]”) 包含指定属性的选择器 属性选择器 语法： $(“A[属性名=‘值
jQuery的核心思想 window提供一个全局函数jQuery jQuery函数接受一个选择器 选择器会获取这些元素，但不会返回这些元素 会返回一个对象，称为jQuery构造出来的对象 对象里有一些函数...div元素 $(‘input[name=first]’) // 选择name属性等于first的input元素 也可以是jQuery特有的表达式： $(‘a:first’) //选择网页中第一个a元素...’) //选择所有的div元素，除了前三个 $(‘div:animated’) //选择当前处于动画状态的div元素 二、改变结果集 jQuery设计思想之二，就是提供各种强大的过滤器，对结果集进行筛选...(’.myClass’); //选择class等于myClass的div元素 (‘div’).first(); //选择第1个div元素 有时候，我们需要从结果集出发，移动到附近的相关元素，jQuery....val() 取出某个表单元素的值 选择网页中的元素需要注意的是，如果结果集包含多个元素，那么赋值的时候，将对其中所有的元素赋值；取值的时候，则是只取出第一个元素的值（.text()例外，它取出所有元素的
的div元素 4 $('input[name=first]')//选择name属性等于first的input元素 也可以是jQuery特有的表达式： 1 $('a:first')//选择网页中第一个...5 $('div:gt(2)')//选择所有的div元素，除了前三个 6 $('div:animated')//选择当前处于动画状态的div元素 二、改变结果集 如果选中多个元素，jQuery...提供过滤器，可以缩小结果集： 1 $('div').has('p'); //选择包含p元素的div元素 2 $('div').not('.myClass'); //选择class不等于myClass...5 $('div').eq(5); //选择第6个div元素 有一些时候，我们需要从结果集出发，移动到附近的相关元素，jQuery也提供了在DOM树上的移动方法： 1 $('div').next(....val() 取出或设置html内容 取出某个表单元素的值 需要注意的是，如果结果集包含多个元素，那么赋值的时候，将对其中所有的元素赋值;取值的时候，则是只取出第一个元素的值(.text(
class为myClass的div元素 $('input[name=first]') // 选择name属性等于first的input元素 也可以是jQuery特有的表达式： $('...div元素 二、改变结果集 jQuery设计思想之二，就是提供各种强大的过滤器，对结果集进行筛选，缩小选择结果。 .../选择第6个div元素 有时候，我们需要从结果集出发，移动到附近的相关元素，jQuery也提供了在DOM树上的移动方法： $('div').next('p'); //选择div元素后面的第一个...() 取出或设置某个元素的高度 .val() 取出某个表单元素的值 需要注意的是，如果结果集包含多个元素，那么赋值的时候，将对其中所有的元素赋值；取值的时候，则是只取出第一个元素的值（.text...(e) { alert(e.type); // "click" }); 这个事件对象有一些很有用的属性和方法： event.pageX 事件发生时，鼠标距离网页左上角的水平距离
JavaScript框架：本质上就是一些js文件，封装了js的原生代码而已 二、快速入门 1、下载JQuery （1）目前jQuery有三个大版本 1.x：兼容ie678,使用最为广泛的，官方只做BUG...体积大一些 jquery-xxx.min.js：生产版本。程序中使用，没有缩进。体积小一些。...语法：$("html标签名")获得所有匹配标签名称的元素 id选择器。语法：$("#id的属性值")获得与指定id属性值匹配的元素 类选择器。...语法：$(".class的属性值")获得与指定的class属性值匹配的元素 并集选择器。语法：$("选择器1，选择器2...") 获取多个选择器选中的所有元素 （2）层级选择器 后代选择器。...语法：$("A B ")选择A元素内部的所有B元素 子选择器。语法：$("A > B")选择A元素内部的所有B子元素 （3）属性选择器 属性名称选择器。
其中jquery的最出色的地方在于对元素的选择。...栗子 找到所有拥有details类的p元素，将其高亮显示， $('p.datails').css('background-color', 'yellow') jQuery()函数 在Jquery中为最终要的为...通过这种方法调用，$()会返回当前文档中匹配该选择器的元素集。 第二种 传递一个Element，Document或Window对象给$()方法，$()将会将其封装成对象并返回。...即全局jQuery对象 对象 jQuery对象有jQuery函数返回的对象，一个jQuery对象表示一组文档元素，即jQuery集，包装集，jQuery结果 选中元素 传递css选择器给jQuery函数时...，将会返回jQuery对象表示匹配该选择器的文档元素集。
var $myElement = $("p");上述代码将选择所有标签的元素，并将它们包装成jQuery对象存储在$myElement变量中。...ID选择器 使用ID选择器选择具有特定ID的HTML元素，并将其包装成jQuery对象。...类选择器 使用类选择器选择具有特定类的HTML元素，并将其包装成jQuery对象。...三、jQuery对象的方法和属性 jQuery对象提供了许多方法和属性，用于对选择的元素进行操作。方法 jQuery对象的方法可以用于修改元素的样式、内容、属性等。...属性 jQuery对象还提供了一些属性，用于访问和操作选择的元素的特定属性。
）、兼容性好 1.3、jQuery版本 jQuery 1.0 （2006年8月）：该库的第一个稳定版本，已经具有了对CSS选择符、事件处理和AJAX交互的稳健支持。...无论选择器匹配了多个或者零个元素，jQuery对象都不再是null。意味着你只能够用jQuery对象的.length属性来判断选择器是否选中了元素。 获得jQuery对象的示例： <!...选择器和包装集 为了使设计和内容分离而把CSS引入Web技术的时候，需要以某种方式从外部样式表中引用页面元素组。...开发出来的方法就是通过使用选择器—基于元素的属性或元素在HTML文档中的位置，简明地表现元素。 例如，选择器：p a 引用所有嵌套于元素之内的超链接(元素)组。...将每一个选择器匹配到的元素合并后一起返回 集合元素 $("div,span,p.cls")选取所有，和拥有class为cls的标签的一组元素 * 匹配所有元素 集合元素 $(
获取所有已选择到的元素中具有属性attrKey的元素 selector[attrKey=attrVal] 获取所有已选择到的元素中具有属性attrKey，并且属性值为...attrVal的元素 selector[attrKey^=attrVal] 获取所有已选择到的元素中具有属性attrKey，并且属性值为以attrVal开头的元素...selector[attrKey$=attrVal] 获取所有已选择到的元素中具有属性attrKey，并且属性值为以attrVal结尾的元素 selector[attrKey...*=attrVal] 获取所有已选择到的元素中具有属性attrKey，并且属性值为包含attrVal的元素 selector[attrKey!...=attrVal] 获取所有已选择到的元素中具有属性attrKey，并且属性值不为以attrVal的元素或者没有属性attrVal的元素 $('div').
jquery用法思想 选择某个网页元素，然后对它进行某种操作 jquery选择器 jquery选择器可以快速地选择元素，选择规则和css样式相同，使用length属性判断是否选择成功。...//选择id为为ul1元素下的所有li下的span元素 $('input[name=first]') // 选择name属性等于first的input元素 下面就写示例来看看，如下： ?...对选择集进行过滤 $('div').has('p'); // 选择包含p元素的div元素 $('div').not('.myClass'); //选择class不等于myClass的div元素 $('div...').filter('.myClass'); //选择class等于myClass的div元素 $('div').eq(5); //选择第6个div元素 上面演示如何使用jquery来选择上元素，那么下面继续来演示一下选择集的过滤...选择集转移 $('div').prev(); //选择div元素前面紧挨的同辈元素 $('div').prevAll(); //选择div元素之前所有的同辈元素 $('div').next(); //选择
： $(this).hide() - 隐藏当前元素 $('p').hide() - 隐藏所有段落 $('p.test').hide() - 隐藏所有 class="test" 的段落 $('#test'...$('input[name=first]') // 选择name属性等于first的input元素 jQuery 特有表达式 $('a:first') // 选择页面中第一个a元素 $('tr:odd...选择所有的div元素，除了前三个 $('div:animated') // 选择当前处于动画状态的div元素 dom对象和jQuery对象区别 只有jQuery对象才能使用jQuery定义的方法。...jQuery提供过滤器，可以缩小结果集： $('div').has('p'); // 选择包含 p 元素的 div 元素 $('div').not('.myClass'); // 选择 class 不等于...'); // 将它的内容改为 World jQuery 常用工具方法 除了对选中的元素进行操作以外，jQuery还提供一些工具方法（utility），不必选中元素，就可以直接使用。
选择器 功能 返回值 #id 根据 id 属性值选取元素 单个元素 .class 根据 class 属性值选取元素 元素集合 element 根据给定的标签名选取元素 元素集合 #id 选择器选取带有指定..."); }); class选择器： .class 选择器选取带有指定 class 的所有元素。 class 引用 HTML 元素的 class 属性。..."); }); element选择器： element 选择器选取带有指定元素名称的所有元素。...选择器 功能 返回值 first() 或 :first 获取第一个元素 单个元素 last() 或 :last 获取最后一个元素 单个元素 :not(selector) 获取除给定选择器之外的所有元素...> 元素 元素集合 以上就是jQuery选择器的一些核心内容了，希望对大家有所帮助。
层级选择器 属性选择器 示例代码： $('#myId') //选择id为myId的标签 $('.myClass') //选择class为myClass的标签 $('li') //选择所有li标签 $(...1、选择集转移介绍 选择集转移就是以选择的标签为参照，然后获取转移后的标签 2、选择集转移操作 $('#box').prev(); //表示选择id是box元素的上一个同级元素 $('#box').prevAll...(); //表示选择id是box元素的上面所有同级元素 $('#box').next(); //表示选择id是box元素的下一个同级元素 $('#box').nextAll(); //表示选择id是box...元素的下面所有同级元素 $('#box').parent(); //表示选择id是box元素的父元素 $('#box').children(); //表示选择id是box元素的所有子元素 $('#box...').siblings(); //表示选择id是box元素的所有同级元素 $('#box').find('.myClass'); //表示选择id是box元素的class等于myClass的元素 获取和设置元素的内容
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频
