jQuery DOM元素的操作总结一

DOM元素操作

    • 创建HTML
    • DOM元素选择
    • 通过关系查找jQuery对象的方法
    • 筛选和遍历jQuery对象
    • 操作元素的特性、属性和数据

创建HTML

  • 创建一个div并显示到页面上
<script>
$(function() {
    var div = $('
Hello
'
); console.log(div); div.appendTo('body'); //将div添加到body最后面 console.log($('div')); } </script>
  • 创建一个a标签并为其添加属性的两种方法
<script>
	var link = $('', {
        text: '百度',
        href: 'https://www.baidu.com',
        target: '_blank',
        title: '去往百度首页'
    });
    
    link.appendTo('body');
    
    var link2 = $('百度').attr({
        href: 'https://www.baidu.com',
        target: '_blank',
        title: '去往百度首页'
    });

    link2.appendTo('body');
</script>

DOM元素选择

<script>
    $(function () {
        var elements = $('li');
        console.log(elements.length); //获取li的数量
        
        console.log(elements[0]); //获取指定的DOM元素
        console.log(elements.get()); //获取全部的DOM元素
        console.log(elements.get(0)); //获取指定的DOM元素
        console.log(elements.get(-1)); //获取指定的DOM元素(从后向前)

        console.log(elements.eq(0));  //获取指定的jQuery对象
        console.log(elements.eq(-1)); //(从后向前)
        console.log(elements.first()); //获取第一个jQuery对象
        console.log(elements.last()); //获取最后一个jQuery对象

        console.log(elements.toArray()); //和get()作用一样
    });
</script>

通过关系查找jQuery对象的方法


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>methodstitle>
head>
<body>
<div id="box1">
    <div id="box2">
        <div id="box3">
            <p id="info">通过关系查找jQuery对象的方法p>
            <ul>
                <li class="item1">item1li>
                <li class="item2">item2li>
                <li class="item3">item3li>
                <li class="item4">item4li>
                <li class="item5">item5li>
                <li class="item6">item6li>
                <li class="item7">item7li>
                <li class="item8">item8li>
                <li class="item9">item9li>
            ul>
        div>
    div>
div>

<script src="jquery-1.12.4.js">script>
<script>
    $(function () {
        console.log($('#box3').children()); //获取匹配元素集合中每个元素的所有子元素
        console.log($('#box3').children('p')); //获取匹配元素集合中每个元素的所有p元素

        console.log($('#box3').contents()); //获取匹配元素集合中每个元素的所有子元素,包括文本的注释节点

        console.log($('#box3').find('.item1')); //获取当前匹配元素集合中每个元素的后代,有选择器筛选

        console.log($('ul, #box3').parent()); //获取当前匹配元素集合中每个元素的父元素
        console.log($('ul, #box3').parent('#box2')); //获取当前匹配元素集合中父元素为box2的元素

        console.log($('ul, #box3').parents()); //获取当前匹配元素集合中每个元素的祖先元素(从父到祖先)
        console.log($('ul, #box3').parents('#box2')); //获取当前匹配元素集合中祖先元素为box2的元素

        console.log($('.item1').parentsUntil('#box1')); //获取当前匹配元素集合中每个元素的祖先元素,知道遇到匹配的元素为止

        console.log($('.item1').closest('div')); //从元素本身开始,逐级向上级元素匹配,返回最先匹配的祖先元素
        
        console.log($('.item4').next('li')); //获取匹配元素集合中每个元素紧邻的后一个同辈元素
        console.log($('.item4').nextAll('li')); //获取匹配元素集合中每个元素之后的所有同辈元素
        console.log($('.item4').nextUntil('.item7')); //获取匹配元素集合中每个元素之后的所有同辈元素,直到遇到匹配选择器的元素为止

        console.log($('.item4').prev('li')); //获取匹配元素集合中每个元素紧邻的前一个同辈元素
        console.log($('.item4').prevAll('li')); //获取匹配元素集合中每个元素之前的所有同辈元素
        console.log($('.item4').prevUntil('.item1')); //获取匹配元素集合中每个元素之前的所有同辈元素,直到遇到匹配选择器的元素为止
        
        console.log($('.item4').siblings()); //获取匹配元素集合中所有元素的同辈元素
        console.log($('.item4').siblings('.item2')); 
    });
script>
body>
html>

筛选和遍历jQuery对象


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demotitle>
head>
<body>

<div id="box1">
    <div id="box2">
        <div id="box3">
            <p id="info">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, rem?p>
            <ul>
                <li class="item1">item1li>
                <li class="item2">item2li>
                <li class="item3">item3li>
                <li class="item4">item4li>
                <li class="item5">item5li>
                <li class="item6">item6li>
                <li class="item7">item7li>
                <li class="item8">item8
                    <ul>ul>
                li>
                <li class="item9">item9li>
            ul>
        div>
    div>
div>

<script src="jquery-1.12.4.js">script>
<script>
    $(function () {
        console.log($('.item1').add('.item2')); //将元素添加到匹配的元素集合中

        console.log($('li').not('.item2, .item3')); //将匹配的元素集合中删除元素
        console.log($('li').filter('.item2, .item3')); //将匹配的元素集合缩减为匹配选择器的新元素

        console.log($('li').not(function (index) { 
            return $(this).hasClass('item1');
        }));
        console.log($('li').filter(function (index) { 
            return $(this).hasClass('item1');
        }));

        console.log($('li').has('ul')); //将匹配元素集合缩减为包含特定元素的后代的集合

        console.log($('li').slice(0)); //将匹配的元素集合缩减为指定范围的子集(左闭右开)
        console.log($('li').slice(3, 5));
        console.log($('li').slice(-2)); //从后向前查两个

        console.log($('div').map(function (index, domElement) { //把当前匹配集合中的每个元素传递给函数,产生包含返回值的新jQuery对象
            return this.id;
        }));

        console.log($('li').each(function (index, domElement) { //对jQuery对象进行迭代,为每个匹配元素执行函数
            this.title = this.innerText;
        }));
        
		console.log($('#box3').children().is('p')); //根据选择器检查当前匹配元素集合

		console.log($('#box3').children().end()); //结束当前链接中最近一次删选操作,并将匹配元素集合返回到前一次的状态
        console.log($('#box3').end());
		
		console.log( //将item3也改变样式
            $('.item3').nextUntil('.item6').addBack().css('color', 'red')
        );
    });
script>
body>
html>

操作元素的特性、属性和数据


<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>demotitle>
head>

<body>
    <img id="logo" src="../logo1.jpg" alt="jQuery logo" title="jQuery logo" />
    <img id="logo2" src="../logo1.jpg" alt="jQuery logo" class="img-jquery2" title="jQuery logo" />
    <input type="checkbox" id="check" tabindex="1" style="width:50px; height: 50px;" title="Check this!" description="just a checkbox" />
    <script src="../../../vendor/jquery-1.12.4.js">script>
    <script>
    $(function() {
        var img = $('img');
        var checkbox = $('#check');

        console.log(img.attr('id')); //返回匹配元素的值(特性)
        console.log(checkbox.attr('TABINDEX')); //大小写都可以

        console.log(img.attr({ //设置元素的属性和值
            title: 'new title2',
            alt: 'new alt2'
        }));
        console.log(img.attr('title', function(index, previousValue) { //函数方法
            return previousValue + '-' + index;
        }));

        console.log(img.removeAttr('title alt')); //移除所有匹配的元素
		
		console.log(checkbox.prop('checked')); //返回匹配元素的值(属性)
		console.log(checkbox.prop('checked', true)); //设置元素的属性和值
		console.log(checkbox.removeProp('checked')); //移除属性

		img.data('description', 'jquery logo'); //设置数据的值
        console.log(img.data('description')); //获取数据的值
		$('#logo').removeData(); //删除数据
        console.log($('#logo').data());
    });
    script>
body>

html>

你可能感兴趣的:(前端)