,selectorN 将每一个选择器匹配的元素合并后一起返回 $("div,p,.title" )选取所有div、p和拥有class为title的元素 全局选择器 * 匹配所有元素 $("*" )选取所有元素...$(" li:first" )**选取所有li>元素中的第一个li>元素** :last 选取最后一个元素 $(" li:last" )**选取所有li>元素中的最后一个li>元素** :not...(selector) 选取去除所有与给定选择器匹配的元素 $(" li:not**(.three)" )选取class不是three的元素** :even 选取索引是偶数的所有元素（**index从0开始...** :focus 选取当前获取焦点的元素 $(":focus" )**选取当前获取焦点的元素** :animated 选择所有动画 $(":animated" )**选取当前所有动画元素** 语法...描述 示例 :visible 选取所有可见的元素 $(":visible" )**选取所有可见的元素** :hidden 选取所有隐藏的元素 $(":hidden" ) 选取所有隐藏的元素 最后两个一般不作为设置样式只做显示或者隐藏的修改
2.层次选择器 找子孙后代，兄弟元素 方法 描述 selector1>selector2 子元素 selector1 selector2 后代元素 3.过滤选择器 方法 描述 :first 获取第一个元素...:last 获取最后个元素 :eq(index) 匹配一个给定索引值的元素 :lt 匹配所有小于给定索引值的元素 :gt 匹配所有大于给定索引值的元素 :odd 匹配所有索引值为奇数的元素，从 0 开始计数...visible 匹配所有的可见元素 [attrName] 匹配包含给定属性的元素。..., 并封装成新的 jQuery 对象返回 方法 描述 first() 获取第一个元素 last() 获取最后个元素 eq(index) 获取第 N 个元素 filter(selector) 筛选出与指定表达式匹配的元素集合...1.基本动画 方法 描述 show() 将隐藏的元素显示 hide() 将可见的元素隐藏 toggle() 可见就隐藏，不可见就显示 以上的动画都可以添加参数： ① 第一个参数就是显示 执行的时间，以毫秒为单位
> // 第一个 li $("li:first").css("color","red"); // 最后一个 li $("li:last").css("color","red...li 的后面 $("li:last").after( newli ); newli.insertAfter("li:last"); //newli 添加到最后的...:eq(1)" ); /* 复制节点 */ // 复制第一个 li，并插入到最后一个 li 的后面 $("li:first").clone().insertAfter...first() 过滤第一个元素 last() 过滤最后一个元素 eq(index) 过滤到下标为 index 的元素 not() 除了什么之外的元素 is() 返回布尔，判断是不是这种元素 <button...").first().text(); // 最后一个 li var x = $("li").last().text(); // 下标为 1 的 li
基本过滤选择器 ——1.1 :first和:last（取第一个元素或最后一个元素） $(document).ready(function () { $('span:first')...可见性过滤选择器 ——3.1 :hidden（取不可见的元素） jQuery至1.3.2之后的:hidden选择器仅匹配display:none或的元素，而不匹配...子元素过滤选择器 ——5.1 :first-child和:last-child :first-child表示第一个子元素，:last-child表示最后一个子元素。...需要大家注意的是，:fisrst和:last返回的都是单个元素，而:first-child和:last-child返回的都是集合元素。...举个例子：div:first返回的是整个DOM文档中第一个div元素，而div:first-child是返回所有div元素下的第一个元素合并后的集合。
基本过滤选择器 ——1.1 :first和:last（取第一个元素或最后一个元素） $(document).ready(function () { $('span:first').css('color...） 下面的代码，最后一个div会有背景色 ?...子元素过滤选择器 ——5.1 :first-child和:last-child :first-child表示第一个子元素，:last-child表示最后一个子元素。...需要大家注意的是，:fisrst和:last返回的都是单个元素，而:first-child和:last-child返回的都是集合元素。...举个例子：div:first返回的是整个DOM文档中第一个div元素，而div:first-child是返回所有div元素下的第一个元素合并后的集合。
：visible 匹配全部的可见元素 演示样例描写叙述:查找全部可见的 tr 元素 HTML 代码: Value...不包含select中的option；varc = ops[e.selectedIndex].value;通过获取当前訪问的option对象在数组中的位置。...:nth-child从1開始的，而:eq()是从0算起的。...而此选择符将为每一个父元素匹配一个子元素 演示样例描写叙述:在每一个 ul 中查找第一个 li HTML 代码: li>Johnli> li>Karlli>...匹配最后一个子元素 ‘:last’仅仅匹配一个元素，而此选择符将为每一个父元素匹配一个子元素 演示样例描写叙述:在每一个 ul 中查找最后一个 li HTML 代码: li>John
，按照不同的过滤规则，过滤选择器可以分为基本过滤，内容过滤，可见性过滤，属性过滤，子元素过滤和表单对象属性过滤选择器，总结如下： 选择器 返回 示例 :first 单个元素 $("div:first")...选取所有 元素中第 1 个 元素 :last 单个元素 $("div:last") 选取所有 元素中最后 1 个 元素 not(selector) 集合元素...$("input:not(.item)") 选取 Class 不是 item 的 元素 :even 集合元素 $("input:even") 选取索引是偶数的 元素 :...() 达到透明度多少 .fadeTo(2000, 0.3); 向上收缩隐藏 .slideUp(); 向下收缩显示 .slideDown(); 显示隐藏切换 .slideToggle(); 获取兄弟元素...(); 返回上一层操作的对象 .end(); 第一个 .first(); 最后一个 .last(); 查找最近的 li> 元素 .closest(“li”); 获取当前元素的所有 元素
"); }); }); 过滤选择器 基本过滤器 :first 获取第一个元素 :last 获取最后个元素 :not(selector) 去除所有与给定选择器匹配的元素 :even 匹配所有索引值为偶数的元素...（0开始） ,负号表示可以倒着选（-1开）和:eq()功能一样 first() 选出第一个元素 和:first功能一样 last() 选出最后一个元素 和:last功能一样 hasClass(class...="button" value="last()选择最后一个 div 元素" id="btn3" /> 的...第一个参数是 动画执行的时候，（单位是毫秒） 第二个参数是 动画执行完成时的回调函数 hide() 隐藏可见的元素 第一个参数是 动画执行的时候，（单位是毫秒） 第二个参数是 动画执行完成时的回调函数...toggle() 可见就隐藏，隐藏状态就显示 第一个参数是 动画执行的时候，（单位是毫秒） 第二个参数是 动画执行完成时的回调函数 淡入淡出动画 fadeIn() 淡入 让隐藏可见 fadeOut()
:last 选取最后一个元素 :not(selector) 选取除selector选择了的元素之外的元素 :even 选取索引是偶数的元素(index从0开始) :odd 选取索引是奇数的元素(index...（h1~h6） 注意 :header之前要有空格 :docus 选取当前获取焦点的元素 :animated 选取所有动画 可见性选择器 语法 说明 :visible 选取所有可见的元素 hidden...()方法 隐藏 :hidden 选取所有隐藏的元素 show()方法 显示 2.5 jQuery选择器注意事项 选择器的书写规范很严格，多一个或少一个空格，都会影响选择器的效果； 2.6 $("选择器...说明 next() 获取当前元素后的第一个同辈元素 prev() 获取当前元素前的第一个同辈元素 slibings() 获取当前元素的所有同辈元素 3.6.3 遍历前辈元素 方法 说明 parent(...").end().last().css({"background-color":"pink"}); //可以选取到第一个li和最后一个li //先选取第一个li，然后end()清除.first()的过滤
属性过滤选择器 ——4.1 [attribute]（取拥有attribute属性的元素） 下面的代码，最后一个a标签没有title属性，所以它仍然会带下划线 <script type="text/javascript...子元素过滤选择器 ——5.1 :first-child和:last-child :first-child表示第一个子元素，:last-child表示最后一个子元素。...需要大家注意的是，:fisrst和:last返回的都是单个元素，而:first-child和:last-child返回的都是集合元素。...举个例子：div:first返回的是整个DOM文档中第一个div元素，而div:first-child是返回所有div元素下的第一个元素合并后的集合。...这里有个问题：如果一个元素没有子元素，:first-child和:last-child会返回null吗？
框架是程序员将一个又一个功能进行封装，供其他人使用的程序组件，了解为模板而已。我们使用框架是为了简化开发进程。...： 基本 过滤选择器 属性 过滤选择器 子元素 过滤选择器 可见性 过滤选择器 内容 过滤选择器 表单对象属性 过滤选择器 $(" li:first" )：选取所有li>元素中的第一个li>元素 $...(" li:last" )：选取所有li>元素中的最后一个li>元素 $(" li:even" )：选取索引为偶数的所有li>元素 $(" li:odd" )：选取索引为奇数的所有li>元素 $...(" li:not(.three)" )：选取class不是three的元素 $(":header" )：选取网页中所有标题元素 $(":focus" )：选取当前获取焦点的元素 $("li:eq(1)...(text) :empty :has(selector) :parent 选择器的书写规范很严格，多一个空格或少一个空格，都会影响选择器的结果。
基本过滤选择器 ——1.1 :first和:last（取第一个元素或最后一个元素） $(document).ready(function () { $('span:first')...span元素的div添加边框 $('div:has(span)').css('border', '1px solid #000'); }); 即使span不是div...可见性过滤选择器 ——3.1 :hidden（取不可见的元素） jQuery至1.3.2之后的:hidden选择器仅匹配display:none或的元素，而不匹配...这也意味着hidden只匹配那些“隐藏的”并且不占空间的元素，像visibility:hidden或opactity:0的元素占据了空间，会被排除在外。...） 下面的代码，最后一个div会有背景色 ?
这个回调函数不设置任何参数，但是 this会设成将要执行动画的那个DOM元素，如果多个元素一起做动画效果，那么要非常注意，回调函数会在每一个元素执行完动画后都执行一次，而不是这组 动画整体才执行一次...：找到元素的高度，然后采用一个下滑动画让元素一直滑到隐藏，当高度为0的时候，也就是不可见的时，修改元素display 样式属性被设置为none。...最后一个动画结束的回调方法。...slideToggle用滑动动画显示或隐藏一个匹配元素 基本的操作：slideToggle(); 这是最基本的操作，获取元素的高度，使这个元素的高度发生改变，从而让元素里的内容往下或往上滑。...常见的淡入淡出动画正是这样的原理。 fadeOut()函数用于隐藏所有匹配的元素，并带有淡出的过渡动画效果 所谓"淡出"隐藏的，元素是隐藏状态不对作任何改变，元素是可见的，则将其隐藏。
元素的隐藏显示经常会使用，比如二级导航，响应式布局等等。...使用场景：让某元素在屏幕中不可见，如：鼠标:hover之后元素隐藏/显示 常用属性方法： visibility: hidden; 浏览器对其渲染可是不可见，它在网页中占位置却不可点击，也就是说明元素不可见却仍然占据空间.../* 元素隐藏 */ display:none; /* 元素显示 */ display:block; 隐藏元素本身，并且在网页中不占位置，在隐藏的方法中，取none值这种方法一般是不可取的！...，所以需要有一个通栏：占满一行的盒子 */ .nav { height: 40px; border-bottom: 1px.../img/code.jpg" alt="" class="code">li> li class="last">个人中心li>
然而从jquery到vue或者说是到mvvm的转变则是一个思想想的转变，是将原有的直接操作dom的思想转变到操作数据上去，难道不是一个根本性的改变吗？...4.举例说明 场景一：列表添加一个元素,下图为vue和jquery两种操作的代码，我们从中可以看出vue只需要向数据message里面push一条数据即可完成添加一个li标签的操作，而jquery则需要获取...li元素后手动添加一个标签 $("#list").children("li").last().append("li>第"+i+"条数据li>") }); }); 场景二：控制按钮的显示隐藏，下图为vue和jquery两种操作的代码，我们从中可以看出vue只需要控制属性isShow的值为true和false即可，而jquery则还是需要操作dom...li元素后手动添加一个标签 $("#list").children("li").last().append("li>第"+i+"条数据li>") }); //需要手动隐藏
说明 ：firs $('li:first') 选择匹配元素集合中第一个li元素 ：last $('li:last') 选择匹配元素集合中最后一个li元素 :even $('li:even') 选择匹配元素集合中偶数位的...:first-child') 选择作为其父元素第一个子元素的p元素 tag:last-child $('div p:last-child') 选择作为其父元素最后一个子元素的p元素 tag:first-of-type...$('p:first-of-type') 选择几个同辈p元素中的第一个 tag:last-of-type $('p:last-of-type') 选择几个同辈p元素中的最后一个 tag:nth-child...使用context提高检索效率 先前我们选取页面中的元素时，不可避免的要检索页面中的所有元素，这样就降低了检索的效率。这不是我们想要的，能不能在我们指定的的范围中检索我们想要获取的元素。...下面的选择器会在id属性值为box的元素中查找p元素，而不是在整个文档中查找： $('p', '#box') 后代选择器也可以像上面那样写： $('#box p') //
可见性筛选器 需求描述：让隐藏的段落显示出来 我是显示段落 我是隐藏段落 $('p...需求描述：为当前的 ul 向后添加一个列表项 li>我是列表项1li> li>我是列表项2li> var last = 'li>我是最后一个列表项li>'; $('ul').append(last); # 4. appendTo() 方法描述：将指定的内容追加到当前匹配的所有元素的最后面。...需求描述：为当前的 ul 向后添加一个列表项 li>我是列表项1li> li>我是列表项2li> var last = 'li>我是最后一个列表项li').first().css('background', 'red'); # 3.3.2.2last() 方法描述：获取匹配元素集合中最后一个元素。
(var i=0;i<listItem.length;i++){ listItem[i].onclick = function(){ //循环先让所有的子ul隐藏...） :last//（选取最后一个元素） :even//（选取索引是偶数的所有元素） :odd//（选取索引是奇数的所有元素） :eq(index)//（选取索引等于index的元素） :gt(index...:parent//选取含有子元素或者文本的元素 c)可见性选择器 :hidden//选取所有不可见的元素 （包括、 的含有value的元素 [selector1][selector2][selectorN]//属性选择器合并成一个复合属性选择器， 注意：此处为属性选择器的并集...（返回整个文档中每个元素的第一个子元素）， 如$("ul li:first-child");选择每个中第1个元素 :last-child//选取每个父元素的最后一个元素 :only-child/
选择器 功能描述 示例 :first 获取指定选择器中的第一个元素 $("li :first")获取第1个li>元素 :last 获取指定选择器中的最后一个元素 $("li :last")获取最后1个...获取内容不为空的元素（特殊） $("li:parent")获取内容不为空的li>元素 2.2.5 可见性选择器 为了方便开发，jQuery中还提供了可见或隐藏元素的获取。...选择器 功能描述 示例 :hidden 获取所有隐藏元素 $("li:hidden")获取所有隐藏的li>元素 :visible 获取所有可见元素 $("li:visible")获取所有可见的li>...获取第一个子元素 :last-child 获取最后一个子元素 :only-child 如果当前元素是唯一的子元素，则匹配 :nth-last-child(index/even/odd/公式) 选择所有它们父元素的第...:last-of-type 选择所有相同的元素名称的最后一个子元素 :only-of-type 选择所有没有兄弟元素，且具有相同的元素名称的元素 :nth-last-of-type(index/even
li,p），后代选择器（#links a、#footer .mycss），通配选择器（*） 2、JQuery选择器 JQuery选择器完全继承了CSS的选择器，而CSS只是改变样式，Jquery是添加动作...4、选择器分类 基本选择器：通过元素的id、class和标签名（a,li,ul,p,span等） 层次选择器：获取特定元素例如，后代元素、子元素、相邻元素和兄弟元素 $(“inname mycss”...prev的下一个元素 $(“prev~myccc”)等同于nextAll()方法 过滤选择器：包括有基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤、表单对象属性过滤选择器 表单选择器：有:input...\\#b 选择器的空格问题，多一个和少一个空格是完全不同的两个结果 6、其他选择器 如果选择器不够用请考虑使用如下选择器：MoreSelectors for jQuery，Basic Xpath等 知识点汇总...(class)给元算添加指定css类名，而removeClass正好相反 附上一个简单的例子： .redclass{ color:red;} <div class
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
