案例：创建两个<li>元素节点，并且作为<ul>元素节点的子节点，添加到DOM树中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="jquery-3.1.0.js"></script> <script type="text/javascript"> $(function(){ $("input[type='button']").click(function(){ var $li_1 = $("<li>香蕉</li>"); var $li_2 = $("<li>苹果</li>"); $("ul:first").append($li_1); $("ul:first").append($li_2); }) }) </script> </head> <body> <ul></ul> <input type="button" value="添加"/> </body> </html>
append:将$li_1作为ul的子元素
appendTo:与append相反,对于A.appendTo(B),其效果是讲A作为B的子元素 该方法也可以实现元素的移动,将选中的元素A移动到B中
prepend:添加为前置元素,对于A.prepend(B),其效果是A作为B的父元素
prependTo:与prepend相反
其实有没有"To",区别在于谁是新增的元素,描述上相当于是把什么添加到哪里与添加什么到哪里的区别
after:平级的,后面插入
insertAfter:与after描述主体不同而已
before:
insertBefore:
删除节点
remove():$("#id").remove();,该节点及其下面的后代节点都会被删除.返回值是被删除的节点的引用
$("").remove(selector);可以继续在remove中添加选择器
empty():清空节点内容
复制节点
$("").clone();默认清空下,被复制的元素不具有行为,如果想要连行为一同复制 clone(true)传递true参数
替换节点
replaceWith(HTML或DOM元素)
replaceAll:只是与replaceWith的元素参数位置不一样 $().replaceAll(被替换的元素);
包裹节点
wrap:$("strong").wrap("<b></b>");b把strong包裹起来
wrapAll:将所有的元素进行单独包裹
wrapInner:将每一个匹配元素的子内容包裹起来
属性
同时设置多个属性:$().attr("k1":"v1","k2":"v2")
删除属性:$().removeAttr("attrName")
样式操作
1 通过修改元素的class属性,把现成的样式覆盖旧样式
2 通过addClass方法,追加样式
3 removeClass 移除样式
4 css 直接设置样式
5 toggleClass 切换样式
6 hasClass 判断是否含有某个css样式
设置与获取HTML 文本 值
html():类似于JavaScript中的innerHTML,设置与获取的是被选中元素内的html代码
text():类似于JavaScript中的innerText,设置与获取被选中元素内文本内容
val():获取与设置value属性 同时还能选择下拉框 多选框 单选
选中下拉框 val(被选中的下拉框)
选中下拉框 val([第一个下拉框文本,第二个下拉框文本,...])
从最后一项往前读,option的value或text任意一项满足就会被选中,所有所有的value和text千万不要重复
多选框 val([ck1,ck2])
单选按钮:val([rd1])
下拉框也能使用attr进行选择
$("#single option:eq(1)").attr("select",true)
attr("checked",true),设置被选中
/*
* 遍历节点:
* children() 匹配元素的子元素,注意,不包括后代元素
* next() 后面紧邻的同辈元素
* prev() 前面紧邻的同辈元素
* siblings() 前后所有同辈元素
* closest() 最近的元素:
* 其他还有很多,详见jQuery文档
*/
<body> <ul></ul> <input type="button" value="添加"/> <div>被操作元素</div> <!--需求:提示用户输入,如果用户鼠标点击到文本框了,清除提示内容 在html5中,直接用autofocus和placeholder就能实现--> <input type="text" name="t1" value="提示用户输入"> <script type="text/javascript"> $(function(){ //获取焦点 $("input[name='t1']").focus(function(){ if ($(this).val() == "提示用户输入"){ $(this).val(""); } }) //失去焦点 $("input[name='t1']").blur(function(){ if ($(this).val() == ""){ $(this).val("提示用户输入"); } }) }) </script> </body>