jquery 摘要

最新推荐文章于 2024-09-20 11:38:47 发布

asw987653

最新推荐文章于 2024-09-20 11:38:47 发布

阅读量100

点赞数

分类专栏： js 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/asw987653/article/details/84300279

版权

js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

001、选择器类型

<script type="javascript">
<!-- 1、相对选择器-->
     $("td", $(this)).css("background", "red");  //$(this)元素下的td   
<!-- 2、多条件选择器-->  
     $("div,span,p[name='p1']")                          //选择div,span,p[name='p1']三种标签
<!-- 3、层次选择器-->
     $("#div li")获取div下的所有li元素（后代，子，子的子....） 
     $("#div > li")获取div下的直接li子元素//注意空格 
     $(".menuitem + div")获取样式名为menuitem之后的第一个div元素
     $(".menuitem ~ div")获取样式名为menuitem之后的所有的div元素
 </script>

001.1伪类选择器

:first //集合中的第一个元素 $("ul li:first")

:last $("ul li:last")

:eq(n) $("ul li:eq(2)")

:even //偶数 0 2 4 6 8 。。。

:odd //奇数 1 3 5 7 9 。。。

:lt(n) <

:gt(n) >

:not(selector) $("li :not(:first)").hide();

001.2父辈选择器

parent([selector]);//直接父元素

parents([selector]);//所有父元素

parentUtil([selector]);//提供搜索范围

001.3同辈选择器(不包含当前元素)

next([selector])：获取当前元素的下一个元素,可以指定选择器$("h3").next("li").css("color", "#FCF");

nextAll([selector])：获取当前元素的所有同辈元素,可以指定选择器

nextUtil([selector])：获得A到B之间的同辈元素$("#div1").nextUtil("div3").css("border", "1px solid red");

prv([selector])

prvAll([selector])

siblings([selector])

andSelf();：包含自身

$("#div1").nextUtil("div3").css("border", "1px solid red").andSelf();

001.4子类选择器

children([selector]);：直接子元素

find(selector); ：参数必选，选择范围为所有子元素

002、属性操作

<script type="javascript">
<!--某元素下具有某属性的子元素-->     
     $("#table02 .trSelected").length;
<!--具有某属性的元素-->
    $("div[name]").length;
<!--具有某属性值的元素-->
     $("div[class='trSelected']").length;
<!--属性字段-->  
    $("img[src^='.jpg']")
    $("img[src!='.pdf']")
    $("img[src$='.jpg']")
<!--多属性字段-->
 $("div[class='trSelected'] [name='ssj']")
</script>

003、遍历radio

$(document).ready(function() { 
    var ele=$("input[name='exchangelx'][type='radio']").each(function(){
		alert(this.value);
		});  
})

004、jquery初始化函数

(function ($) {})(jQuery);

005、获得元素个数

$("ul li").length

006、从集合中排出某元素

$("A").not($(dom)).slideUp('slow');

007、动态绑定事件

$("scopeDom").delegate("targetDom","click",function(){});
//jquery绑定动态dom事件(在scopeDom范围内为targetDom绑定click事件，
其中选择器仅支持#和.不支持复杂条件)

008、jquery清除同辈中指定的元素

$("#span_qt a:eq(0)").siblings("a").remove();
	<span id="span_qt">  
		<a name="null" href="javascript:void(0);" class="cur" >全部</a>
		<a name="null" href="javascript:void(0);" class="cur" >aaa</a>
		<a name="null" href="javascript:void(0);" class="cur" >bbb</a>
       </span>

009、jquery方法

01：get(n);返回dom对象 $("ul li").get(1).css("color", "red"); //这个是错误的

$("ul li").eq(1).css("color", "red"); //这个是正确的

02、filter(selector);当前集合过滤，区别于find()子集合

03、not(selector);当前集合下排除

04、is(selector);判断是否是同一对象

05、slice(start,[end]);当前集合区间 $("li ").slice(2); 第三个li $("li ").slice(2,5);前闭后开， 3-4个li