-
wrap()和wrapInner()方法都可以进行元素的包裹，但前者用于包裹元素本身，后者则用于包裹元素中的内容，它们的调用格式分别为： $(selector).wrap(wrapper)和$(selector).wrapInner(wrapper) 参数selector为被包裹的元素，wrapper参数为包裹元素的格式。查看全部
-
a标签查看全部
-
/* :last-child子元素过滤选择器的功能是获取每个父元素中返回的最后一个子元素，它也是一个集合，常用多个集合数据的选择处理。 */ <!DOCTYPE html> <html> <head> <title>:last-child子元素过滤选择器</title> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script> </head> <body> <h3>改变每个"蔬菜水果"中最后一行的背景色</h3> <ol> <li>芹菜</li> <li>茄子</li> <li>萝卜</li> <li>大白菜</li> <li>西红柿</li> </ol> <ol> <li>橘子</li> <li>香蕉</li> <li>葡萄</li> <li>苹果</li> <li>西瓜</li> </ol> </body> <script type="text/javascript"> $("li:last-child").css("background-color", "blue"); </script> </html>查看全部
-
/* 我们知道使用:first过滤选择器可以获取指定父元素中的首个子元素，但该选择器返回的只有一个元素，并不是一个集合，而使用:first-child子元素过滤选择器则可以获取每个父元素中返回的首个子元素，它是一个集合，常用多个集合数据的选择处理。 */<!DOCTYPE html> <html> <head> <title>:first-child子元素过滤选择器</title> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script> </head> <body> <h3>改变每个"蔬菜水果"中第一行的背景色</h3> <ol> <li>芹菜</li> <li>茄子</li> <li>萝卜</li> <li>大白菜</li> <li>西红柿</li> </ol> <ol> <li>橘子</li> <li>香蕉</li> <li>葡萄</li> <li>苹果</li> <li>西瓜</li> </ol> </body> <script type="text/javascript"> $("li:first-child").css("background-color", "green"); </script> </html>查看全部
-
<!DOCTYPE html> <html> <head> <title>[attribute*=value]属性选择器</title> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script> </head> <body> <h3>改变"title"属性值包含"果"的背景色</h3> <ul> <li title="蔬菜">茄子</li> <li title="水果">香蕉</li> <li title="蔬菜">芹菜</li> <li title="人参果">小西红柿</li> <li title="水果">西瓜</li> </ul> </body> <script type="text/javascript"> $("li[title*='果']").css("background-color", "green");//可以获取属性值中包含指定内容的全部元素，其中[]是专用于属性选择器的括号符，参数attribute表示属性名称，value参数表示对应的属性值。 </script> </html>查看全部
-
<!DOCTYPE html> <html> <head> <title>[attribute!=value]属性选择器</title> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script> </head> <body> <h3>改变"title"属性值不为"蔬菜"的背景色</h3> <ul> <li title="蔬菜">茄子</li> <li title="水果">香蕉</li> <li title="蔬菜">芹菜</li> <li title="水果">苹果</li> <li title="水果">西瓜</li> </ul> </body> <script type="text/javascript"> $("li[title!='蔬菜']").css("background-color", "green"); //属性选择器的功能是获取不包含属性名，或者与属性名和属性值不相同的全部元素，其中[]是专用于属性选择器的括号符，参数attribute表示属性名称，value参数表示属性值。 </script> </html>查看全部
-
<!DOCTYPE html> <html> <head> <title>[attribute=value]属性选择器</title> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script> </head> <body> <h3>改变"title"属性值为"蔬菜"的背景色</h3> <ul> <li title="蔬菜">茄子</li> <li title="水果">香蕉</li> <li title="蔬菜">芹菜</li> <li title="水果">苹果</li> <li title="水果">西瓜</li> </ul> </body> <script type="text/javascript"> $("li[title='蔬菜']").css("background-color", "green"); //属性选择器的功能是获取与属性名和属性值完全相同的全部元素 </script> </html>查看全部
-
<!DOCTYPE html> <html> <head> <title>:visible过滤选择器</title> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script> </head> <body> <h3>修改可见“水果”的背景色</h3> <ul> <li >橘子</li> <li >香蕉</li> <li >葡萄</li> <li>苹果</li> <li >西瓜</li> </ul> </body> <script type="text/javascript"> $("ul:visible").css("background-color","blue"); //获取可见元素 </script> </html>查看全部
-
<!DOCTYPE html> <html> <head> <title>:hidden过滤选择器</title> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script> </head> <body> <h3>显示隐藏元素的内容</h3> <input id="hidstr" type="hidden" value="我已隐藏起来"/> <div></div> </body> <script type="text/javascript"> var $strHTML = $("input:hidden").val(); //获取隐藏元素的值 $("div").html($strHTML); </script> </html>查看全部
-
<!DOCTYPE html> <html> <head> <title>:has(selector)过滤选择器</title> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script> </head> <body> <div>改变包含"label"元素的背景色：</div> <ol> <li><p>我是P先生</p></li> <li><label>L妹纸就是我</label></li> <li><p>我也是P先生</p></li> <li><label>我也是L妹纸哦</label></li> <li><p>P先生就是我哦</p></li> </ol> </body> <script type="text/javascript"> $("li:has('label')").css("background-color", "blue"); //查找li中包含label的元素 </script> </html>查看全部
-
<!DOCTYPE html> <html> <head> <title>:contains(text)过滤选择器</title> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script> </head> <body> <div>改变包含"jQuery"字符内容的背景色：</div> <ol> <li>强大的"jQuery"</li> <li>"javascript"也很实用</li> <li>"jQuery"前端必学</li> <li>"java"是一种开发语言</li> <li>前端利器——"jQuery"</li> </ol> </body> <script type="text/javascript"> $("li:contains('jQuery')").css("background", "green"); //查找包含jQuery的元素 </script> </html>查看全部
-
<!DOCTYPE html> <html> <head> <title>:eq(index)过滤选择器</title> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script> </head> <body> <div>改变中间行"葡萄"背景颜色：</div> <ol> <li>橘子</li> <li>香蕉</li> <li>葡萄</li> <li>苹果</li> <li>西瓜</li> </ol> </body> <script type="text/javascript"> $("li:eq(3)").css("background-color", "#60F"); //选择一个序列中第几个元素 </script> </html>查看全部
-
<!DOCTYPE html> <html> <head> <title>:first过滤选择器</title> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script> </head> <body> <div>改变最后一行"苹果"背景颜色：</div> <ol> <li>葡萄</li> <li>香蕉</li> <li>橘子</li> <li>西瓜</li> <li>苹果</li> </ol> </body> <script type="text/javascript"> $("li:last").css("background-color", "red"); $("li:first").css("background-color", "orange"); </script> </html>查看全部
-
<!DOCTYPE html> <html> <head> <title>prev ~ siblings选择器</title> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script> </head> <body> <div> 码农家族 <label></label> <p></p> <label></label> <label></label> </div> <label></label> </body> <script type="text/javascript"> $("p~label").css("border", "solid 1px red"); $("p~label").html("我们都是p先生的粉丝"); </script> </html>查看全部
-
<!DOCTYPE html> <html> <head> <title>prev + next选择器</title> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script> </head> <body> <div> 码农家族 <label></label> <p></p> <label></label> <label></label> </div> <label></label> </body> <script type="text/javascript"> $("p+label").css("background-color","red"); </script> </html>查看全部
举报
0/150
提交
取消