查找节点
查找元素节点,使用jQuery选择器;
查找属性节点,在查找到元素节点后,使用attr()方法,传入要查询的属性的名字
创建节点
在DOM操作中往往需要动态创建HTML内容,使文档在浏览器里呈现效果发生变化,并且达到各种人机交互的目的
$(html)方法会根据传入的html标记字符串,创建一个DOM对象,并将这个DOM对象包装成一个jQuery对象后返回
var li =$("<li title="香蕉">香蕉</li>") //创建元素节点时将文本节点和属性节点一起创建了 $(ul).append(li) //动态创建的元素节点不会自动添加到文档中,而是需要其他方法将其插入文档中
插入节点
1 append() appenTO() //元素内部追加内容 2 prepend() prependTo() //元素内部前置内容 3 after() insertAfter() //元素之后插入内容 after 和 before 是作用于同级节点 4 before() insertBefore //元素之前插入内容
删除节点
remove() //拿到jQuery对象后直接调用remove()方法就可以了。如果jQuery对象包含若干DOM节点,实际上可以一次删除多个DOM节点,该节点包含的后代节点也会同时被删除 empty() //清空元素中的所有后代节点
复制节点
clone() //若传入参数true,复制元素的同时复制元素中绑定的事件 //eg:单击li元素后需要再复制一个li元素 $("ul li").click(function(){ $(this).clone().appendTo("ul") //复制当前点击的节点,并将它追加到<ul>元素中 })
替换节点
replaceWith() replaceAll() //颠倒了replacewith()操作
属性操作
获取和设置元素属性 attr() 传入一个参数时,获取属性;传入两个参数时,设置属性 var p_txt =$("p").attr("title") //获取属性 $("p").attr("title","your title") //设置属性 $("p").attr{"title":"your title","name":"your name"} //一次性设置多个属性是,用key/value形式
删除元素属性 removeAttr()
$("p").removeAttr("title")
样式操作
设置和获取样式 attr() var p_class =$("p").attr("class") //获取样式 $("p").attr("class","high") //设置样式,若原来存在样式,则会被high替代
追加样式 addClass()
如果给一个元素添加了多个class值,那么就相当于合并了它们的样式
如果有不同的class设定了同一样式属性,则后者覆盖前者
$("p").addClass("another")
移除样式 removeClass() //不加参数时,删除所有class
判断是否有某个样式
hasClass() 判断元素中是否含有某个class,如果有,返回true,否则返回false
$("p").hasClass("another")
设置和获取HTML、文本和值
1.html()方法 读取或设置某个元素中的html代码 $("p").html("<strong>选择你最喜欢的水果</strong>") //设置p的html代码 var p_html =$("p").html() //获取p的html代码
2.text()方法 读取或设置某个元素中的文本内容,与html()用法一样
3、value()方法 获取和设置元素的值,无论元素是文本、下拉列表还是单选框,它都可以返回元素的值,如果元素为多选,则返回一个包含所有选择的值的数组
遍历节点
1、children() //子元素 2、next() //后面紧邻的同辈元素 3、prev() //前面紧邻的同辈元素 4、silblings() //前后所有的同辈元素 5、find() //搜索所有与指定表达式匹配的元素
CSS-DOM操作
css() 方法获取和设置元素的样式属性 var p_clor =$("p").css("color") //获取p的颜色 $("p").css("color","green") //设置颜色 $("p").css{"frontSize":"30px","backgroundColor":"#88888"} //一次性设置多个样式属性,用key/value形式