时间戳

首页 > 技术文章 > html jQuery

html jQuery

ham-731 2019-12-30 21:21 原文

一.对象选择

1.js 获取元素(父节点,子节点,兄弟节点)

   var test = document.getElementById("test");
　　var parent = test.parentNode; // 父节点
　　var chils = test.childNodes; // 全部子节点
　　var first = test.firstChild; // 第一个子节点
　　var last = test.lastChile; // 最后一个子节点　
　　var previous = test.previousSibling; // 上一个兄弟节点
　　var next = test.nextSibling; // 下一个兄弟节点

2.jquery 获取元素(父节点,子节点,兄弟节点)

$("#test1").parent(); // 父节点
    $("#test1").parents(); // 全部父节点
    $("#test1").parents(".mui-content");
    $("#test").children(); // 全部子节点
    $("#test").children("#test1");
    $("#test").contents(); // 返回#test里面的所有内容，包括节点和文本
    $("#test").contents("#test1");
    $("#test1").prev();  // 上一个兄弟节点
    $("#test1").prevAll(); // 之前所有兄弟节点
    $("#test1").next(); // 下一个兄弟节点
    $("#test1").nextAll(); // 之后所有兄弟节点
    $("#test1").siblings(); // 所有兄弟节点
    $("#test1").siblings("#test2");
    $("#test").find("#test1");

3.元素筛选

// 以下方法都返回一个新的jQuery对象，他们包含筛选到的元素
    $("ul li").eq(1); // 选取ul li中匹配的索引顺序为1的元素(也就是第2个li元素)
    $("ul li").first(); // 选取ul li中匹配的第一个元素
    $("ul li").last(); // 选取ul li中匹配的最后一个元素
    $("ul li").slice(1, 4); // 选取第2 ~ 4个元素
    $("ul li").filter(":even"); // 选取ul li中所有奇数顺序的元素

二.常用属性和方法(增删改查)

1.元素和标签的添加

// 以下$A均表示当前jQuery对象，$B可以是选择器字符串、html字符串、DOM元素、jQuery对象

$A.before( $B ); // 在$A之前插入$B
$A.after( $B ); // 在$A之后插入$B

$A.insertBefore( $B ); // 将$A插入到$B之前的位置
$A.insertAfter( $B ); // 将$A插入到$B之后的位置

$A.append( $B ); // 在$A内部的末尾位置追加$B
$A.appendTo( $B ); // 将$A追加到$B内部的末尾位置

$A.prepend( $B ); // 在$A内部的开头位置追加$B
$A.prependTo( $B ); // 将$A追加到$B内部的开头位置

$A.wrap( $B ); // 在$A的外侧包裹$B
$A.unwrap( ); // 只移除$A的父元素的标签
$A.wrapAll( $B ); // 在整个$A的外侧用单个$B将其包裹起来
$A.wrapInner( $B ); // 在$A的内侧包裹$B

2.元素的常用方法

$A.clone(); // 克隆一个$A
$A.empty(); // 清空$A的所有内容
$A.remove(); // 删除$A及其绑定的事件、附加数据等
$A.detach(); // 删除$A，但保留其绑定的事件、附加数据等
$A.replaceAll( $B ); // 用$A替换$B
$A.replaceWith( $B ); // 用$B替换$A

三.标签属性修改(DOM属性操作)

1.文本操作

.txet
.html()

2.设置和获取属性

.attr() // 设置属性
.prop()//获取匹配的元素集中第一个元素的属性

四.常用实例

1.jQuery对象和野生js对象互相转换

$(js对象)  //把js对象转换为jQuery对象
$(对象)[0] // 把jQuery对象转为js对象

2.绑定事件 .on / .one

$(对象).on(事件,函数())  //绑定事件
$(对象).one(事件,函数())  //绑定一次事件

3.Ecah和forEcah

list.forEach((item)=>{}) //野生js的forEcah返回的第一个元素是对象,第二个是下标
list.forEach((item,index)=>{})  

$(对象).each

推荐阅读