[JQ_node2] JQ dom操作&常用方法

其他 2018-10-31 17:42:27 阅读次数: 0
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/express_yourself/article/details/53507451

jq中的dom操作

  1. 创建元素节点
    javascript： var node = document.createElement(‘div’);
    jQuery：$(‘<div></div>’);

  2. 创建文本节点
    javascript：var txt = document.createTextNode(‘文字文本’);
    jQuery中创建一个有文本的div节点：
    $(‘<div>My Demo</div>’);

  3. 插入节点
    javascript： 

    var Newp = document.createElement(“p”);
document.body.appendChild(Newp);

    jQuery：

    $( a ).append( c );
append  ----a里末尾插c
appendTo  --c插到a里末尾 
prepend -----a里前面插c
prependTo --c插到a里前面
after------a之后插c
insertAfter --c插到a之后
before -----a之前插c
insertBefore -c插到a之前

  4. 删除节点
    javascript： 

    var b = document.getElementById(“test”);
var c = b.parentNode;
c.removeChild(b);

    jQuery：

    $(‘#test′).remove();
remove() 删除节点
empty() 清空节点内容

  5. 替换节点：
    javascript： 

    Ele.replaceChild( newNode , oldNode );
oldNode必须是Ele的一个子节点。

    jQuery：

    $(“<p>替换 </p>”).replaceAll(“#test1″);

  6. 复制节点:
    javascript： 

    var mes = document.createTextNode("hello world");
var Newp = document.createElement("p");
Newp.appendChild(mes);
document.body.appendChild(Newp);
var clonep = Newp.cloneNode(true);
document.body.appendChild(clonep);

    jQuery：

    var clone_a = a.clone(true);  深复制包括事件处理函数
$('body').append(clone_a);

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM节点</title>
<style>
*{margin:0;padding:0;list-style: none;}
#box{
    width:500px;
    border:1px solid #333;
}
h1,h2,h3,div,button{
    font-size: 30px;
    color:#333;
}
span{color:blue;font-size: 40px;}
</style>
</head>
<body>
<button class="remove">remove</button>
<button class="empty">empty</button>
<button class="replaceAll">replaceAll</button>
<div id="box">
    <h1>我是h1标签</h1>
    <h2>我是h2标签</h2>
    <h3>我是h3标签</h3>
    <h4>我是h4标签</h4>
</div>
<script src="jquery-1.8.3.js"></script>
<script>
//JS创建节点
    var oDiv=document.createElement('div');
    /*var Text=document.createTextNode('JS创建的div节点11');
    oDiv.appendChild(Text);*/
    oDiv.innerHTML='JS创建的div节点22';
    document.body.appendChild(oDiv);


//JQ创建节点
    var a=$('#box');
    var c=$('<span>我是JQ创建的span</span>');
    console.log(c);
    console.log(a);
    // a.append(c);
    // $(a).append($(c));
    // $('#box').append('<span>My Demo</span>');
    // $('#box').append($('<span>My Demo</span>'));


    // $(a).append(c);
    // $(c).appendTo(a);

    // $(a).prepend(c);
    // $(c).prependTo(a);

    // $(a).after(c);
    // $(c).insertAfter(a);

    //$(a).before(c);
    // $(c).insertBefore(a);

/*jQuery中删除节点*/
    $('.remove').click(function(){
        $('#box h2').remove();
    })
/*jQuery中清空节点内容*/
    $('.empty').click(function(){
        $('#box h4').empty();
    })
/*jQuery中替换节点*/
    $('.replaceAll').click(function(){
        $('<p>我是替换的p标签</p>').replaceAll('#box h3');
    })
/*jQuery中复制节点*/
    $('#box h1').click(function(){
        alert('复制前的h1');
    })
    //深复制包括事件处理函数
    var cloneaa=$('#box h1').clone(true);
    $(a).prepend(cloneaa);
</script>
</body>
</html>

jq常用方法

.children() 获得匹配元素集合中每个元素的所有子元素
.next() 获得匹配元素集合中每个元素的下一个同辈元素
.prev() 获得匹配元素集合中每个元素紧邻的上一个同辈元素
.parent() 获得当前匹配元素集合中每个元素的父元素
.find(child) 获得当前匹配元素集合中每个元素的后代
.siblings() 获得匹配元素集合中所有元素的同辈元素
.end() 将匹配的元素变为前一次的状态
.each() 循环，为每个匹配的元素执行函数
.is() 根据选择器、元素或 jQuery 对象来检测匹配元素集合，如果有元素匹配给定的参数，则返回 true

.addClass() 为每个匹配的元素添加指定的类名
.removeClass() 从匹配的元素中删除全部或者指定的类
.toggleClass() 从匹配的元素中添加或删除一个类
.hasClass() 检查元素是否含有某个特定的类，有则返回true
.attr() 设置或返回被选元素的属性值
.removeAttr() 从每一个匹配的元素中删除一个属性
.html() 设置或取得第一个匹配元素的html内容
.val() 设置或返回匹配元素的值(表单元素)

.css() 设置或返回匹配元素的样式属性
.width() 设置或返回匹配元素的宽度
.height() 设置或返回匹配元素的高度
.scrollLeft() 设置或返回匹配元素相对滚动条左侧的偏移
.scrollTop() 设置或返回匹配元素相对滚动条顶部的偏移
.position() 获取匹配元素相对于定位父元素的偏移
.offset() 获取或设置匹配元素在当前视口的相对偏移
.substr() 从字符串中抽取指定位置开始指定长度的字符

JQ常用方法1

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQ常用方法1</title>
<style>
*{margin:0;padding:0;list-style: none;}
#box{
    width:500px;
    border:1px solid #333;
}
h1,h2,h3,h4,div,button,li,span{
    font-size: 30px;
    color:#333;
}
.li22{
    color:red;
    font-size: 50px;
    background: blue;
}
</style>
</head>
<body>
<button class="btn1">addClass</button>
<button class="btn2">toggleClass</button>
<button class="btn3">attr</button>
<button class="btn4">removeAttr</button>
<button class="btn5">html&val</button>
<input class="ipt" type="text">
<ul class="list">
    <li>li1111</li>
    <li class='li2'>li2222</li>
    <li class="li3 bg">li3333</li>
    <li>li4444</li>
    <li>li5555</li>
</ul>
<div class="box">
    <span>我是span标签111</span>
    <span>我是span标签222</span>
    <span>我是span标签333</span>
    <span>我是span标签444</span>
</div>
<ul class="list">
    <li>li6666</li>
    <li class="li3">li7777</lsi>
    <li>li8888</li>
    <li>li9999
        <span class='html1'>我是li里面的span标签</span>
    </li>
</ul>
<script src="jquery-1.8.3.js"></script>
<script>
// children() 获得匹配元素集合中每个元素的所有子元素
var $lis=$('.list').children();
// var $lis=$('.list li')//同上
console.log($lis.length);//9

//next() 获得匹配元素集合中每个元素的下一个同辈元素
$('.li3').next().css('background','red');
// $('.li3+li').css('background','orange');

// prev() 获得匹配元素集合中每个元素紧邻的上一个同辈元素
$('.li3').prev().css('background','yellow');

//parent() 获得当前匹配元素集合中每个元素的父元素
$('.li3').parent().css('border','2px solid red');

//find(child) 获得当前匹配元素集合中每个元素的后代
$('.list').find('li').css('color','blue').find('span').css('color','red');

//siblings() 获得匹配元素集合中所有元素的同辈元素
$('.box span:eq(1)').siblings().css('border','2px solid blue');

//end() 将匹配的元素变为前一次的状态
$('.list').find('li').css('color','blue').find('span').css('color','red').end().css('color','black');



// addClass() 为每个匹配的元素添加指定的类名
$('.btn1').click(function(){
    $('.list .bg').addClass('abc');
})
// toggleClass() 从匹配的元素中添加或删除一个类
 $('.btn2').click(function(){
    $('.list .li2').toggleClass('li22');
})
// hasClass() 检查元素是否含有某个特定的类，有则返回true
// attr() 设置或返回被选元素的属性值
$('.btn3').click(function(){
    $('.list .li2').attr('classm','bcd');//设置属性
    $('.list .li2').attr('classm');//获取
    console.log($('.list .li2').attr('classm'));

})
// removeAttr() 从每一个匹配的元素中删除一个属性
$('.btn4').click(function(){
    $('.list .li2').removeAttr('class');

})
// html() 设置或取得第一个匹配元素的html内容
// val() 设置或返回匹配元素的值(表单元素)
$('.btn5').click(function(){
    $('.html1').html('<span>我是html()方法设置的值</span>');//设置
    $('.ipt').val('请输入电话');//设置
})

</script>
</body>
</html>

each&is方法：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin:0;padding:0;list-style: none;}
#box{
    width:500px;
    border:1px solid #333;
}
h1,h2,h3,h4,div,button,li,span{
    font-size: 30px;
    color:#666;
}
</style>
</head>
<body>
<ul class="list">
    <li>li1111</li>
    <li>li2222</li>
    <li class="li3">li3333</li>
    <li>li4444</li>
    <li>li5555<span>我是li里面的span标签</span></li>
</ul>
<script src="jquery-1.8.3.js"></script>
<script>
    var $lis=$('.list li');
/*为每个li添加背景颜色*/
    //一般写法:
    // $lis.css('background','yellow');

    //each写法一：
    /*$lis.each(function(){
        $(this).css('background','pink');
    })*/


    //each写法二（）：
    /*$lis.each(function(i){
        $(this).css('background','pink');
        console.log(i);//索引值
    })*/


    //each写法三：
    /*$lis.each(function(i,target){//target-->当前执行函数的元素
        $(target).css('background','pink');
        console.log(i);//索引值
    })*/

    /*$lis.each(function(i,target){//target-->当前执行函数的元素
        $(target).click(function(){
            console.log(i);//索引值
        })

    })*/

    //each--类的方法应用
    /*$.each($lis,function(i,target){
        $(target).css('background','yellow');
        console.log(i);//索引值
    })*/

    /*var arr=['aa','bb','dd'];
    $.each(arr,function(i,item){//遍历数组
        console.log(i);//0,1,2
        console.log(item);//aa,bb,dd
    })*/

    /*var obj={a:11,b:22,c:33}
    $.each(obj,function(key,val){
        console.log(key);//a,b,c
        console.log(val);//11,22,33
    })*/

/*is()--根据选择器、元素或 jQuery 对象来检测匹配元素集合，如果有元素匹配给定的参数，则返回 true*/
    $lis.click(function(){
        if ($(this).is('.li3')) {
            $(this).css('background','pink')
        }else{
            $(this).css('background','yellow');
        }

    })
</script>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/express_yourself/article/details/53507451
jq
今日推荐
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
周排行
浏览器对同一域名进行请求的最大并发连接数
React Hook之自定义Hook
【转】MyBatis缓存机制
-Java-泛型
自动化测试常用脚本-发送邮件
LeetCode#859: Buddy Strings
java、Python处理字符串
第二篇の博客
Hadoop伪分布式环境安装
SQL Server进阶（十一）临时表、表变量
每日归档
更多
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022