js常用知识点整理

说明&＃xff1a;以下内容都是我工作中实际碰到的js知识点。

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

1.给元素添加事件

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

2.遍历DOM元素

小说分类&＃xff1a;


• 历史
• 言情
• 悬疑

3.删除元素

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

4.清空元素下内容

$("#content").empty(); //和remove不同&＃xff0c;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.追加元素

8.改变元素样式

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

9.操作JSON类型数据

1&＃xff09;json类型的字符串转换为json对象及取值

var jsonString&＃61;&＃39;{"id":1,"name":"Jack"}&＃39;;
var json&＃61;JSON.parse(jsonString); //转为json对象
console.log(json.id&＃43;":"&＃43;json.name);

2&＃xff09;json对象转为json类型的字符串

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

3&＃xff09;遍历json对象

var json&＃61;[{"id":1,"name":"Jack"},{"id":2,"name":"Tom"}];
for(var i&＃61;0; i"&＃43;json[i].name);
}

第1个用户&＃xff1a;1-->Jack

第2个用户&＃xff1a;2-->Tom

10.操作元素属性

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

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

请选择商品&＃xff1a;全选
洗衣机笔记本电脑华为mate10 pro$("#chooseAll").on("click",function(){if($("#chooseAll").prop("checked")){$("input[name&＃61;&＃39;product&＃39;]").prop("checked",true);}else{$("input[name&＃61;&＃39;product&＃39;]").prop("checked",false);}});

12.获取select选中的值

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

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

14.选择器几种符号用法

空格&＃xff1a;$(&＃39;parent childchild&＃39;)表示获取parent下的所有的childchild节点&＃xff08;所有的子孙&＃xff09;。
大于号&＃xff1a;$(&＃39;parent > child&＃39;)表示获取parent下的所有child的儿子( 第一代)。
加号&＃xff1a;$(&＃39;pre &＃43; nextbrother&＃39;)表示获得pre节点的下一个兄弟节点&＃xff0c;相当于next()方法
波浪号&＃xff1a;$(&＃39;pre ~ brother&＃39;)表示获取pre节点的后面的所有兄弟节点&＃xff0c;相当于nextAll()方法。

 

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

$("span:contains(&＃39;提醒&＃39;)");

16.禁用父窗口竖滚动条

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

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


$("#showProgress").is( "[type&＃61;checkbox]" );输出&＃xff1a;
true

18.new option作用

用于创建一个新的select选项

new option(text,value,defaultSelected,selected)
text:字符串&＃xff0c;指定option对象的text属性(即之间的文字)
value:字符串&＃xff0c;指定option对象的value属性
defaultSelected:布尔值&＃xff0c;指定option对象的defaultSelected属性
selected:布尔值&＃xff0c;指定option对象的selected属性

var ddl &＃61; $("#blogTypeId");
ddl.append("请选择博客类别...");
var result &＃61; eval(data);
$.each(result, function (key, value) {var op &＃61; new Option(value.typeName,value.id);ddl[0].options.add(op);
})

19.js清空select标签中的值

$("#area").html("");
$("#area").find("option").remove();
或者
$("#area").empty();

未完待续。。。