jQueryDOM操作

Posted 2021-03-19 autism-dong

jQuery将js中的属性封装成方法

类样式addClass("类样式名1" ["类样式名2" "类样式名2"])
__-| toggleClass() 切换加样式,移除样式
-| toggle() 切换隐藏显示
--->判断进行切换
一个函数内进行效果判断后进行切换
$(this) DOM对象转换为jQuery对象

复合事件
.hover(
function(){
//鼠标移入方法操作
}
function(){
//鼠标移出方法操作
}
//如果只需要一个操作,一个函数也可以
//其中有toggle切换,只需要一个
)

页面加载事件-->
页面加载完成后-->只执行一次
为页面元素绑定事件
===================================
一 . 样式操作
addClass()
removeClass()
hasClass()
toggleClass()
复合事件:hover 中定义鼠标移入移出函数
样式获取css("name") ____键值对一个函数-->获取
样式设置css("name","value")____两个函数-->设置

二 . 内容操作/value值操作
非键值对---无参数-->获取
---一个参数-->设置
.html()
.text()
.val()

三 . 属性操作
.attr(name)
.attr(name,value)

四 . 节点操作
1.创建节点
var a = "<li></li>"(html元素)
var b =
2.插入节点
插入子节点 父.append(子) prepend
子.appendTo(父) prependTo
插入同辈节点 after before
insertAfter insertBefore
3.删除节点
.remove();
.empty(); 清空内容
.detach 移除元素后,返回的元素保留该元素绑定的事件,不包括子元素绑定的事件

4.替换节点
旧节点.replaceWith(新节点)
新节点.replaceAll(旧节点)

5.克隆节点
clone(true/false(默认)) ------是否绑定事件-->操作后返回的原节点是否绑定事件

6.节点遍历

$jquery对象[0]-->会将jquery对象转换为DOM对象
jquery对象类似于数组,通过下标可以转换为DOM对象

隐式迭代 数组对象中得到其中一个下标--->.eq(index)函数

====================================
遍历节点集合
1.for循环+eq(index)
2. 集合名.each(function(){

})
//后台数据库传入集合
var stus=[{"stuNo":"001","stuName":"小明"},{"stuNo":"002","stuName":"小红"}]
集合中存储对象,对象的属性以键值对形式存储
$.each(集合名,function(index,curElement){
//index 遍历到的当前元素下标
//遍历到的当前元素
alert(curElement.stuNo);
})
===================================
函数.first() .last() VS 过滤选择器:first :last

选择器:直接选择一个
函数:集合中得到一个
不确定使用确切的哪个 ,
可以起到公用能力