jQuery的DOM、BOM操作
（DOM）
1.操作标签内容
(1)闭合标签
a. $(选择器).html() 取值赋值一体
取值:$(选择器).html()
设置: $(选择器).html(值)
特点：覆盖之前已经存在的内容，识别标签
b. $(选择器).text()
取值： $(选择器).html()
设置: $(选择器).html(值)
特点：覆盖之前已经存在的内容，不识别标签
(2)操作input的value
原生js：
获取：var value = input.value
设置：input.value = 值
jquery：
a.操作输入框
获取：$(选择器).val();
设置：$(选择器).val(值);
b.操作选择框
获取被选中元素的value：$(":checked").val();
设置选中元素：$(input标签).val([选中元素的val值])
<div><span>11</span></div>
<script src="jquery-1.11.3.min.js"></script>
<script>
//1.取值 $(选择器).html()
console.log($("div").html()); //<span>11</span>
//2.设置
//$("div").html("22"); //会覆盖之前的内容
//之前的+现在的
$("div").html($("div").html()+"<p>22</p>");//可以识别标签
//3.text
console.log($("div").text()); //1122 不识别标签
$("div").text("<p>33</p>")
</script>
<script>
//1.输入框获取
$(":text").val();
//2.输入框的设置
$(":text").val("abcd");
//3.操作单选框
//获取
$(":radio:checked").val();
//设置
$(":radio").val(['男']);
//4.多选
//获取
$(":checkbox:checked").val(); //只会获取到第一个被选择的值
//设置
$(":checkbox").val(['女',"玩游戏"]);
//5.下拉列表
$("select").val());
$("select").val(["哈尔滨"]);
</script>
2.操作标签属性
原生js：
设置：标签.属性名 = 属性值
获取：var 变量 = 标签.属性名
DOM：可以获取自定义属性
设置：标签.setAttribute("属性名","属性值")
获取：标签.getAttribute('属性名')
jquery：
设置：$(选择器).attr(属性名,属性值)
获取：$(选择器).attr(属性名)
删除：$(选择器).removeAttr(属性名)
设置：$(选择器).prop(属性名,属性值)
获取：$(选择器).prop(属性名)
删除：$(选择器).removeProp(属性名)
固有属性用prop (class id title checked)，自定义属性用attr (index tag flag),除了input的checked需要使用prop以外，其他的都可以使用attr
//1.设置
$("div").attr("id","box1");
$("div").prop("id","box1");
//2.获取
console.log($("div").prop("id"))
console.log($("div").attr("index"))//0
//3.删除
$("div").removeAttr("class");
//4.获取checked属性
console.log($("input").prop("checked"));//false true
console.log($("input").attr("checked")); //undefined 'checked'
3.class相关操作
$(选择器).addclass(类名):追加 添加class，也可以 一次添加多个，在原来class的基础上追加
$(选择器)removeClass(类名):删除 删除整个class，不只是让class=” “；
$(选择器).hasClass(类名):查找 是否有了某个类名，返回是布尔值
$(选择器).toggleClass(类名):切换 如果选择器没有这个类名则添加，如果有则删除，达到一个切换的效果
$("div").mouseover(function(){
//1.addClass
$("div").addClass("active");
});
$("div").mouseout(function(){
//1.removeClass
$("div").removeClass("active");
});
$("div").click(function(){
//toggleClass:开关效果 如果没有这个class就添加，有就删除
$("div").toggleClass("active");
});
//hasClass() : 判断当前元素是否存在某个class
console.log($("div").hasClass("box")); //有就是true 没有就是false
4.css样式操作
原生js：
获取：var 变量 = 标签.style.属性名
设置：标签.style.属性名 = 属性值
jquery：
设置：$(选择器).css(属性名,属性值)
获取：$(选择器).css(属性名)
批量操作：设置：$(“选择器”).css({属性名：属性值，属性名：属性值})
特点：取值赋值一体，给的值不对，不会报错，只是这个效果无效
//1.获取
var w = $("div").css("width");
//2.设置
$("div").css("background","green");
$("div").css("margin","250px")//数字 200，字符串带单位：“200px”
//3.批量操作
$("div").css({//批量设置是用对象
width:300,
height:300,
background:"orange",
fontSize:20 //可以加引号也可以不加，不加的话需要使用驼峰
});
var o = $("div").css(["width","height"]);//批量获取是用数组
console.log(o); //{width: "300px", height: "300px"}
console.log(o.width); //单独取一个变量.样式名
5.节点操作
原生js：
创建：
document.createElement(标签名) : 标签节点
document.createTextNode(文本内容) :文本节点
添加：
追加：父元素.appendChild(子节点)
在某个元素之前添加：父元素.insertBefore(newChild,refChild)
删除：
标签.remove(); 删除自己本身， ie8不兼容
父元素.removeChild(子节点)； 删除父元素中的某个子元素
替换：
父元素.replaceChild(newChild,refChild)
复制：
被复制的节点.cloneNode(boolean);
默认false：只复制标签没有内容 true：复制标签和内容
查：
获取子元素：
父节点.children; 非标准属性，只获取标签
父节点.childNodes; 标准属性，会获取到文本，标签，注释节点
获取父元素：
子节点.parentNode;获取直接父节点
子节点.offsetParent;获取定位父节点，没有定位父元素获取到body
获取首尾节点：
父节点.firstElementChild || 父节点.firstChild
父节点.lastElementChild || 父节点.lastChild
兄弟节点：
参考节点.previousElementSibling ||参考节点.previousSibling
参考节点.nextElementSibling ||参考节点.nextSibling
ie8+不兼容：
documet.querySelector(选择器)； 获取被选中元素的第一个
documet.querySelectorAll(选择器)； 获取所有被选中的元素
jquery：
创建： $("<li></li>")
添加：
追加：
$("父节点").append('子节点')
$("子节点").appendTo(父节点)
在头部添加：
$("父元素").prepend('子元素')
$("子节点").prependTo('父节点')
在某个元素之前添加：
$("参考元素").before('新元素')
$("新元素").insertBefore('参考元素')
在某个元素之后添加：
$("参考元素").after('新元素')
$("新元素").insertAfter('参考元素')
删除：
$().remove():删除元素，返回被删除元素,方便下一次使用，不会保留元素上的事件
$().detach()：删除元素，返回被删除元素,方便下一次使用，会保留元素上的事件
$().empty():清空父元素中的子元素
替换：
$("被替换的元素").replaceWith('替换的元素')
$("替换的元素").replaceAll('被替换的元素')
复制：
$(被复制的元素).clone(boolean);
参数false：不会复制js中添加的事件
参数true：会复制js中添加的事件
查：
查找子元素：
$(父元素).children(选择器) ： 找直系的子元素
$(父元素).find(选择器) : 找后代 不考虑层级
找父元素：
$("子元素").parent() : 找直系父元素
$("子元素").parents()：找所有的父元素
找兄弟：
$("参考元素").next(); 下一个兄弟
$("参考元素").nextAll(); 下面所有的兄弟
$("参考元素").prev(); 上一个兄弟
$("参考元素").prevAll(); 上面所有的兄弟
$("参考元素").siblings(); 所有的兄弟
过滤：
$("li").not("#box").css("background","red"); 找到选择器选中的标签，除了
$("li").filter("#box").css("background","red"); 找到选择器选中的标签，只有
(BOM)
1.获取元素的宽高
原生js：
style：
元素内容宽：标签.style.width
元素内容高：标签.style.height
元素的定位距离：标签.style.top
元素的定位距离：标签.style.left
client：
元素可视宽高：标签.clientWidth/Height ; 内容+padding
屏幕可视宽高：document.documentElement.clientWidth/Height
offset：
元素占位宽高：标签.offsetWidth/Height ； 内容+padding+border
元素的位置：标签.offsetTop/Left 当前元素的顶部到定位父元素的距离，如果没有定位父元素到body的距离
scroll：
滚动事件：onscroll
页面的滚动：document.documentElement.scrollTop||document.body.scrollTop
query:
style：
元素内容宽：$(选择器).width()
元素内容高：$(选择器).height()
元素的定位距离：$(选择器).position() {top: 8, left: 8}
client:
元素可视宽高：$("div").innerWidth()/innerHeight(); 内容+padding
文档可视宽高：$(document).innerWidth()/innerHeight()
屏幕可视宽高：$(window).innerHeight()/innerWidth();
offset:
元素占位宽高：标签.outerWidth/Height(boolean) ; 内容+padding+border
默认是false，不包含margin， true：包含margin
元素的位置：标签.offset(); 当前元素到**body**的距离
scroll：
滚动事件：onscroll
页面的滚动：$(window).scrollTop()
//1.style
$("div").width();
$("div").height();
$("div").position(); //{top: 8, left: 8}
$("div").position().top; //8
//2. client
$("div").innerWidth(); //内容+padding
$(document).width();
$(document).innerWidth();//文档
//3.offset
//outerWidth(boolean) 默认是false：不包含margin true：包含margin
$("div").outerWidth(true); // 内容+padding+border 160
$("#box1").offset(); //{top: 150, left: 58}
$("#box1").offset().top;
//4. scroll
$(window).scroll(function(){
//获取页面滚动距离
console.log($(window).scrollTop());
});
扫一扫
168
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
