jQuery 之（二）事件操作、jq对文档的操作、属性选择器使用

最新推荐文章于 2021-07-28 23:44:31 发布

znyyjk

最新推荐文章于 2021-07-28 23:44:31 发布

阅读量1.3k

点赞数

分类专栏： jquery 笔记文章标签： jquery

jquery 笔记专栏收录该内容

2 篇文章 1 订阅

订阅专栏

$符号的由来

$(‘div’)  $(‘.apple’)  $(‘*’)等等。
$符号就是一个函数，函数名称为”$”符号而已。也可以使用jQuery符号。

这里写图片描述

使用jquery过程中用到的$符号，其在jquer框架内部体现为是函数，其和jQuery关键字互为别名。

jquery对象与 dom对象关系

jquery对象：$(‘li’)  $(‘.apple’) 等选择器使用返回的信息就是jquery对象
dom对象： document.getElementById()  
       document.getElementsByTagName();

jquery对象和 dom对象互相调用对方的成员

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>新建网页</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type='text/javascript' src='jquery-3.1.0.js' ></script>
        <script type="text/javascript">
        function f1(){
            //dom对象 调用 jquery对象的成员【失败】
            document.getElementsByTagName('div')[0].css('background-color','blue');
        }
        function f2(){
            //jquery对象 调用 dom对象的成员【失败】
            $('div').style.height='200px';
        }
        </script>

    </head>
    <body>
        <h1>jquery对象 和 dom对象</h1>
        <div></div>
        <input type="button" value="触发1" onclick="f1()" />
        <input type="button" value="触发2" onclick="f2()" />

    </body>
</html>

jquery对象与 dom对象互相调用对方成员失败了
原因：它们不是平等关系，导致其成员也有层次划分。
jquery对象是包含 dom对象的

jquery对象如何封装的dom对象

dom对象就是jquery对象的数组组成部分
这里写图片描述

这里写图片描述

通过上图，我们看到dom对象和jquery对象做合并，dom对象是jquery对象的数组组成部分。

jquery对象和 dom对象的转化

jquery对象 —–> dom对象： $()[下标]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>新建网页</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type='text/javascript' src='jquery-3.1.0.js' ></script>
        <script type="text/javascript">
        function f1(){
            //jquery对象 转化为 dom对象 进面调用dom成员
            $('#apple')[0].style.backgroundColor='blue';
            $('li')[1].style.backgroundColor='brown';
        }
        </script>
        <style type='text/css'>
        div{width:300px;height:200px;background-color:pink;}
        </style>
    </head>
    <body>
        <h1>jquery对象 和 dom对象</h1>
        <div id='apple'></div>
        <ul>
            <li>一</li>
            <li>二</li>
            <li>三</li>
        </ul>
        <input type='button' value='点击' onclick='f1()'>
    </body>
</html>

dom对象 —–> jquery对象：$(dom对象)

这里写图片描述

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>新建网页</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type='text/javascript' src='jquery-3.1.0.js' ></script>
        <script type="text/javascript">
        function f1(){
            //dom对象 变为 jquery对象 ：$(dom对象)
            //注意：每次只能是“一个”dom对象变为jquery对象
            var dv = document.getElementById('apple');
            $(dv).css('background-color','green');

            var lis = document.getElementsByTagName('li')[1];
            $(lis).css('color','red');
        }
        </script>
        <style type='text/css'>
        div{width:300px;height:200px;background-color:pink;}
        </style>
    </head>
    <body>
        <h1>jquery对象 和 dom对象</h1>
        <div id='apple'></div>
        <ul>
            <li>一</li>
            <li>二</li>
            <li>三</li>
        </ul>
        <input type='button' value='点击' onclick='f1()'>
    </body>
</html>

jquery框架对象分析

jquery框架对象类型：jquery对象  和  $对象
① jquery对象就是各种选择器创建出来的对象
② $对象就是函数对象

jquery对象

$('#apple').css()/attr()/html()/text()/addClass()//等等方法可以调用
//以上方法都是jquery.fn通过extend复制继承过来的

这里写图片描述

$函数对象

$函数对象可以调用的许多成员也是通过extend复制继承过来的
$.get()  $.post()   $.ajax()

这里写图片描述

以上无论是jquery对象还是 $对象，他们98%以上的成员都是通过各自的extend复制继承过来的。

遍历方法

each()方法：
$.each(数组/对象,function处理);  //$对象      调用的
$(选择器).each(function处理);   //jquery对象  调用的

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>新建网页</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type='text/javascript' src='jquery-3.1.0.js' ></script>
        <script type="text/javascript">
        //1、遍历对象
        //$.each(对象,function(k对象属性变量,v对象属性值变量){});
        var cat = {name:'kittp',age:5,climb:function(){console.log('上树');}};
        jQuery.each(cat,function(k,v){
            console.log(k+' --- '+v);
        });
        //2、遍历数组
        //$.each(数组,function(k元素下标变量,v元素值变量){});
        var color = ['red','blue','green'];
        $.each(color,function(k,v){
            console.log(k+' --- '+v);
        });

        window.onload = function(){
            //3、遍历“jquery对象”
            //$('li').each(function(dom对象下标索引值,具体每个dom对象){});
            $('li').each(function(w,f){
                //this代表遍历出来的每个“dom对象”
                console.log(w+' --- '+f+' --- '+this);
                f.style.color = 'blue';
            });
        }
        </script>
    </head>
    <body>
        <h1>each遍历方法</h1>
        <ul>
            <li>一</li>
            <li>二</li>
            <li>三</li>
        </ul>
    </body>
</html>

加载事件

javascript的加载事件：
<body  onload = “函数()”>
window.onload = function(){}

jquery加载事件实现

① $(document).ready(function处理);
② $().ready(function处理);
③ $(function处理);  对第一种加载的封装而已

这里写图片描述

jquery加载事件与传统加载事件的区别

设置个数

在同一个请求里边，jquery的可以设置多个，而传统方式只能设置一个
传统方式加载事件是给onload事件属性赋值，多次赋值，后者会覆盖前者。
jquery方式加载事件是把每个加载事件都存入一个数组里边，成为数组的元素，执行的时候就遍历该数组执行每个元素即可，因此其可以设置多个加载事件。

执行时机不一样

传统方式加载事件，是全部内容(文字、图片、样式)在浏览器显示完毕再给执行加载事件。
jquery方式加载事件，只要全部内容(文字、图片、样式)在内存里边对应的DOM树结构绘制完毕就给执行，有可能对应的内容在浏览器里边还没有显示。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>新建网页</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type='text/javascript' src='jquery-3.1.0.js' ></script>
        <script type="text/javascript">
        //传统方式加载事件
        //window.onload = function(){
        //    alert(123);//图片和弹出框在4s后一起看到
        //}

        //jquery加载事件
        $(function(){
            alert('abc');//先看弹出框abc,4s后看到图片
        });
        </script>
    </head>
    <body>
        <h2>加载事件执行时机</h2>
        <img src="./11.php" alt="" /><!--4s后显示图片-->
    </body>
</html>

11.php

<?php

//php生成一个图片

//暂停4s
sleep(4);

//画板
$im = imagecreatetruecolor(400,300);

//画笔
$green = imagecolorallocate($im,0,200,0);

//颜色填充
imagefill($im, 10,10, $green);

//输出图片
header("content-type:image/jpeg");
imagejpeg($im);

//销毁图片
imagedestroy($im);

jquery加载事件原理

jquery加载事件是对DOMContentLoaded的封装(而非onload)
这里写图片描述

普通事件操作

① dom1级事件设置
  <input  type=”text”  onclick=”过程性代码” value=’tom’ />
  <input  type=”text”  onclick=”函数()” />
  itnode.onclick = function(){}
  itnode.onclick = 函数;
② dom2级事件设置
  itnode.addEventListener(类型，处理，事件流);
  itnode.removeEventListener(类型，处理，事件流);
  node.attachEvent();
  node.detachEvent();
③ jquery事件设置
  $().事件类型(事件处理函数fn);      //设置事件
  $().事件类型();                      //触发事件执行
  事件类型：click、keyup、keydown、mouseover、mouseout、blur、focus等等  
  例如：$(‘div’).click(function(){事件触发过程this});
  （该方式事件函数内部this都代表jquery对象内部的dom节点对象）。
  jquery调用的大部分方法里边的this关键字都代表其对应的dom对象。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>新建网页</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type='text/javascript' src='jquery-3.1.0.js' ></script>
        <script type="text/javascript">
        $(function(){
            //页面加载完毕给div绑定事件
            $('div').click(function(){
                console.log('谁点我了');
            });
            //
            $('div').mouseover(function(){
                //this.style.backgroundColor='blue';
                //$(this)使得this的dom对象变为jquery对象
                $(this).css('background-color','red');
            });
        });
        function f1(){
            //间接触发对象的事件执行
            $('div').click();
            $('div').mouseover();
        }
        </script>
        <style type="text/css">
        div{width:300px;height:200px;background-color:pink;}
        </style>
    </head>
    <body>
        <h2>jquery简单事件操作</h2>
        <div></div>
        <input type='button' value='间接操作' onclick='f1()'>
    </body>
</html>

jquery对文档的操作

通过jquery方式实现页面各种节点的追加、修改、删除、复制等操作

节点追加

父子关系追加

这里写图片描述

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>新建网页</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type='text/javascript' src='jquery-3.1.0.js' ></script>
        <script type="text/javascript">
        function f1(){
            //主动追加
            //新节点追加
            //append() 兵置
            $('#shu').append('<li>香香</li>');
            //prepend() 前置
            $('#shu').prepend('<li>云云</li>');
            //已有节点追加（节点发生物理位置移动）
            $('#shu').append($('#gai'));
        }
        function f2(){
            //被动追加
            //appendTo 后置
            //prependTo 前置
            //新增节点追加
            $('<li>诸葛亮</li>').appendTo('#shu');
            $('<li>巧克力</li>').prependTo('#shu');
            //已有节点追加
            $('#wu li:eq(1)').appendTo('#shu');
        }
        </script>
    </head>
    <body>
        <h2>节点追加（父子）</h2>
        <ul id='shu'>
            <li>刘备</li>
            <li>张飞</li>
            <li>关羽</li>
        </ul>
        <ul id='wu'>
            <li>孙权</li>
            <li>周瑜</li>
            <li id='gai'>黄盖</li>
        </ul>
        <input type='button' value='主动追加' onclick='f1()'>
        <input type='button' value='被动追加' onclick='f2()'>
    </body>
</html>

兄弟关系追加

这里写图片描述

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>新建网页</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type='text/javascript' src='jquery-3.1.0.js' ></script>
        <script type="text/javascript">
        function f1(){
            //主动追加
            //after() 后置
            //before() 前置

            //新节点
            $('#shu li:last').after('<li>马超</li>');
            $('#shu li:first').after('<li>走运</li>');
            $('#fei').before('<li>又觉得</li>');
            //已有节点追加
            $('#fei').after($('#gai'));
        }
        function f2(){
            //被动追加
            //insertAfter() 后置
            //insertBefore() 前置
        }
        </script>
    </head>
    <body>
        <h2>兄弟关系追加</h2>
        <ul id='shu'>
            <li>刘备</li>
            <li id="fei">张飞</li>
            <li>关羽</li>
        </ul>
        <ul id='wu'>
            <li>孙权</li>
            <li>周瑜</li>
            <li id='gai'>黄盖</li>
        </ul>
        <input type='button' value='主动追加' onclick='f1()'>
        <input type='button' value='被动追加' onclick='f2()'>
    </body>
</html>

节点替换

这里写图片描述

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>新建网页</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type='text/javascript' src='jquery-3.1.0.js' ></script>
        <script type="text/javascript">
        function f1(){
            //黄盖 --- 替换 ---> 关羽
            //主动替换 replaceAll()
            //$('#gai').replaceAll('#guan');

            //被动替换 replaceWith()
            $('#shu li:first').replaceWith($('#wu li:first'));
        }
        </script>
    </head>
    <body>
        <h2>节点替换</h2>
        <ul id='shu'>
            <li>刘备</li>
            <li id="fei">张飞</li>
            <li id="guan">关羽</li>
        </ul>
        <ul id='wu'>
            <li>孙权</li>
            <li>周瑜</li>
            <li id='gai'>黄盖</li>
        </ul>
        <input type='button' value='替换' onclick='f1()'>

    </body>
</html>

节点删除

这里写图片描述

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>新建网页</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type='text/javascript' src='jquery-3.1.0.js' ></script>
        <script type="text/javascript">
        function f1(){
            //父元素删除内部全部子元素
            $('#shu').empty();

            //具体节点删除
            $('#wu li:first,#gai').remove();
        }
        </script>
    </head>
    <body>
        <h2>节点删除</h2>
        <ul id='shu'>
            <li>刘备</li>
            <li id="fei">张飞</li>
            <li id="guan">关羽</li>
        </ul>
        <ul id='wu'>
            <li>孙权</li>
            <li>周瑜</li>
            <li id='gai'>黄盖</li>
        </ul>
        <input type='button' value='替换' onclick='f1()'>

    </body>
</html>

复制节点

这里写图片描述

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>新建网页</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type='text/javascript' src='jquery-3.1.0.js' ></script>
        <script type="text/javascript">
        $(document).ready(function(){
            //给 #shu 的第个li设置click事件css() attr()

            //click()方法本身有遍历机制，会为每个li都设置click事件
            //每个li都会绑定一个click事件（会为每个li执行一次click内部的function）
            $('#shu li').click(function(){
                //单击弹出对应的文本信息
                alert($(this).html());
            });
        });
        function f1(){
            //复制“关羽”给吴国一份
            var fu_guan = $('#guan').clone(false);//只复制“节点”
            //var fu_guan = $('#guan').clone(true);//"节点"和其“其事件”都复制

            $('#wu').append(fu_guan);
        }
        </script>
    </head>
    <body>
        <h2>节点复制</h2>
        <ul id='shu'>
            <li>刘备</li>
            <li id="fei">张飞</li>
            <li id="guan">关羽</li>
        </ul>
        <ul id='wu'>
            <li>孙权</li>
            <li>周瑜</li>
            <li id='gai'>黄盖</li>
        </ul>
        <input type='button' value='替换' onclick='f1()'>

    </body>
</html>

属性选择器使用

这里写图片描述

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>新建网页</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type='text/javascript' src='jquery-3.1.0.js' ></script>
        <script type="text/javascript">
        function f1(){
            //1、$([name])
            $('[name]').css('color','red');

            //2、$([name=value])
            $('[value=8273863]').css('color','blue');

            //3、$([name^=value])
            //获得name属性值是"value开始"的节点
            $('[value^=ma]').css('background-color','pink');

            //4、$([name$=value])
            //获得name属性值是"value结束"的节点
            $('[value$=3]').css('background-color','lightblue');

            //5、$([name*=value])
            //获得name属性值包含"value"字样的节点
            $('[value*=63]').css('font-size','30px');

            //6、$([name!=value])
            //获得name属性值不等于"value"字样的节点、或该节点没有name属性值
            $('[class!=apple]').css('background-color','lightgreen');

            //7、$([][][])并且关系的属性选择器
            //我们需要的结果：有class属性，“并且”class属性值不等于apple
            //$(s1s2s3...)并且关系
            //$(s1,s2,s3...)联合关系
            $('[class][class!=apple]').css('background-color','red');
        }
        </script>
    </head>
    <body>
        <h2>属性选择器</h2>
        <p><input type='text' name='username' value='mary'></p>
        <p><input type='text' id='email' value='xxx@ee.com' class='apple'></p>
        <p><input type='text' value='8273863' class='orange'></p>
        <p><input type='text' value='132634376363' class='orange'></p>
        <input type='button' value='触发' onclick='f1()'>

    </body>
</html>