jquery的相关属性和方法

基本选择器

| 名称    | 用法                 | 描述                     

 

| ID选择器 | $(“#id”);          | 获取指定ID的元素              

| 类选择器  | $(“.class”);       | 获取同一类class的元素          

| 标签选择器 | $(“div”);          | 获取同一类标签的所有元素           

| 并集选择器 | $(“div,p,li”);     | 使用逗号分隔，只要符合条件之一就可。     

| 交集选择器 | $(“div.redClass”); | 获取class为redClass的div元素 

<div class="redClass"></div>

总结：跟css的选择器用法一模一样。

 

层级选择器

| 名称    | 用法          | 描述                              |

| 子代选择器 | $(“ul>li”); | 使用>号，获取儿子层级的元素，注意，并不会获取孙子层级的元素  |

| 后代选择器 | $(“ul li”); | 使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等 |

过滤选择器

 这类选择器都带冒号:

| 名称         | 用法                                 | 描述                                 |

| :eq（index） | $(“li:eq(2)”).css(“color”, ”red”); | 获取到的li元素中，选择索引号为2的元素，索引号index从0开始。 |

| :odd       | $(“li:odd”).css(“color”, ”red”);   | 获取到的li元素中，选择索引号为奇数的元素              |

| :even      | $(“li:even”).css(“color”, ”red”);  | 获取到的li元素中，选择索引号为偶数的元素              |

筛选选择器(方法)

筛选选择器的功能与过滤选择器有点类似，但是用法不一样，筛选选择器主要是方法。

| 名称                 | 用法                          | 描述                         |

| children(selector) | $(“ul”).children(“li”)      | 相当于$(“ul>li”)，子类选择器        |

| find(selector)     | $(“ul”).find(“li”);         | 相当于$(“ul li”),后代选择器        |

| siblings(selector) | $(“#first”).siblings(“li”); | 查找兄弟节点，不包括自己本身。            |

| parent()           | $(“#first”).parent();       | 查找父亲                       |

| eq(index)          | $(“li”).eq(2);              | 相当于$(“li:eq(2)”),index从0开始 |

| next()             | $(“li”).next()              | 找下一个兄弟                     |

| prev()             | $(“li”).prev()              | 找上一次兄弟                     |

 

class操作

 

    addClass();--->添加类

    hasClass();--->判断类

    removeClass();--->移除类

    toggleClass();--->切换类

CSS操作

 

    $().css('','');--->设置单个样式

    $('li').css({

            'fontSize':'24px',

         'fontWeight':'700'

     }); --->设置多个样式

 属性操作

设置多个属性  用法和CSS操作一样

$('img').attr({'alt':'图破了','title':'123123'})

prop()方法：

    在1.7版本已经移除了attr对true和false的操作

    $('input').eq(1).click(function () {

         $('#check').prop('checked',true);

     })

    prop方法是在有true和false这2个属性的时候采用（ checkbox radio select），其它啊时候就用attr（）；

 

 jQuery特殊属性操作

 val方法

val方法用于设置和获取表单元素的值，例如input、textarea的值

设置值

$("#name").val(“张三”);

获取值

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

 

html方法与text方法

 html方法相当于innerHTML  text方法相当于innerText

 

设置内容

$(“div”).html(“<span>这是一段内容</span>”);

获取内容

$(“div”).html()

设置内容

$(“div”).text(“<span>这是一段内容</span>”);

获取内容

$(“div”).text()

区别：html方法会识别html标签，text方法会那内容直接当成字符串，并不会识别html标签。

 width方法与height方法

设置或者获取高度

 

带参数表示设置高度

$(“img”).height(200);

不带参数获取高度

$(“img”).height();

 

获取网页的可视区宽高

 

获取可视区宽度

$(window).width();

获取可视区高度

$(window).height();

 

scrollTop与scrollLeft

设置或者获取垂直滚动条的位置

 

获取页面被卷曲的高度

$(window).scrollTop();

获取页面被卷曲的宽度

$(window).scrollLeft();

 

 

 offset方法与position方法

offset方法获取元素距离document的位置，position方法获取的是元素距离有定位的父元素的位置。

 

获取元素距离document的位置,返回值为对象：{left:100, top:100}

$(selector).offset();

获取相对于其最近的有定位的父元素的位置。

$(selector).position();