属性操作

 

1、获取或修改元素固有属性值：prop()

element.prop获取元素固有属性值
$("a").prop("href");
element.prop也可以修改元素固有属性值
$("a").prop("title","今天天气真好")
那么就会把a标签title属性改为"今天天气真好"

2、获取或修改元素自定义属性值：attr()

获取：

attr("属性")//类似于JS的getAttribute()

修改：

attr("属性"，“要修改为的属性值”)//类似于JS的setAttribute()

此方法也可以获取到H5标准的自定义属性

 

 数据缓存  data()    可以向被选元素附加数据

数据是存放在元素的内存里

1、获取

data（"name"）//从被选元素获取数据

2、附加

data("name","value");//向被选元素附加数据

 

jQuery内容文本值

1、获取设置元素内容  html()   （相当于原生JS的 innerHTML ）
$("div").html()//获取

$("div").html("要改成的值")//设置
2、获取设置元素文本内容  text()  (相当于原生JS的 innerText )
$("div").text()//获取

$("div").text("要改成的值")//设置
3、获取设置表单值   val()
$("input").val()//获取

$("input").val("要设置的值")//修改

 

返回指定祖先元素

parents('选择器')可以返回指定的祖先元素

比如四层嵌套div，类名分别是one,two,three,four

那么通过four元素要获取one元素就可以这样写：

$("four").parents("one")

 

tips: 

1、保留小数的方法：toFixed(小数保留的位数)  例如 toFixed(2)

2、:checked 选择器  —— 查找被选中的表单元素

$("checkbox:checked").length//获取选中的复选框的个数

3、change事件：

当元素的值改变时发生 change 事件（仅适用于表单字段）

$(selector).change(function){
    
}//添加函数到change事件

 

jQuery元素操作

 

遍历

如果针对同一类元素做不同操作，那么需要each()方法遍历元素

比如要分别给三个div的文字分别赋予不同的配色，就可以这么做

var arr = ["red","blue","green"]
$("div").each(function(index,domEle){
    //第一个参数是索引号，第二个是dom元素
对象
    $(domEle).css("color","arr[i]")
})

如果要遍历的是数据（数组，对象，键值对），那么应该使用$.each()方法

$each.({
    name : "andy",
    age : 18
}),function(index,domEle){
    console.log(index);//输出键值对的key
    console.log(domELe);//输出键值对的value
}

 

创建、添加、删除

<ul>
    <li>原先的li</li>
</ul>
<div class="test">我是原先的div</div>
<script>
    $(function() {
        // 1. 创建元素
        var li = $("<li>我是后来的li</li>");
        // 2. 添加元素

        // (1) 内部添加
        // $("ul").append(li);  内部添加并且放到内容的最后面 
        $("ul").prepend(li); // 内部添加并且放到内容的最前面

        // (2) 外部添加
        var div = $("<div>我是后来的div</div>");
        // $(".test").after(div);
        $(".test").before(div);
        // 3. 删除元素
        // $("ul").remove(); 可以删除匹配的元素自身
        // $("ul").empty(); // 可以删除匹配的元素里面的子节点,不删除自己
        $("ul").html(""); // 清空匹配的元素内容

    })
</script>