jQuery核心操作详解-CSDN博客

二、jQuery基本操作

1、样式操作
   1.设置和获取样式
       设置
           css(name,value)
           css({name:value,name:value})
       获取
           css()
   2.追加样式和删除样式
       追加
           addClass()
       删除
           removeClass()
       包含
           hasClass()
       切换
           toggleClass() 类似开关点击一下添加再点击一下删除
2、内容操作
   1.HTML代码操作
       html() 类似与js的innerHTML
           添加html标签代码
           于获取第一个匹配元素的HTML内容或文本内容
       html(content)
           用于设置所有匹配元素的HTML内容或文本内容
   2.标签内容操作
       text()
           可以设置或者获取元素的文本内容（不包括HTML标签）
       text(content)
           用于设置所有匹配元素的文本内容
   3.属性值操作
       val() 可以获取或者设置表单元素的value属性值
3、节点操作
   1.查找节点（前面章节已讲）
       $(选择器)选择器获取节点
       $(element)将DOM节点转化为jQuery节点可以使用jQuery封装的方法
   2.创建节点
       $(html)创建新的jQuery节点
   3.插入节点
       插入子节点
           A.append(B) 将B添加到A文本内容末尾
           A.appendTo(B) 将A添加到B文本内容末尾
           A.prepend(B) 将B添加到A文本内容之前
           A.prependTo(B) 将A添加到B文本内容之前
       插入同辈节点
           A.after(B) 将B添加到A标签后面
           A.insertAfter(B) 将A添加到B标签后面
           A.before(B) 将B添加到A标签之前
           A.insertBefore(B) 将A添加到B标签之前
   4.删除节点
       remove() 删除当前节点
       empty() 清空所有子节点
       detach() 删除当前节点但是保留事件附件数据
   5.替换节点
       A.replaceAll(B) 用A替换B
       A.replaceWith(B) 用B替换A
   6.复制节点
       A.clone(true) 复制A节点，然后返回一个复制后的A节点
                               true表示复制事件，false表示不复制
4、属性操作
   1.设置或者获取元素属性
       attr(name)

       attr(name,value)
       attr({name:value,name:value})

   2.删除元素属性
       removeAttr(name) 一次只能删除一个
5、节点遍历
   1.遍历子元素
       children() 包含所有子元素但是不包含子元素的子元素
   2.遍历同辈元素
       next 紧邻其后
       prev 紧邻其前
       siblings 遍历前后所有同辈元素
   3.遍历前辈元素
       parent() 返回直接父元素
       parents() 返回父，祖父。。。。。直到根目录html
   4.其它遍历方法
       each(function(){}) 为每个匹配的元素执行函数
       end()
       $("li").first().css("background","red").end().last().css ("background","green");
       这个案例就是为第一个li元素添加背景色红色，给最后一个li元素添加背景色绿色
       如果没有添加end(),在给第一个li元素添加红色背景色之后会在这个红色li子元素里寻找最后一个元素添加背景色，找不到就不会由任何操作
6、CSS-DOM操作
       css()   设置或返回匹配元素的样式属性
       height([value])   设置或返回匹配元素的高度
       width([value])   设置或返回匹配元素的宽度
       offset([value])   返回以像素为单位的top和left坐标。仅对可见元素有效
       offsetParent( )   返回最近的已定位祖先元素。定位元素指的是元素的CSS position值被设置为relative、absolute或fixed的元素
       position( )   返回第一个匹配元素相对于父元素的位置
       scrollLeft([position])   参数可选。设置或返回匹配元素相对滚动条左侧的偏移
       scrollTop([position])   参数可选。设置或返回匹配元素相对滚动条顶

jQuery基础知识点