jQuery工作中常用知识点整理（一）

说明：以下内容都是我工作中实际碰到的jquery知识点。

后面还会碰到其他知识点或对原来解决方案的改进，都会在本篇中持续不断的维护，希望给刚参加工作或初学的朋友一些参考。

1.给元素添加事件

$("button").click(function(){
    $("p").css("color","red");
  });

 

2.遍历DOM元素

小说分类：<br>
    <ul id="category">
        <li>历史</li>
        <li>言情</li>
        <li>悬疑</li>
    </ul>
    
var str="";
$("#category li").each(function(){
        str+=$(this).text() +","
    });

console.log("小说分类有："+str.substring(0,str.length-1));
    
$( "li" ).each(function() {
  $( this ).addClass( "foo" );
});

3.删除元素

$("span").remove();  //根据元素
$("#span1").remove(); //根据元素id
$(".class1").remove(); //根据元素的class

4.清空元素下内容

$("#content").empty(); //和remove不同，empty保留元素本身

5.获取/设置元素值

$("#content").val();
$("#content").val("Hello");

6.字符串分隔

"hello".split("")        //可返回 ["h", "e", "l", "l", "o"]
"2:3:4:5".split(":")    //将返回["2", "3", "4", "5"]
"|a|b|c".split("|")        //将返回["", "a", "b", "c"]

7.追加元素

<div id="main">
</div>

$("#main").append("<p>111111111111111</p>");
$("#main").append($("#curTime")); //将页面id为curTime元素移动到main区域

8.改变元素样式

$("p").css("color","red");

9.操作JSON类型数据

1）json类型的字符串转换为json对象及取值

var jsonString='{"id":1,"name":"Jack"}';
var json=JSON.parse(jsonString); //转为json对象
console.log(json.id+":"+json.name);

2）json对象转为json类型的字符串

var json={"id":1,"name":"Jack"};
var jsonString=JSON.stringify(json);
console.log(jsonString);

3）遍历json对象

var json=[{"id":1,"name":"Jack"},{"id":2,"name":"Tom"}];
for(var i=0; i<json.length; i++){
    console.log("第"+(i+1)+"个用户："+json[i].id+"-->"+json[i].name);
}

第1个用户：1-->Jack

第2个用户：2-->Tom

10.操作元素属性

$("#btn").attr("name");  //获取
$("#btn").attr("name","按钮2"); //设置
$("#btn").removeAttr("name");  //删除

11.给checkbox添加全选/反选事件

请选择商品：全选<input type="checkbox" id="chooseAll" name="chooseAll">
    <br>
    
    洗衣机<input type="checkbox" name="product" value="3000">
    笔记本电脑<input type="checkbox" name="product" value="4000">
    华为mate10 pro<input type="checkbox" name="product" value="5000">
    
$("#chooseAll").on("click",function(){
        if($("#chooseAll").prop("checked")){
            $("input[name='product']").prop("checked",true);
        }else{
            $("input[name='product']").prop("checked",false);
        }
    });

12.获取select选中的值

$("#s_roomName option:selected").text();
$("#s_roomName option:selected").val();

13.给表格td添加鼠标掠过样式

<table id="mytable" border="1">
        <tbody><tr>
            <th>id</th>
            <th>name</th>
        </tr>
        <tr>
            <td style="cursor: pointer; background-color: rgb(255, 255, 255);">1</td>
            <td style="cursor: pointer; background-color: rgb(255, 255, 255);">Jack</td>
            
        </tr>
    </tbody></table>
    
    $("#mytable tr").find("td").each(function (i, td) {
        $(td).css("cursor", "pointer"); //添加手势和鼠标掠过样式
        $(td).hover(function () {
            $(td).css("background-color", "#f6f6f6");
        }, function () {
            $(td).css("background-color", "#fff");
        });
    });

       

14.选择器几种符号用法

空格：$('parent childchild')表示获取parent下的所有的childchild节点（所有的子孙）。
大于号：$('parent > child')表示获取parent下的所有child的儿子( 第一代)。
加号：$('pre + nextbrother')表示获得pre节点的下一个兄弟节点，相当于next()方法
波浪号：$('pre ~ brother')表示获取pre节点的后面的所有兄弟节点，相当于nextAll()方法。

15.获取包含指定文本的表单元素

$("span:contains('提醒')");

16.禁用父窗口竖滚动条

$(top.window.document.body).css("overflow-y","auto");

17.使用is()判断元素是否满足指定条件

<input type="checkbox" id="showPreview" name="showPreview">
$("#showProgress").is( "[type=checkbox]" );

输出：
true

未完待续。。。