jquery的相关使用

jQuery使用大全

一、jQuery选择器

1.$("*")选取所有元素，可以得到text()、html()标签+文本

2.$(this) 选取当前HTML元素，只能获取text()文本；

3.$("p.red")选取class为red的<p>元素

4.$("p:first")选取第一个<p>元素;(:在jquery中代表过滤，过滤前面的内容)

5.$("ulli:first") 选取第一个<ul>下的第一个<li>元素

6.$("ulli:first-child") 选取每个<ul>的第一个<li>元素

7.$("[name]")选取带有name属性的元素

8.$("a[target='_blank']")选取target属性等于_blank的<a>

9.$("a[target!='_blank']")选取target属性不等于_blank的<a>

10.$(":button")选取所有type="button"的<input>元素和<button>元素（考试必考）

11.$("tr:even")选取偶数位置的<tr>元素

12.$("tr:odd")选取奇数位置的<tr>元素

 

二、jQuery事件语法

1.点击事件 $("").click(function(){});

2.双击事件$("").dblclick(function(){});

3.鼠标移入事件$("").mouseenter(function(){});//只有移入

4.鼠标移出事件$("").mouseleave(function(){});

5.鼠标按下事件$("").mousedown(function(){});

6.鼠标松开事件$("").mouseup(function(){});

7.光标悬停事件 $("").hover(mouseenter,mouseleave);

8.焦点事件（选中元素或tab键定位到元素时）

    $("").focus();

9.失去焦点事件

    $("").blur();

 

三、效果

1.隐藏于显示 hide(speed)\show(speed)

2.切换隐藏与显示 toggle();

3.淡入fadeIn()\fadeIn("slow")\fadeIn(3000)

4.淡出fadeOut()\fadeOut("slow")\fadeOut(3000)

5.向下滑动元素slideDown()、向上滑动元素 slideUp()

6.滑动切换slideToggle()

 

四、动画

开始动画 animate({属性:'值'})、停止：stop()

 

五、jQuery捕获

1.获得内容

text()纯文本、html()元素标签中的所有内容（包括标签）

val()表单input专用返回值

2.获取属性attr("属性名")；修改属性所用

 

六、设置内容和属性

$("").text("内容")、$("").html("内容")、$("").val("内容");

$("").attr("属性名","属性值");

$("").attr({"属性名1":"属性值1","属性名2":"属性值2"});

1.获取单选按钮的值

    $("input:radio:checked").val()

    $("input[type='radio']:checked").val()

    $("input[name='sex']:checked").val()

2.获取select下拉框中选中的内容

    $("#id").find("option:selected").text()

    $("#id").val();

 

七、添加\删除元素

1.追加append()

2.开头插入prepend()

3.删除自身及其子元素remove()

4.删除其子元素empty()

5.过滤删除(删除class="my"的所有p元素)

$("p").remove(".my")

 

八、jQuery css()方法

1.返回css属性的值$("").css("属性名")

2.设置属性值  $("").css("属性名","值");

3.设置多个属性值  $("").css({"属性名1":"值1","属性名2":"值2"})

 

九、遍历

1.寻找直接父元素parent()

2.寻找所有父元素（祖先）parents()

3.寻找所有直接子元素children("可选过滤")

4.寻找所有兄弟元素siblings()

5.next()返回下一个兄弟元素、prev)返回上一个兄弟元素

 

十、jQuery过滤

1.first()返回所选元素的首个元素

    $("div p").first(); $("divp").last();

2.last()返回所选元素的最后元素

3.eq()返回所选元素中带有制定索引号的元素（索引从0开始）

    $("p").eq(1)

4.filter()自定义规则过滤

    $("p").filter(.red)