zoukankan      html  css  js  c++  java
  • jQuery学习教程(3)

    一、什么是DOM操作?

      文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象的标准模型就称为DOM。Document Object Model的历史可以追溯至1990年代后期微软与Netscape的“浏览器大战”,双方为了在JavaScript与JScript一决生死,于是大规模的赋予浏览器强大的功能。微软在网页技术上加入了不少专属事物,既有VBScript、ActiveX、以及微软自家的DHTML格式等,使不少网页使用非微软平台及浏览器无法正常显示。DOM即是当时蕴酿出来的杰作。

    二、具体的解释

    Text()和html()的区别

    也可以进行设定($('input').val(“Moshimol”));
    当传入参数进来是get方法,不传参数是set方法
    <html>
        <head>
            <title>JQuery DOM Manipulation</title>
            <link rel="stylesheet" href="style.css">
        </head>
        <body>
        <input type="text">
            <div class="hello">Hello World
                <p>I am Moshimol</p>
            </div>
    
            <button>Click me</button>
    
        </body>
        <script src="js/jquery-latest.js"></script>
    
        <script type="text/javascript">
        $(document).ready(function(){
            $('button').on('click', function() {
    
                //alert($('div').text());
                //alert($('div').html());
                alert($('input').val());
    
    
                // $('div').replaceWith('<p>Hello World</p>');
               // $('.hello').before($('.world').clone());
                // $('<p>Hello World</p>').replaceAll('div');
            });
    
        });
    
        </script>
    </html>
    

      

    ## 获取设定属性 [attr(),  removeAttr()]

    $('div').removeAttr('class'); 移除css
    $('div').attr("class","hello") 获取css
    可以设置两个
    ## 获取设定 CSS Class [addClass(), removeClass(), hasClass(), toggleClass] hasclass 看有没有这个class toggleClass 有就删除 没有就加上
    ## 获取设定 CSS style [css()]可以打印div里面的css   但是需要JSON.stringify这个函数来打印具体的,如果没有这个函数的话,打印出options


    ## append() and prepend() methods append()把后面一个元素插入前面元素最后子元素中,一个向后面插   prepend这个是插入后面,一个向前面插
    ## appendTo() and prependTo() methods  和上面一样 字面意思区别不是很大,但是前后位置倒反了
    ## before() and after() methods
    ## insertBefore() and insertAfter() methods



    <html>
    <head>
        <title>JQuery DOM Manipulation</title>
        <link rel="stylesheet" href="style.css">
    </head>
    
    <body>
    
        <div class="a">
            <div class="b">b</div>
        </div>
        <button>'c'</button>
        <div class="c">c</div>
    
    <button>Click me</button>
    
    </body>
    <script src="js/jquery-latest.js"></script>
    
    <script type="text/javascript">
        $(document).ready(function(){
            $('button').on('click', function() {
    
               // $('.a').append($('.c'));
               // $('.a').prepend($('.c'));
    
                //$('.c').appendTo($('.a'));
                //$('.c').prependTo($('.a'));
    
                //$('.a').after($('.c'));插如之前 不是子元素
               // $('.a').before($('.c'));插入之后 不是子元素
    
                $('.c').insertAfter($('.a'));
                $('.c').insertBefore($('.a'));
            });
    
        });
    
    </script>
    </html>
    

      

    ## remove(), empty() and .detach() methods
    remove() 删掉整个元素
    empty() 使他变空 但是内容是存在的
    .detach() 和remove 区别不是很大
    可以自己实验

    var p;
            function selectChange() {
                
    
                if (document.getElementById("ddl_schoolarea").value != "请选择") {
    
                    p = $("#trlession").detach();
                }
                else {
                    //table1为一个table名字
                    $("#table1").append(p);
                    
                }
            }
    

      

    # unwrap(), wrapInner(), wrap(), wrapAll(), 逐层放大
    <html>
    <head>
        <title>JQuery DOM Manipulation</title>
        <link rel="stylesheet" href="style.css">
    </head>
    
    <body>
        <div>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </div>
    
    </body>
    <script src="js/jquery-latest.js"></script>
    
    <script type="text/javascript">
        $(document).ready(function(){
            $('button').on('click', function() {
    
    	
                $('li').wrap("<ul></ul>>");
                $('li').wrapAll("<ul></ul>>");
                $('li').unwrap();
    	$('li').wrapInner("<b></b>>");
    
            });
    
        });
    
    </script>
    </html>
    

      

    ## target.replaceWith() and replaceAll(target)
    <html>
    <head>
        <title>JQuery DOM Manipulation</title>
        <link rel="stylesheet" href="style.css">
    </head>
    
    <body>
        <div>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </div>
    
    </body>
    <script src="js/jquery-latest.js"></script>
    
    <script type="text/javascript">
        $(document).ready(function(){
            $('button').on('click', function() {
    
    
                $('div').replaceWith('<p>Moshimol</p>');
               $ ('<p>Moshimol</p>').replaceAll('div');
    
    
            });
    
        });
    
    </script>
    </html>
    

      

    ## clone() and Cloning Event Handlers and Data
    clone()进行复制
    $('.hello').before($('.world').clone());
    

      相当于windows的拷贝功能,吧world的内容进行拷贝,再把他放到hello前面

     
     

     

  • 相关阅读:
    Java 21-Spring知识
    Java18-黑马旅游网学习制作
    Java17-Filter&Listener&Json&redis&maven
    python发邮件
    一元模型拟合(OLS和插值np拟合)
    一元模型拟合
    2.13 描述性统计(平均数,中位数,中数,数据的离散度(极差,平均绝对偏差,方差标准差))
    tushare 股票数据获取,收益率计算,直方图绘制
    主板指数数据的爬取(selenium处理JS)
    网页整页截图小工具
  • 原文地址:https://www.cnblogs.com/Moshimol/p/5648564.html
Copyright © 2011-2022 走看看