js常用知识点整理
说明：以下内容都是我工作中实际碰到的js知识点。
后面还会碰到其他知识点或对原来解决方案的改进，都会在本篇中持续不断的维护，希望给刚参加工作或初学的朋友一些参考。
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]" );
输出：
true18.new option作用
用于创建一个新的select选项
new option(text,value,defaultSelected,selected)
text:字符串，指定option对象的text属性(即<option></option>之间的文字)
value:字符串，指定option对象的value属性
defaultSelected:布尔值，指定option对象的defaultSelected属性
selected:布尔值，指定option对象的selected属性
var ddl = $("#blogTypeId");
ddl.append("<option value='-1'>请选择博客类别...</option>");
var result = eval(data);
$.each(result, function (key, value) {
var op = new Option(value.typeName,value.id);
ddl[0].options.add(op);
})
19.js清空select标签中的值
$("#area").html("");
$("#area").find("option").remove();
或者
$("#area").empty();
未完待续。。。
