Day16 DOM &jQuery

一、本节主要内容

JavaScript
    正则表达式
    字符串操作的三个方法

DOM(知道就行,一般使用jQuery)
    查找:
        直接查找:
            document.getElementById 根据ID获取一个标签
            document.getElementsByName   根据name属性获取标签集合
            document.getElementsByClassName 根据class属性获取标签集合
            document.getElementsByTagName   根据标签名获取标签集合
        间接查找:
            parentNode  //父节点
            childNodes  //所有子节点
            firstChild  //第一个子节点
            lastChild   //最后一个子节点
            nextSibling //下一个兄弟节点
            previousSibling //上一个兄弟节点

            parentElement   //父节点标签元素
            children    //所有子标签
            firstElementChild   //第一个子标签元素
            lastElementChild    //最后一个子标签元素
            nextElementChild    //下一个兄弟标签元素
            previousElementSibling  //上一个兄弟标签元素
    操作:
        t = document.getElementById(‘i2‘)

jQuery
    $("#i1")
    模块,DOM和JavaScript

    class操作:
        className
        classList.add
        classList.remove(cls)

        样式修改:
            <input type="text" style="color:red;font-size:40px" />
            tag = ...
            tag.style.color = ‘white‘;
            tag.style.fontSize = ‘200px‘;

        属性:
            setAttribute
            getAttribute
            removeAttribute

            tabObj.checked = true
            jQuery:操作数据,prop(checked.true)

        创建标签:
        (1)对象(优先使用)
            var tag = document.createElement(‘a‘)
            tag.innerText("smartisian")
            tag.className = "c1"
            tag.href = "http://t.tt"

            p1 = document.getElementById(‘d1‘);
            p1.insertAdjacentElement(‘afterBegin‘, document.createElement(‘‘));

            tag.innerText = ‘test‘;
            t1.insertBefore(tag,t1.children[0])
        (2)字符串
            var tag = "<a class="c1" href="http://t.tt">T3</a>"

            p1 = document.getElementById(‘d1‘);
            p1.insertAdjacentHTML(‘beforeEnd‘,tag);
            p1.insertAdjacentHTML(‘afterEnd‘,tag);
            p1.insertAdjacentHTML(‘beforeBegin‘,tag);
            p1.insertAdjacentHTML(‘afterBegin‘,tag);
            p1.insertAdjacentText(‘afterBegin‘,tag);

        点赞:
            创建标签,定时器(大小、位置、透明度)
            1、this当前触发事件的标签
            2、createElement
            3、appendChild
            4、setInterval创建定时器
            5、clearInterval删除定时器
            6、removeChild删除子标签

        定时器:
            setTimeOut,clearTimeOut
            setInterval 多次定时器
            clearInterval   清除定时器

        滚动条:
            窗口滚动条
            div的滚动条
            overflow:auto
        事件:
            1、this当前事件
            2、全局事件,window.onclick()、window.onKeyDown = function(){}
            3、event,包含了事件相关内容
            4、默认事件
                自定义优先:a,form
                onclick="return SubmitForm();
                默认优先:checkbox

    查找:
        选择器
            id选择器:#id
            标签选择器
            类选择器
            组合选择器:#i1,#i2,#i3
            层级选择器:#i1 .c1(在i1的子子孙孙里找class=‘c1‘)   parent > child(孩子里找)
            $(‘input:eq(1),#i1 .item‘)
        筛选器
        $(‘#i1‘).find(‘.item‘)
        $(‘#i1‘).eq(1)
    操作:
        CSS
        属性
            $(‘#i1‘).html() #获取html内容
            $(‘#i1‘).css(‘fontSize‘,‘18px‘)
                tag.scrollTop = 0;(原来操作)

            $(‘#i1‘).scrollTop

        文本操作
    事件:
        --优化
            1、如何使用jQuery绑定事件
            2、当文档加载完毕后,自动执行
            $(function(){

            });
            3、延迟绑定
            4、return false
    扩展:
        $.login
        Form表单验证
    Ajax:
        偷偷的发请求

    --jQuery循环

二、DOM

1、innerText

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="i1">
        <a>1</a>
        <a>2</a>
        <a>3</a>
    </div>
    <input type="text" id="i2" />
    <!--innerText-->
    <a id="i3" href="http://www.google.com">Goo<span>gle</span></a>
</body>
</html>

2、innerText & innerHTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="text" id="i1" />
    <!--innerText只获取文本内容-->
    <!--innerHTML既获取文本内容又可以拿到span标签中的内容-->
    <a id="i2" href="http://www.bing.com.cn">必应</a>
</body>
</html>

3、搜索框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>搜索框</title>
</head>
<body>
    <input id="i1" type="text" value="请输入关键字" onfocus="Focus();" onblur="Blur()" />
    <input id="i2" type="text" value="请输入关键字" onfocus="Focus();" />
    <script type="text/javascript">
        function Focus() {
            //console.log(‘Focus‘);
            //获取标签,清空
            var tag = document.getElementById(‘i1‘);
            //判断框中是否为:请输入关键字
            if(tag.value == "请输入关键字"){
                tag.value = "";
            }
        }
        function Blur() {
            //console.log(‘Blur‘);
            //移走时加上“请输入关键字”
            var tag = document.getElementById(‘i1‘);
            var val = tag.value;
            //
            if(val.trim().length == 0){
                tag.value = "请输入关键字";
            }
        }
    </script>
</body>
</html>

三、JavaScript

1、对话框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>对话框</title>
    <style>
        .hide{
            display: none !important;
        }
        .shade{
            position: fixed;
            top:0;
            bottom: 0;
            left:0;
            right:0;
            /*background-color: black;*/
            /*opacity: 0.6;*/
            background-color: rgba(0,0,0,.6);
            z-index: 1000;
        }
         .modal{
             height:200px;
             width:400px;
             background-color: white;
             /*设置居中*/
             position: fixed;
             top:50%;
             left:50%;
             margin-left: -200px;
             margin-top: -100px;
             z-index: 1001;
        }
    </style>
</head>
<body>
    <div style="height: 2000px;background-color: #dddddd;">
        <input type="button" value="点我" onclick="ShowModal();" />
    </div>
    <div id="shade" class="shade hide"></div>
    <div id="modal" class="modal hide">
        <!--标签什么都不操作时,设置javascript:void(0)-->
        <a href="javascript:void(0);" onclick="HideModal();">取消</a>
    </div>
    <script>
        function ShowModal() {
            var t1 = document.getElementById(‘shade‘);
            var t2 = document.getElementById(‘modal‘);
            t1.classList.remove(‘hide‘);
            t2.classList.remove(‘hide‘);
        }
        function HideModal() {
            var t1 = document.getElementById(‘shade‘);
            var t2 = document.getElementById(‘modal‘);
            t1.classList.add(‘hide‘);
            t2.classList.add(‘hide‘);
        }
        window.onkeydown = function (event) {
            if(event.keyCode == 27){
                HideModal();
            }
        }
    </script>
</body>
</html>

2、实现全选、取消、反选(第一种方法,会有问题)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="button" value="全选" onclick="CheckAll()" />
    <input type="button" value="取消" onclick="CancelAll()" />
    <input type="button" value="反选" onclick="ReverseAll()" />
    <table border="1px">
        <thead>
            <tr>
                <th>序号</th>
                <th>用户名</th>
                <th>密码</th>
            </tr>
        </thead>
        <tbody id="tb">
            <tr>
                <td><input type="checkbox" /> </td>
                <td>1</td>
                <td>11</td>
            </tr>
            <tr>
                <td><input type="checkbox" /> </td>
                <td>2</td>
                <td>22</td>
            </tr>
            <tr>
                <td><input type="checkbox" /> </td>
                <td>3</td>
                <td>33</td>
            </tr>
        </tbody>
    </table>
    <script>
        function CheckAll() {
            var tb = document.getElementById(‘tb‘)
            var trs = tb.children;
            for(var i=0;i<trs.length;i++){
                var current_tr = trs[i];
                var ck = current_tr.firstElementChild.firstElementChild;
                ck.setAttribute(‘checked‘,‘checked‘);
            }
        }
        function CancelAll() {
            var tb = document.getElementById(‘tb‘)
            var trs = tb.children;
            for(var i=0;i<trs.length;i++){
                var current_tr = trs[i];
                var ck = current_tr.firstElementChild.firstElementChild;
                ck.removeAttribute(‘checked‘);
            }
        }
        function ReverseAll() {
            var tb = document.getElementById(‘tb‘)
            var trs = tb.children;
            for(var i=0;i<trs.length;i++){
                var current_tr = trs[i];
                var ck = current_tr.firstElementChild.firstElementChild;
                if(ck.checked){
                    ck.checked = false;
                    ck.removeAttribute(‘checked‘);
                }else{
                    ck.checked = true;
                    ck.setAttribute(‘checked‘,‘checked‘);
                }
            }
        }
    </script>
</body>
</html>

3、点赞

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点赞</title>
    <style>
        .item{
            padding: 50px;
            position: relative;
        }
        item span{
            position: absolute;
            top: 49px;
            left: 71px;
            opacity: 1;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <div class="item">
        <a onclick="Favor(this);">赞1</a>
    </div>
    <div class="item">
        <a onclick="Favor(this);">赞2</a>
    </div>
    <div class="item">
        <a onclick="Favor(this);">赞3</a>
    </div>
    <div class="item">
        <a onclick="Favor(this);">赞4</a>
    </div>
    <script>
        function Favor(ths) {
            //ths=>this,当前触发事件的标签
            //console.log(ths.parentElement);
            var top = 49;
            var left = 71;
            var op = 1;
            var fontSize = 18;
            var tag=document.createElement(‘span‘);
            tag.innerText = ‘+1‘;
            tag.style.position = ‘absolute‘;
            tag.style.top = top + "px";
            tag.style.left =  left + "px";
            tag.style.opacity = op;
            tag.style.fontSize = fontSize + "px";
            ths.parentElement.appendChild(tag);
            var interval = setInterval(function () {
                top -= 10;
                left += 10;
                fontSize += 5;
                op -= 0.1;

                tag.style.top = top + "px";
                tag.style.left =  left + "px";
                tag.style.opacity = op;
                tag.style.fontSize = fontSize + "px";
                if(op <= 0.2){
                    //删除定时器
                    clearInterval(interval);
                    ths.parentElement.removeChild(tag);
                }
            },50);
        }
    </script>
</body>
</html>

4、定时删除

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="status" style="color: red;">

    </div>
    <input type="submit" onclick="DeleteStatus();" value="删除" />

    <script>
        function DeleteStatus() {
            var s = document.getElementById(‘status‘);
            s.innerText = "删除成功";
            setTimeout(function () {
                s.innerText = "";
            },3000);
        }
    </script>
</body>
</html>

5、返回顶部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }
        .back{
            position: fixed;
            right: 20px;
            bottom: 20px;
            color: red;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body onscroll="BodyScroll();">
    <div style="height: 2000px;background-color: #dddddd;"></div>
    <div id="back" class="back hide" onclick="BackTop();">返回顶部</div>
    <script>
        function BackTop() {
            document.body.scrollTop = 0;
        }
        function BodyScroll() {
            //console.log(1);
            var s = document.body.scrollTop;
            var t = document.getElementById(‘back‘);

            if(s >= 100){
                t.classList.remove(‘hide‘);
            }else{
                t.classList.add(‘hide‘);
            }

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

6、提交(第一种方式)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form id="f1">
        <input type="text" />
        <input type="submit" value="提交" />
        <a onclick="Submit()">提交</a>
    </form>
    <script>
        function Submit() {
            var form = document.getElementById(‘f1‘);
            form.submit();
        }
    </script>
</body>
</html>

7、跳转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        /*
        var ret = confirm(‘是否删除?‘);
        console.log(ret);
        */
        location.href = "http://www.baidu.com";
    </script>
</body>
</html>

8、事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件</title>
</head>
<body>
    <a href="http://www.baidu.com" onclick="ClickB();">百度</a>

    <form>
        <input type="text" />
        <input type="submit" onclick="ClickB();" />
    </form>

    <input type="checkbox" onclick="ClickB();" />

    <script>
        function ClickB() {
            alert(123);
        }
    </script>
</body>
</html>

9、提交(第二种方式)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="http://www.baidu.com">
        <input type="text" id="username" />
        <input type="submit" value="提交" onclick="return SubmitForm();" />
    </form>
    <script>
        function SubmitForm() {
            var user = document.getElementById(‘username‘);
            if(user.value.length > 0){
                //可以提交
                return true;
            }else{
                //不可提交,提示错误
                alert(‘用户名输入不能为空‘);
                return false;
            }
        }
    </script>
</body>
</html>

四、jQuery

1、第一个例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <div id="i1">
        <div class="item">123</div>
        <div class="item">
            <div class="c1">
                <a>百度</a>
            </div>
        </div>
    </div>
    <div id="i2"></div>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        //jQuery.xxx
        //$.xxx
        $(‘#i1‘).addClass(‘hide‘);
    </script>
</body>
</html>

2、左侧菜单(第一种方式)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>左侧菜单</title>
    <style>
        .menu{
            width: 200px;
            height: 800px;
            border: 1px solid #dddddd;
            overflow: auto;
        }
        .menu .item .title{
            height: 40px;
            line-height: 40px;
            background-color: #2459a2;
            color: white;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <div class="menu">
        <div class="item">
            <div class="title" onclick="ShowMenu(this);">菜单一</div>
            <div class="body">
                <p>内容一</p>
                <p>内容一</p>
                <p>内容一</p>
                <p>内容一</p>
                <p>内容一</p>
                <p>内容一</p>
            </div>
        </div>
        <div class="item">
            <div class="title" onclick="ShowMenu(this);">菜单二</div>
            <div class="body hide">
                <p>内容二</p>
                <p>内容二</p>
                <p>内容二</p>
                <p>内容二</p>
                <p>内容二</p>
                <p>内容二</p>
            </div>
        </div>
        <div class="item">
            <div class="title" onclick="ShowMenu(this);">菜单三</div>
            <div class="body hide">
                <p>内容三</p>
                <p>内容三</p>
                <p>内容三</p>
                <p>内容三</p>
                <p>内容三</p>
                <p>内容三</p>
            </div>
        </div>
    </div>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        function ShowMenu(ths) {
            //console.log(ths);   //Dom中的标签对象
            //$(ths)  //Dom对象转换为jQuery标签对象(便利)
            //$(ths)[0] //jQuery对象转换为DOM对象
            $(ths).next().removeClass(‘hide‘);
            $(ths).parent().siblings().find(‘.body‘).addClass(‘hide‘);
        }
    </script>
</body>
</html>

3、实现全选、取消、反选(第二种方法,推荐)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="button" value="全选" onclick="CheckAll()" />
    <input type="button" value="取消" onclick="CancelAll()" />
    <input type="button" value="反选" onclick="ReverseAll()" />
    <table border="1px">
        <thead>
            <tr>
                <th>序号</th>
                <th>用户名</th>
                <th>密码</th>
            </tr>
        </thead>
        <tbody id="tb">
            <tr>
                <td><input type="checkbox" /> </td>
                <td>1</td>
                <td>11</td>
            </tr>
            <tr>
                <td><input type="checkbox" /> </td>
                <td>2</td>
                <td>22</td>
            </tr>
            <tr>
                <td><input type="checkbox" /> </td>
                <td>3</td>
                <td>33</td>
            </tr>
        </tbody>
    </table>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        function CheckAll() {
            $(‘#tb input[type="checkbox"]‘).prop(‘checked‘,true);
        }
        function CancelAll() {
            $(‘#tb input[type="checkbox"]‘).prop(‘checked‘,false);
        }
        function ReverseAll() {
            $(‘#tb input[type="checkbox"]‘).each(function (i) {
                //this当前标签
                //$(this)当前标签的jQuery对象
                if($(this).prop(‘checked‘)){
                    $(this).prop(‘checked‘,false);
                }else{
                    $(this).prop(‘checked‘,true);
                }
            });

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

4、增加、减少输入框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
       <p>
            <a onclick="Add(this);"> + </a>
            <input type="text">
       </p>
   </div>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        function Add(ths) {
            var p = $(ths).parent().clone();
            p.find(‘a‘).text(‘ - ‘);
            $(ths).parent().parent().append(p);
            p.find(‘a‘).attr(‘onclick‘, ‘Remove(this);‘);
        }
        function Remove(ths) {
            $(ths).parent().remove();
        }
    </script>
</body>
</html>

5、左侧菜单(第二种方式)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>左侧菜单</title>
    <style>
        .menu{
            width: 200px;
            height: 800px;
            border: 1px solid #dddddd;
            overflow: auto;
        }
        .menu .item .title{
            height: 40px;
            line-height: 40px;
            background-color: #2459a2;
            color: white;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <div class="menu">
        <div class="item">
            <div class="title" onclick="ShowMenu(this);">菜单一</div>
            <div class="body">
                <p>内容一</p>
                <p>内容一</p>
                <p>内容一</p>
                <p>内容一</p>
                <p>内容一</p>
                <p>内容一</p>
            </div>
        </div>
        <div class="item">
            <div class="title" onclick="ShowMenu(this);">菜单二</div>
            <div class="body hide">
                <p>内容二</p>
                <p>内容二</p>
                <p>内容二</p>
                <p>内容二</p>
                <p>内容二</p>
                <p>内容二</p>
            </div>
        </div>
        <div class="item">
            <div class="title" onclick="ShowMenu(this);">菜单三</div>
            <div class="body hide">
                <p>内容三</p>
                <p>内容三</p>
                <p>内容三</p>
                <p>内容三</p>
                <p>内容三</p>
                <p>内容三</p>
            </div>
        </div>
    </div>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            //当文档数加载完毕后,自动执行
            $(‘.item .title‘).click(function () {
            $(this).next().removeClass(‘hide‘);
            $(this).parent().siblings().find(‘.body‘).addClass(‘hide‘);
            });
        });

        /*绑定事件的另一种方式
        $(‘.item .title‘).bind(‘click‘,function () {
            $(this).next().removeClass(‘hide‘);
            $(this).parent().siblings().find(‘.body‘).addClass(‘hide‘);
        });
        */
    </script>
</body>
</html>

6、延迟绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="button" onclick="Add();" />
    <ul>
        <li>123</li>
        <li>456</li>
        <li>789</li>
        <li>000</li>
    </ul>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
//            $(‘li‘).click(function () {
//                alert($(this).text());
//            });
            //延迟绑定,ul绑定数据的父标签
            $(‘ul‘).delegate(‘li‘,‘click‘,function () {
                alert($(this).text());
            });
        });

        function Add() {
            var tag = document.createElement(‘li‘);
            tag.innerText = ‘666‘;
            $(‘ul‘).append(tag);
        }
    </script>
</body>
</html>

时间: 2024-10-18 11:38:50

Day16 DOM &jQuery的相关文章

python2.0_s12_day13_javascript&amp;Dom&amp;jQuery

今天主要内容:JavaScriptDomjQuery http://www.cnblogs.com/wupeiqi/articles/5369773.html 今天主要内容大致了解:javascript 1.首先要知道 JavaScript 和 Java 没有半毛钱关系. 2.JavaScript 和python语言 一样 它也是一门语言.对于python语言需要用python解释器解释.而javascript的解释器是浏览器. 3.javascript 能实现什么.javascript就是让我

python运维开发(十六)----Dom&amp;&amp;jQuery

内容目录: Dom 查找 操作 事件 jQuery 查找 筛选 操作 事件 扩展 Dom 文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式.我们最为关心的是,DOM把网页和脚本以及其他的编程语言联系了起来.DOM属于浏览器,而不是JavaScript语言规范里的规定的核心内容. 查找元素 直接查找 document.getElementById 根据ID获取一个标签 doc

Python自动化开发从浅入深-进阶(script,dom,jquery 基础)

JavaScript (可以对html标签及CSS进行操作) Dom (API,提供找寻html中的标签,以便于使用JS对所找到的标签或CSS进行相应的操作) jQuery (用于将复杂的逻辑和运算封装到一个包中供外部调用) JavaScript: <srcipt>...</script> 存在的形式:文件,块 一般在body的底部书写. --- 声明变量: name = "alex" :(全局变量) var age=18:     (局部变量) --- 数字:

Dom,JQuery

Dom 什么是 DOM? DOM 是 W3C(万维网联盟)的标准. DOM 定义了访问 HTML 和 XML 文档的标准: “W3C 文档对象模型 (DOM) 是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容.结构和样式.” W3C DOM 标准被分为 3 个不同的部分: 核心 DOM - 针对任何结构化文档的标准模型 XML DOM - 针对 XML 文档的标准模型 HTML DOM - 针对 HTML 文档的标准模型 DOM 是 Document Object Model

Python 一路走来 DOM &amp; Jquery

DOM 查找: 直接查找 间接查找 —getElementById —getElementsByTag 绑定事件 jQuery 模块, 封装Dom和javascript 1.12..—>兼容IE 2.x —>IE9以上 查找: 选择器 #id 标签 类 组合 层级 属性(important) 筛选器 操作: css 属性 文本操作 事件: -优化 扩展: $.login Form表单验证 Ajax:

dom core,html dom,css dom,jquery 中的dom操作

前端开发中为达到某种目的,往往有很多方法:dom core,html dom,jquery; dom core/jquery主要通过函数调用的方式(getAttribute("属性名")/attr("属性名"))获取属性值, html dom一般利用属性的形式(element.属性名)获取对应属性值,形式相对简洁.此外,针对于css相关的对象,还有css dom 前端开发中的节点有三种:元素节点:文本节点和属性节点 js一般对于dom core和html dom都支

黑马day16 子jquery&amp;子元素过滤选择器

此选择器主要对所选择的表单元素进行过滤 1.:enabled 用法: $("input:enabled")    返回值  集合元素 说明:匹配所有可用元素.意思是查找所有input中不带有disabled="disabled"的input.不为disabled,当然就为enabled啦. 2.:disabled 用法: $("input:disabled")    返回值  集合元素 说明:匹配所有不可用元素.与上面的那个是相对应的. 3.:c

day16 DOM、jQurey

DOM dom 的概念 文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象的标准模型就称为DOM.

jQuery的dom操作(二)转

addClass() 向匹配的元素添加指定的类名. after() 在匹配的元素之后插入内容. append() 向匹配的元素内部追加内容. appendTo() 向匹配的元素内部追加内容. attr() 设置或返回匹配元素的属性和值. before() 在每个匹配的元素之前插入内容. clone() 创建匹配元素集合的副本. detach() 从 DOM 中移除匹配元素集合. empty() 删除匹配的元素集合中所有的子节点. hasClass() 检查匹配的元素是否拥有指定的类. html(