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

布满荆棘的人生 2022-09-26 02:11 133阅读 0赞

# $符号的由来 #

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

![这里写图片描述][20160915171659382]

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

# jquery对象 与 dom对象关系 #

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

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

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

## jquery对象 如何封装的dom对象 ##

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

![这里写图片描述][20160915173210733]

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

## jquery对象 和 dom对象 的转化 ##

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

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

![这里写图片描述][20160915173847844]

# jquery框架对象分析 #

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

## jquery对象 ##

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

![这里写图片描述][20160915174558058]  
![这里写图片描述][20160915174640840]  
![这里写图片描述][20160915174756075]  
![这里写图片描述][20160915174824833]

## $函数对象 ##

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

![这里写图片描述][20160915190116599]

以上无论是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处理);  对第一种加载的封装而已

![这里写图片描述][20160915192151405]

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

### 设置个数 ###

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

### 执行时机不一样 ###

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

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)  
![这里写图片描述][20160915193011974]

# 普通事件操作 #

① 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对象。

# jquery对文档的操作 #

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

## 节点追加 ##

### 父子关系追加 ###

![这里写图片描述][20160915201357039]

![这里写图片描述][20160915201721851]

<!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>

### 兄弟关系追加 ###

![这里写图片描述][20160915203237718]

<!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>

## 节点替换 ##

![这里写图片描述][20160915214051092]

## 节点删除 ##

![这里写图片描述][20160915214554188]

## 复制节点 ##

![这里写图片描述][20160915214906337]

<!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>

# 属性选择器使用 #

![这里写图片描述][20160915215616520]

<!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>

[20160915171659382]: /images/20220717/e3ded4333ad94f728aeaae4c4f9f9f89.png
[20160915173133616]: /images/20220717/121d1d2e6bcf444faf4af145f37648eb.png
[20160915173210733]: /images/20220717/d8c5aa4b09ff4b9595764add64ac059e.png
[20160915173847844]: /images/20220717/e2fd53a992564727b4aaa4da1f1834bc.png
[20160915174558058]: /images/20220717/1f023de36af54749bcdd87c701100499.png
[20160915174640840]: /images/20220717/daab10157adb4b3d975175a152cdcf0c.png
[20160915174756075]: /images/20220717/371a68768a1c4761b4f2e7e438eb103f.png
[20160915174824833]: /images/20220717/2ce4d696987145139e2d6e7394e35e1e.png
[20160915190116599]: /images/20220717/afec3374986c46cc8c8b8a6422cee977.png
[20160915192151405]: /images/20220717/cb106e4571e948ca839975c507ff70a5.png
[20160915193011974]: /images/20220717/64f5093823e641aaba827517cf85d480.png
[20160915201357039]: /images/20220717/e430f0a2eba34aa0a4c1417bd1e5ef5f.png
[20160915201721851]: /images/20220717/7a28a43d096444ed8bc829d23ab54273.png
[20160915203237718]: /images/20220717/c3e1ffe179ba4b14a33894f2cc0c1aa2.png
[20160915214051092]: /images/20220717/496a15b408a34a66afb7aa420cd72591.png
[20160915214554188]: /images/20220717/ec6d38c72aa34983a9d04f176db846ae.png
[20160915214906337]: /images/20220717/319736086b09407a8c02de926fe44a1b.png
[20160915215616520]: /images/20220717/dfdee0b00cb04c16bba50366279ce9ec.png