澳门新浦京娱乐场网站-www.146.net-新浦京娱乐场官网
做最好的网站

树状菜单_javascript技巧_脚本之家,菜单固定

从那篇最初,你必要具有一些Javascript和DOM相关的学识技术胜利地上学下去。由于Javascript和DOM都不是片言之语能够讲完的事物,如若您对它们还目生,请先到此地上学一下再持续:Javascript在线教程。 getElementsByClassName(卡塔尔(英语:State of Qatar)

jQuery

JS最广泛应用的库,十分之九-九成之上的网址使用。jQuery的视角:Write Less, Do More。

优点:

  • 裁撤浏览器差距:你没有必要团结写冗长的代码来针对差异的浏览器来绑定事件,编写AJAX等代码;
  • 简短的操作DOM的点子:写$('#test'卡塔尔(قطر‎确定比document.getElementById('test'卡塔尔(英语:State of Qatar)来得简洁;
  • 自在实现动漫、改善CSS等各类操作。

时下jQuery有1.x、2.x和3.x,前四个版本已经不再更新。2.x移除了对IE 6、7、8的援助,代码更简单。接纳哪位版本重要在于你是或不是想支持IE 6~8。

下载地址是:http://jquery.com/download/。仅仅是二个.js文件。有未压缩(uncompressed,jquery-x.x.x.js)和减削(minified,jquery-x.x.x.min.js)七个本子。

一、样式篇

在三个单页面设置八个主菜单,当页面滚动时主菜单地点固定在页面窗口中不动,或左或右,或上或下。当单击菜单项时,页面滚动到菜单对应的内容区,当页面滚动到预约内容地方时,对应的菜单项变为当前入选样式。

为了从一大堆HTML代码中寻觅大家的树状菜单,大家先来落到实处一个经过className找DOM节点的主意:getElementsByClassName。那是对浏览器自有DOM方法的二个简便但实用的扩充。

使用jQuery

只需使用<script>引进进来。

<html>
<head>
    <script src="jquery-2.2.4.js"></script>
</head>
<body>

</body>
    <script>
        alert('jQuery版本:'   $.fn.jquery);
    </script>
</html>

第1章 初识jQuery

图片 1

此措施有八个参数:ele提出以哪个DOM节点为根节点找寻(也便是说只找ele的子节点),className提出切合条件的节点的class属性中必需带有哪些的className。它的再次回到值是一个数组,寄放了拥有适合条件的节点。

$符号

$是jQuery最著名的标识。其全体机能都封装在此个全局变量中,$是合法的变量名,它就是jQuery的别称。

alert(window.jQuery);   // jQuery(selector, context)...
alert(window.$);
alert($ === jQuery);
alert(typeof $);    // function

为此,$正是叁个函数,函数也是指标,$还会有为数不菲天性。

后生可畏旦您看来的$不是相同于jQuery(selector, context)...,那是因为JS压缩工具会对函数及参数改名,压缩之后也许产生function (a,b){return new n.fn.init(a,b)}

相当多气象下,大家直接用$,假使很消沉地$被攻克了,而且无法改,我们就让jQuery把$交出来(调用jQuery.noConflict()),进而只好采用jQuery。

alert($);   // jQuery(selector, context)...
jQuery.noConflict();
alert($);   // undefined
alert(jQuery);  // jQuery(selector, context)...

(1)情状搭建

步入官方网站获取最新的版本 http://jquery.com/download/ ,这里须求在意 jQuery 分 2 个俯拾皆已经版本 1.x 与 2.x,首要的界别在于** 2.x 不再宽容IE6、7、8浏览器,那样做的指标是为着同盟移动端支出。由于减少了一些代码,使得该版本比 jQuery 1.x 更加小、越来越快。
假如开辟者相比较在意老版本 IE 客户,只可以使用 jQuery 1.9 及前边的本子了。大家那本课程为了宽容性难点,使用的是 1.9 版本。jQuery 每三个文山会海版本分为:压缩版(compressed卡塔尔(قطر‎ 与 开荒版(development卡塔尔(قطر‎,大家在支付进度中央银行使
开发版(开荒版本便于代码改正及调节和测量检验),项目上线宣布使用压缩版(因为压缩版本体量更加小,功用越来越快)。
** jQuery是一个JavaScript脚本库
,不必要极其的设置,只需求大家在页面 <head> 标签内中,通过 script 标签引入 jQuery 库就能够。

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="http://www.bonzeragro.com/uploads/allimg/191212/0S3433117-1.jpg"></script>
    <title>环境搭建</title>
</head> 
<body>
    <script type="text/javascript"> alert($) </script>
</body>
</html>

图片 2

alert 弹出上述音信,表明情状已经搭建设成功了。

此意义可以使用在部分内容相比较长的单页设计,本文将介绍使用JjQuery和css来完成那10%效,demo中分头有菜单居左、居右及底部效果,点击demo看功效:

function getElementsByClassName { //获取所有子节点 if{ var children = ele.all; }else{ var children = ele.getElementsByTagName; } //遍历子节点并检查className属性 var elements = new Array(); for (var i = 0; i < children.length; i  ) { var child = children[i]; var classNames = child.className.split; for (var j = 0; j < classNames.length; j  ) { if (classNames[j] == className) { elements[elements.length] = child; break; } } } return elements;}

选择器

这是jQuery的核心,类似于$('#dom-id')。初衷是为着制止麻烦的getElementById和getElementsByTagName代码。有了jQuery,能够长足稳固到四个或七个DOM节点。

甭管提一句,table的规范写法如下。注意<table>的子结点是<tbody>。

<table>
        <tbody>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>4</td>
                <td>5</td>
                <td>6</td>
            </tr>
            <tr>
                <td>7</td>
                <td>8</td>
                <td>9</td>
            </tr>
        </tbody>
    </table>

(2)jQueryHelloWorld体验

当页面加载成功后,在页面中以居中的格局展现“您好!通过慕课网学习 jQuery 才是最好的门径”字样。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>第一个简单的jQuery程序</title>
    <style type="text/css">
        div{
            padding:8px 0px;
            font-size:12px;
            text-align:center;
            border:1px solid #888;
        }
    </style>
    <script src="http://www.bonzeragro.com/uploads/allimg/191212/0S34332V-3.jpg"></script>
    <script type="text/javascript">
            $(document).ready(function() {
                    $("div").html("您好!通过慕课网学习jQuery才是最佳的途径。");
            });
    </script>
</head>
<body>
    <div></div>
</body>
</html>

代码深入分析:
$(document).ready 的意义是等页面包车型客车文书档案(document)中的节点都加载实现后,再执行后续的代码,因为大家在实行代码的时候,也许会依据页面的某叁个因素,咱们要作保那个因素真正的的被加载达成后技巧科学的运用。

翻看演示DEMO下载源码

最前头的一个if-else语是为着宽容IE5(IE5不能运作document.getElementsByTagName。需要注意的是千万不要用浏览器检测的方法来写脚本,而应该直接使用将要用到的语句来测试是否可以执行,如果返回值为nullundefined,这再换后生可畏种方法。这样的台本能够有更加好的宽容性,也更康健。

按ID查找

类似于var div = $('#abc');,再次来到的是jQuery对象。jQuery对象雷同数组,它的各样成分都以叁个引用了DOM节点的对象。借使存在,则形如[<div id="abc">...</div>],不然是个空数组[]

jQuery的二个优点正是:jQuery的选用器不会再次来到undefined可能null,由此不要推断if (div === undefined卡塔尔(قطر‎。

jQuery对象和DOM对象时期能够互相转变

貌似境况下,无需获得和操作DOM对象,而是直接操作jQuery对象,假令你有八个DOM对象,不难地应用$(aDomObject)包裹成jQuery对象就足以选用jQuery API了。

var div = $('#abc');
alert(div);     // [object Object]
var divDom = div.get(0);    // [object HTMLDivElement],DOM对象
alert(divDom);  
var div2 = $(divDom);
alert(div2);    // [object Object]

(3)jQuery对象与DOM对象

对此才起来接触jQuery库的初读书人,大家供给通晓认识一点:
jQuery对象与DOM对象是不相通的
兴许一时半会分不清楚哪些是jQuery对象,哪些是DOM对象,上面入眼介绍一下jQuery对象,以致两岸并行间的调换。

因而二个粗略的事例,轻松区分下jQuery对象与DOM对象:
<p id=”imooc”></p>
咱俩要得到页面上这些id为imooc的p元素,然后给这几个文件节点扩张风流罗曼蒂克段文字:“您好!通过慕课网学习jQuery才是拔尖的门路”,并且让文字颜色变成士林蓝。

  1. 习感觉常管理,通过标准JavaScript管理:
var p = document.getElementById('imooc');
p.innerHTML = '您好!通过慕课网学习jQuery才是最佳的途径';
p.style.color = 'red';

透过原生DOM模型提供的document.getElementById(“imooc”)主意赢得的DOM成分就是一个DOM对象,再通过innerHTML与style属性管理公事与颜色。

  1. jQuery的处理:
var $p = $('#imooc');
$p.html('您好!通过慕课网学习jQuery才是最佳的途径').css('color','red');

通过$('#imooc')方法会获得三个$p的jQuery对象,$p是一个类数组对象。那个目的里面含有了DOM对象的音信,然后装进了相当多操作方法,调用本身的章程html与css,获得的法力与职业的JavaScript管理结果是均等的。

通过专门的学业的JavaScript操作DOM与jQuyer操作DOM的相比,大家简单发掘:
(1卡塔尔国通过jQuery方法包装后的靶子,是三个类数组对象。它与DOM对象完全两样,独一近似的是它们都能操作DOM。
(2卡塔尔通过jQuery管理DOM的操作,能够让开荒者更注意事业逻辑的开荒,而无需我们实际通晓哪位DOM节点有那个方法,也无需关心差别浏览器的宽容性难点,大家因此jQuery提供的API进行开辟,代码也会愈加简洁。

HTML

本例html来自本站作品:ScrollTo:平滑滚动到页面内定地点中的DEMO,大家在页面中的#main内放置三个主菜单ul.nav,并对应各个菜单项的内容区,大家会发掘内容区的id对应菜单项的class,接下去你会发觉它的效果。

 
<div id="main">   
      <ul class="nav"> 
           <li><a class="pro">产品展示</a></li> 
           <li><a class="news">新闻中心</a></li> 
           <li><a class="ser">服务支持</a></li> 
           <li><a class="con">联系我们</a></li> 
           <li><a class="job">人才招聘</a></li> 
    </ul> 
     <div id="pro" class="box"> 
        <h3>产品展示</h3> 
        ... 
     </div> 
     <div id="news" class="box"> 
        <h3>新闻中心</h3> 
        ... 
     </div> 
     <div id="ser" class="box"> 
        <h3>服务支持</h3> 
        ... 
     </div> 
     <div id="con" class="box"> 
        <h3>联系我们</h3> 
        ... 
     </div> 
     <div id="job" class="box"> 
        <h3>人才招聘</h3> 
        ... 
     </div> 
</div> 

elements[elements.length] = child;,那句近似是为了宽容IE5才未有使用数组的push办法。假让你势供给运用push方法,那么可以在实行getElementsByClassName()事前先重载生机勃勃遍push办法。代码如下:

按tag查找

类似于var ps = $('p');

var ps = $('p');
alert(ps.length);   // 返回页面上所有的p标签个数

(4)jQuery对象转化成DOM对象

jQuery库本质上依旧JavaScript代码,它只是对JavaScript语言举行包装管理,为的是提供更加好更方便火速的DOM管理与支出中时常应用的意义。大家运用jQuery的同有的时候间也能混合JavaScript原生代码一同行使。在多数景色中,大家供给jQuery与DOM能够相互的改造,它们都以足以操作的DOM成分,jQuery是一个类数组对象,而DOM对象正是七个独立的DOM成分。

何以把jQuery对象转成DOM对象?

  1. 应用数组下标的格局读取到jQuery中的DOM对象
  • HTML代码
<div>元素一</div>
<div>元素二</div>
<div>元素三</div>
  • JavaScript代码
var $div = $('div') //jQuery对象
var div = $div[0] //转化成DOM对象
div.style.color = 'red' //操作dom对象的属性

用jQuery找到全数的div成分(3个),因为jQuery对象也是八个数组构造,能够经过数组下标索引找到第二个div元素,通过重临的div对象,调用它的style属性修改第二个div成分的颜色。这里必要介意的一点是,数组的目录是从0开头的,也正是率先个要素下标是0

  1. 通过jQuery自带的get()方法
    jQuery对象自己提供七个.get()方法允许大家一向访问jQuery对象中相关的DOM节点,get方法中提供七个因素的目录:
var $div = $('div') //jQuery对象
var div = $div.get(0) //通过get方法,转化成DOM对象
div.style.color = 'red' //操作dom对象的属性

实则大家查阅源码,看看就理解了,get方法便是利用的率先种方法管理的,只是包装成八个get让开荒者越来越直白惠及的行使。

CSS

选择CSS固定菜单,以致安装菜单样式,和内容区。

 
.nav{width:160px; position:fixed; margin-left:-170px; top:20%; z-index:1999;  
background:#f0f0f0; border: 1px solid #ccc;-webkit-border-radius: 6px; 
-moz-border-radius: 6px;border-radius: 6px;-webkit-box-shadow:  
0 5px 10px rgba(0, 0, 0, 0.2);-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); 
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);} 
.nav li{height:36px; line-height:36px; border-bottom:1px solid #d3d3d3;  
text-align:center; cursor:pointer} 
.nav li:last-child{border-bottom:none} 
.nav li a{display:block; width:98%; height:34px;font-size:16px;} 
.nav li a:hover{background:#f9f9f9; text-decoration:none} 
.nav li a.cur{background:#ffc} 
.box{height:600px; margin: 0 10px} 

地方的代码应用position:fixed将菜单地方一定在内容区的左边:demo1

Array.prototype.push = function{ this[this.length] = value;}

按class查找

var c1 = $('.red'); // 查找class="red"的节点
var c2 = $('.red.green'); // 查找class同时包含red和green的节点,不能有空格。 class="red green" class="blue green red"这些都命中

(5)DOM对象转形成jQuery对象

相比较jQuery转形成DOM,开垦中越多的场合是把叁个dom对象加工成jQuery对象。$(参数卡塔尔(英语:State of Qatar)是二个多职能的法门,通过传递不相同的参数而产生差别的职能。

黄金年代经传递给$(DOM卡塔尔函数的参数是四个DOM对象,jQuery方法会把那一个DOM对象给包装成二个新的jQuery对象
通过$(dom卡塔尔国方法将日常的dom对象加工成jQuery对象之后,大家就足以调用jQuery的主意了

  • HTML代码
<div>元素一</div>
<div>元素二</div>
<div>元素三</div>
  • JavaScript代码
var div = document.getElementsByTagName('div'); //dom对象
var $div = $(div); //jQuery对象
var $first = $div.first(); //找到第一个div元素
$first.css('color', 'red'); //给第一个元素设置颜色

通过getElementsByTagName获得到全数div节点的元素,结果是贰个dom合集对象,可是那么些指标是八个数组合集(3个div元素卡塔尔。通过$(div卡塔尔(قطر‎方法转化成jQuery对象,通过调用jQuery对象中的first与css方法寻觅第二个因素并且退换其颜色。

jQuery

本例基于jQuery,所以老惯例,先载入jquery库,然后写代码:

 
$(function(){ 
    $(".nav li a").click(function() { 
        var el = $(this).attr('class'); 
         $('html, body').animate({ 
             scrollTop: $("#" el).offset().top 
         }, 300); 
        //切换菜单样式 
        $(this).addClass("cur").parent().siblings().find("a").removeClass("cur"); 
     }); 
}); 

当单击菜单项时,使用jQuery自定义动漫函数animate(卡塔尔国,将页直面应的区域(id对应了菜单项的class),滚动到浏览器顶部,何况将菜单项的体制切换为近年来入选状态。

借令你赏识用不一致的轮转效应,请参见本站文章:jQuery Easing 动漫功用扩大。

实则到那边,已经完结了一定菜单,和点击菜单滚动到钦赐内容地点的功能,不过有一点,当我们不点击菜单,而是滚动页面时,页面达到了菜单项对应的职位,大家供给菜单项也做出相应的反应,将相应的菜单项设置为当下入选项,那样就能够告知客商,您正在浏览的对应的是页面哪个节点的源委。

我们先拿到内容区每一种菜单对应的节点与页面最上端的偏移量,然后当页面滚动scroll时,获取页面滚动条的有利间隔scroH,然后将那多少个值相比较,设置相应的菜单项为当选状态。

 
$(function(){ 
    ... 
    var pro_top = $("#pro").offset().top; //距页顶偏移量 
    var news_top = $("#news").offset().top; 
    var ser_top = $("#ser").offset().top; 
    var con_top = $("#con").offset().top; 
    var job_top = $("#job").offset().top; 
 
    $(window).scroll(function(){//滚动页面 
        var scroH = $(this).scrollTop(); //滚动条位置 
        if(scroH>=job_top){ 
            set_cur(".job");//设置状态 
        }else if(scroH>=con_top){ 
            set_cur(".con"); 
        }else if(scroH>=ser_top){ 
            set_cur(".ser"); 
        }else if(scroH>=news_top){ 
            set_cur(".news"); 
        }else if(scroH>=pro_top){ 
            set_cur(".pro"); 
        } 
    }); 
    ... 
}); 

自定义函数set_cur(卡塔尔用于安装当前美食做法状态:

 
function set_cur(n){ 
    if($(".nav a").hasClass("cur")){ 
        $(".nav a").removeClass("cur"); 
    } 
    $(".nav a" n).addClass("cur"); 
} 

好了,今后滚动页面切换样式也贯彻了,可是还应该有多个难题,当浏览器窗口大小变化时,菜单地方也应有同盟变化,浏览器窗口宽度超过内容区和主菜单宽度时,保持主菜单一贯正视在内容区侧边。

 
$(window).resize(function(){//窗口大小变化 
  navpos(); 
}); 
//根据宽度设置样式 
function navpos(){ 
    var offset = $("#main").offset().left; 
    var nav_w = $(".nav").outerWidth(); 
    var left = offset-nav_w; 
     
    if(left>10){ 
        $(".nav").css("margin-left","-170px"); 
    }else{ 
        $(".nav").css("margin-left",-(160 left) "px"); 
    } 
} 

本来,大家也足以在页面加载成功时也调用navpos(卡塔尔(قطر‎,初始化菜单地方。

 
$(function(){ 
    navpos(); 
    ... 
}); 

最终,还剩四个主题素材,大家通晓老掉牙的IE6不帮助position:fixed,那样在ie6下菜单不会固定滚动。解决办法是某个,能够经过css也许javascript来拍卖包容性的主题素材。小编跟周围WEB开拓者一样,痛恨IE6,这一个标题留下钟爱捣腾的心上人呢,helloweba.com多谢您的关心。

注:原来本人梦想getElementsByClassName也能像push办法大器晚成致写,举例HTMLElement.prototype.getElementsByClassName = ...。不超过实际际操作的时候发以往运行时HTMLElement其一指标实际不是永世的,各类tag就像都不一样样,只可以作罢。假设您有减轻方案请报告自个儿,谢谢。

按属性查找

节点往往有众多天性,依照属性查找大概更方便,比如在表单中。

var email = $('[name=email]');  // 命中<??? name="email">
var pwd = $('[type=password]'); // 命中<??? type="password">
var i = $('[items="A B"]');     // 命中<??? items="A B">

当属性值包罗空格等特殊字符,须要使用引号括起来。

按属性查找还足以应用前缀查找恐怕后缀查找。尤为符合通过class属性查找,且不受class满含多少个称呼的震慑

var icons = $('[name^=icon]');  // 命中name属性值以icon开头的
var withs = $('[name$=with]'); // 命中name属性值以with结尾的

var icons2 = $('[class^="icon-"]');    // 命中class属性值包含至少一个以"icon-"开头的 class="icon-clock", class="abc icon-home"都会命中!

第2章 jQuery选择器

这段时间我们就可以平价地搜索页面上富有的树状菜单了:

结缘查找

var emailInput = $('input[name=email]');  // 只命中<input>里面的name为email的
var red = $('td.red');  // 只命中<td>里面的class包含red的

一、id选择器

页面包车型客车其余操作都亟需节点的支撑,开荒者怎么着飞快便捷的找到钦定的节点也是前端开辟中的多个关键。jQuery提供了一类别的选用器扶持开采者达到这一目标,让开采者可以越来越少的管理百端待举选取经过与特性优化,愈来愈多在乎职业逻辑的编纂。
jQuery大概支持主流的css1~css3采用器的写法,大家从最简便的也是最常用的开首学起
id选用器:一个用来搜索的ID,即成分的id属性 $( "#id" )
id选取器也是骨干的选用器,jQuery内部接纳JavaScript函数document.getElementById(卡塔尔(قطر‎来拍卖ID的拿走。原生语法的支撑总是极度快速的,所以在操作DOM的得到上,如若能利用id的话尽然思虑用这一个接受器

值得注意:
id是唯生机勃勃的,每一种id值在五个页面中必须要利用一次。假诺五个要素分配了同样的id,将只相称该id选用会集的首先个DOM成分。但这种作为不该生出;有超过二个因素的页面使用相符的id是不著见效的

var trees= getElementsByClassName;for(var i=0;i

多项选用器

多项接收器正是把四个选项器用,结合起来一块选。

var pdiv = $('p,div');  // 命中所有的<p>和<div>
var redgreen = $('p.red,p.green');  // 命中<p>class包含red或者包含green的

选出来的成分是规行矩步它们在HTML中现身的顺序排列的,并且不会有双重元素。比方,<p class="red green">不会被上边的$('p.red,p.green')分选一次。

二、类选择器

类选用器,看名就可见意思,通过class样式类名来得到节点
描述:$( ".class" )
类选拔器,相对id选取器来讲,作用相对会低一点,但是优势正是足以多选

同豆蔻梢头的jQuery在落到实处上,对于类选用器,假若浏览器援助,jQuery使用JavaScript的原生getElementsByClassName()函数来落到实处的

jQuery除了采纳上的总结,并且从不再度利用循环管理
轻便想到$(".imooc").css()主意内部确定是带了三个隐式的巡回处理,所以使用jQuery选用节点,不止只是接受上的简约,同期还扩大相当多事关的平价操作,后续大家还大概会逐步的学到别的的优势。

末段把下边这几句加到window.onload事件中运作,以便文书档案OPPO载完就对树状菜单举行起始化。完整的代码请查看上面例子的源代码。

层级选取器

层级选用器(Descendant Selector),DOM的构造正是层级结构,所以大家平日要依照层级关系進展抉择。

四个DOM成分具备层级关系,不须求是直接的上下级,只若是祖上就能够!使用相同于$('ancestor descendant')慎选,层级间使用空格。

var lis = $('ul.lang li');  // 选择所有的<li>

// 下面的方法都可以选择<li class="lang-javascript">JavaScript</li>
var js1 = $('ul.lang li.lang-javascript');
var js2 = $('div.testing li.lang-javascript');
alert(js1 === js2); // false,两个不同的jQuery对象
alert(js1.get(0) === js2.get(0)); // true,但是里面的DOM是同一个

很明朗,层级选用器比单个选用器降低了增选范围,因为首先要固定祖先(愈来愈多情形下是它的父结点!)节点,技艺选择相应的子节点,定位尤其正确。

例如,$('form[name=upload] input');只采取name属性值是upload的form里面包车型大巴input。因为页面往往有那多少个form。

多层选用器相通辅助,比如$('form.test p input');

三、成分选用器

要素接纳器:依据给定(html)标志名称接纳具备的成分
描述:$( "element" )
查找钦赐成分标签字的持有节点,那些是叁个合集的操作。相近的也是有原生方法getElementsByTagName()函数扶持

第一组:通过getElementsByTagName艺术得到页面全体的<div>成分
var divs = document.getElementsByTagName('div');
divs是dom合集对象,通过轮回给每叁个合集中的<div>成分赋予新的boder样式
第二组:近似的效果,$("p")接收全数的<p>要素,通过css方法直接赋予样式

翻看效果

子选用器(Child Selector)

类似于$('parent>child')。约束了层级关系必须是老爹和儿子关系,<child>节点必需是<parent>节点的直属子节点。

四、全接受器(*选择器)

在CSS中,平日会在率先行写下这么生龙活虎段样式
* {padding: 0; margin: 0;}
通配符*表示给全数的要素设置暗中同意的边距。jQuery中大家也可以透过传递*选择器来选普通话档页面中的元素
描述:$( "*" )
废弃jQuery,假如要博取文书档案中颇有的因素,通过document.getElementsByTagName()中传递"*"相似能够博得到

轻松开掘,id、class、tag都足以透过原生的法门赢获得对应的节点,不过我们还索要考虑叁个包容性的难点。比如:

  1. IE会将注释节点贯彻为成分,所以在IE中调用getElementsByTagName中间会含有注释节点,这么些平凡是不应有的
  2. getElementById的参数在IE8及十分的低的版本不区分抑扬顿挫写
  3. IE7及非常的低的本子中,表单成分中,要是表单A的name属性名用了另三个成分B的ID名况且A在B早前,那么getElementById会选中A
  4. IE8及好低的版本,浏览器不援救getElementsByClassName

观看了啊,作为一名合格的前端不是那么粗略的,就三个着力的选取器上边都急需做如此多包容,幸亏有jQuery的现身,让大家省了成千上万功力。

分别树枝与树叶

过滤器(Filter)

过滤器日常不独立选拔,它日常附加在选拔器上,辅助我们更标准地定位成分。

<html>
<head>
    <script src="jquery-2.2.4.js"></script>
</head>
<body>
    <div class="testing">
    <ul class="lang">
        <li class="lang-javascript">JavaScript</li>
        <li class="lang-python">Python</li>
        <li class="lang-lua">Lua</li>
    </ul>
</div>
</body>
    <script>
        var a = $('ul.lang li'); // 选出JavaScript、Python和Lua 3个节点

        var b = $('ul.lang li:first-child'); // 仅选出JavaScript
        var c = $('ul.lang li:last-child'); // 仅选出Lua
        var d = $('ul.lang li:nth-child(2)'); // 选出第N个元素,N从1开始
        var e = $('ul.lang li:nth-child(even)'); // 选出序号为偶数的元素
        var f = $('ul.lang li:nth-child(odd)'); // 选出序号为奇数的元素
    </script>
</html>

五、层级选拔器

文书档案中的全数的节点之间都以犹如此或许那样的关系。大家得以把节点之间的涉嫌得以用古板的亲族关系来描述,能够把文书档案树当做三个家谱,那么节点与节点间接就能设有老爹和儿子,兄弟,祖孙的涉及了。

采取器中的层级选拔器正是用来处理这种涉及:
子成分、 后代成分 、兄弟成分、 相邻成分

通过三个列表,相比层级接纳器的区别

图片 3

有心人调查层级采用器之间恐怕有超多日常与差异点

  1. 层级接受器都有三个参照他事他说加以考察节点
  2. 后人选用器满含子选拔器的精选的剧情
  3. 相通兄弟接收器富含相邻兄弟选用的内容
  4. 南邻兄弟接纳器和日常兄弟选择器所选拔到的因素,必得在同三个父成分下

在上后生可畏篇中我们说起树枝和树叶的界别正是其生龙活虎节点有没有子节点,所以决断树枝和树叶的不二秘籍也得以从那些角度来设想。一个比较直观的法子正是遍历整个树状菜单的DOM树,看看各样节点是或不是兼具子节点,固然局部话大家就给那么些节点多少个专程的class以示区分。我们这里用意气风发种相比取巧的措施,就是决断种种节点的innerHTML中有未有现身字符串'

表单相关

转为表单设计的接受器。

  • :input:能够筛选<input><textarea><select><button>
  • :file:能够筛选<input type="file">,和input[type=file]一样;
  • :checkbox:能够筛选复选框,和input[type=checkbox]一样;
  • :radio:能够挑选单选框,和input[type=radio]一样;
  • :focus:能够选拔当前输入核心的成分,举例把光标放到一个<input>上,用$('input:focus')就可以选出?;
  • :checked:接受当前勾上的单选框和复选框,用那些选拔器可以至时博得客商筛选的等级次序,如$('input[type=radio]:checked')
  • :enabled:能够筛选能够健康输入的<input><select>等,相当于未有灰掉的输入;
  • :disabled:和:enabled适逢其时相反,选拔那多少个不能够输入的。

别的,jQuery还也会有为数不少实用的选取器,举例,选出可知的或潜伏的要素:

$('div:visible'); // 所有可见的div
$('div:hidden'); // 所有隐藏的div

六、筛选接纳器

众多时候我们无法间接通过骨干选拔器与层级接受器找到大家想要的要素,为此jQuery提供了生龙活虎各类的挑选采取器用来越来越高速的找到所需的DOM成分。筛选选择器比非常多都不是CSS的行业内部,而是jQuery本身为了开辟者的有益延展出来的选用器

筛选接受器的用法与CSS中的伪成分相近,接收器用冒号“:”起头,通过一个列表,看看基本筛选器的描述:

图片 4

注意事项:
1.:eq(), :lt(), :gt(), :even, :odd 用来筛选他们前边的相当表明式的集合成分,依据早前相配的要素在更为筛选,注意jQuery合集都以从0开端索引

  1. gt是贰个段子挑选,从钦点索引的下几个方始,gt(1卡塔尔国 实际从2开始

。纵然有的话,那么很明显它具备一个或八个子节点。

搜索和过滤和照耀

赢得三个jQuery对象后,还是能够以那些目的为标准,举行检索和过滤。

七、内容筛选选用器

骨干挑选选取器针没有错都以因素DOM节点,假若我们要因此剧情来过滤,jQuery也提供了风流倜傥组内容筛选选取器,当然其准则也会浮现在它所蕴含的子成分或许文本内容上

内容过滤器描述如下表:

图片 5

注意事项:

  1. :contains:has都有追寻的意味,不过contains查找包含“内定文本”的因素,has查找满含“钦定成分”的要素
  2. 如果:contains相配的文件包罗在要素的子成分中,相像以为是切合条件的。
  3. :parent:empty是相反的,两个所涉嫌的子成分,满含文件节点
var trees= getElementsByClassName;for(var i=0;i -1) nodes[j].className  = 'Open'; }}

查找(find)

最布满的探求是在有些节点的全部子节点中搜索,使用find(卡塔尔(英语:State of Qatar)方法,它本人又摄取叁个率性的选取器。

风度翩翩经要从当下节点早前发展查找,使用parent(卡塔尔国方法。

对此坐落于同生龙活虎层级的节点,可以经过next(卡塔尔(英语:State of Qatar)和prev(卡塔尔(قطر‎方法。

<html>
<head>
    <script src="jquery-2.2.4.js"></script>
</head>
<body>
    <ul class="lang">
        <li class="js dy">JavaScript</li>
        <li class="dy">Python</li>
        <li id="swift">Swift</li>
        <li class="dy">Scheme</li>
        <li name="haskell">Haskell</li>
    </ul>
</div>
</body>
    <script>
        var ul = $('ul.lang'); // 获得<ul>
        var dy = ul.find('.dy'); // 获得JavaScript, Python, Scheme
        var swf = ul.find('#swift'); // 获得Swift
        var hsk = ul.find('[name=haskell]'); // 获得Haskell

        var parent = swf.parent();  // <ul>
        var a = swf.parent('div.red');  // 从父结点开始向上查找,直到找到符合的立即返回

        var py = swf.prev();    // Python
        var js = swf.prev('.js');   // JavaScript,从左兄弟找,找到一个立即返回

        var sch = swf.next();   // Scheme
        swf.next('[name=haskell]'); // Haskell
    </script>
</html>

八、可以知道性筛选接受器

要素有展现状态与掩没状态,jQuery依据成分的情况扩充了可以知道性筛选选用器:visible与:hidden

汇报如下:

图片 6

那2个接收器都以 jQuery 延伸出来的,看起来比较容易,可是成分可知性信任于适用的体裁
:hidden选用器,不独有富含样式是display="none"的因素,还包含隐藏表单、visibility等等

笔者们有两种方式得以蒙蔽二个要素:

  1. CSS display的值是none。
  2. type="hidden"的表单成分。
  3. 步长和冲天都显式设置为0。
  4. 一个祖辈成分是蒙蔽的,该因素是不会在页面上显得
  5. CSS visibility的值是hidden
  6. CSS opacity的指是0

假定成分中攻克文书档案中必定将的半空中,成分被以为是可知的。
可知元素的大幅或可观,是超过零。
要素的visibility: hidden 或 opacity: 0被以为是可以看到的,因为他们如故据有空间布局。

不在文书档案中的元素是被以为是不可以知道的,假如当他俩被插入到文书档案中,jQuery未有主意知道她们是或不是是可以预知的,因为元素可以看到性注重于适用的体制

此间给种种树枝加了三个className:Open,因为大家未来还不能够开发关闭树枝,所以若是是树枝那便是open的。当然前边大家会用到Close的:)。相应的校订一下CSS,给树枝二个带减号的Logo,表示它是开垦的:

过滤(filter)和映射(map)

和函数式编程的map、filter相仿,jQuery对象也是有像样的艺术。

filter(卡塔尔(قطر‎方法能够过滤掉不契合选拔器条件的节点。传播采纳器或许恐怕传播贰个函数,要特别注意函数内部的this被绑定为DOM对象,不是jQuery对象

map(卡塔尔国方法把二个jQuery对象饱含的多少DOM节点转变为其它对象。

四个jQuery对象借使带有了不停一个DOM节点,first(卡塔尔(قطر‎、last(卡塔尔国和slice(卡塔尔(قطر‎方法能够回到二个新的jQuery对象,把不必要的DOM节点去掉。

<html>
<head>
    <script src="jquery-2.2.4.js"></script>
</head>
<body>
    <ul class="lang">
        <li class="js dy">JavaScript</li>
        <li class="dy">Python</li>
        <li id="swift">Swift</li>
        <li class="dy">Scheme</li>
        <li name="haskell">Haskell</li>
    </ul>
</div>
</body>
    <script>
        var langs = $('ul.lang li');
        var dys = langs.filter('.dy');  // JavaScript, Python, Scheme

        var js = langs.filter(function () {
            return this.innerHTML.startsWith('J');
        });
        alert(js.get(0).innerHTML); // JavaScript

        // 数组map之后还是数组
        var arr = langs.map(function () {
            return this.innerHTML;
        }).get();   // 要调用get()才能返回数组
        alert(arr);  // string数组:JavaScript,Python,Swift,Scheme,Haskell


        var js = langs.first(); // JavaScript,相当于$('ul.lang li:first-child')
        var haskell = langs.last(); // Haskell, 相当于$('ul.lang li:last-child')
        var sub = langs.slice(2, 4); // Swift, Scheme, 参数和数组的slice()方法一致
    </script>
</html>

九、属性筛选选用器

品质选拔器让您可以依靠属性来稳固八个要素。能够只钦点该因素的某部属性,那样全体应用该属性而不管它的值,那几个因素都将被固化,也能够更抓实烈并固定在此些属性上接纳特定值的成分,那就是性质采纳器呈现它们的威力的地点。

陈述如下:

图片 7

浏览器帮忙:

  • [att=val]、[att]、[att|=val]、[att~=val] 属于CSS 2.1规范
  • [ns|attr]、[att^=val]、[att*=val]、[att$=val] 属于CSS3规范
  • [name!="value"] 归属jQuery 扩张的接纳器

CSS选拔器无论CSS2.1版本依旧CSS3版本,IE7和IE8都协理,webkit、Gecko宗旨及Opera也都援助,独有IE6以下浏览器才不帮助

在这里样多属性选拔器中[attr="value"][attr*="value"]是最实用的

  1. [attr="value"]能帮大家一定分歧类其余因素,特别是表单form成分的操作,比方说input[type="text"],input[type="checkbox"]等
  2. [attr*="value"]能在网址中扶持大家匹配差别体系的文书
.TreeView li.Open{ background:transparent url 12px 2px no-repeat;}

操作DOM

前方升高部分浏览器有innerText,有的不帮忙innerContent,未来有了jQuery,全体运用同生龙活虎的操作API。

十、子成分筛选接受器

子成分筛选采用器不经常使用,其筛选准则比起此外的选用器稍稍要复杂点
子成分筛选接纳器描述表:

图片 8

注意事项:

  1. :first只优良三个独自的要素,但是:first-child选择器能够包容四个:即为各类父级成分相称第二个子成分。这一定于:nth-child(1卡塔尔国
  2. :last 只相当一个独自的因素, :last-child 选拔器能够合营四个要素:即,为各种父级成分匹配最后二个子元素
  3. 若果子成分独有贰个以来,:first-child与:last-child是同叁个
  4. :only-child相称有些成分是父成分中必须要经过的路的子元素,正是说当前子成分是父成分中唯少年老成的要素,则卓绝
  5. jQuery达成:nth-child(n卡塔尔国是严峻来自CSS规范,所以n值是“索引”,也正是说,从1开端计数,:nth-child(index)从1开始的,而eq(index)是从0开始的
  6. nth-child(n卡塔尔 与 :nth-last-child(n卡塔尔(قطر‎的区分前面一个是早前以往总结,前面一个从后往前总括

翻开效果

修改Text和HTML

jQuery的API设计丰盛抢眼,无参数调用text(卡塔尔(英语:State of Qatar)和html(卡塔尔(قطر‎方法分别收获节点的文本和原始HTML文本。传入参数就改为设置文本和HTML文本。

var book = $('#test-ul li[name=book]');
alert(book.text());  // Java & JavaScript
alert(book.html());  // Java & JavaScript

book.text('Hello & Tim');
book.html('Hello & Tim');

一个jQuery对象可以富含0个或专断个DOM对象,它的方法实际上会效用在相应的种种DOM节点上

jQuery的另贰个亮点正是,不畏选拔器未有回去任何DOM节点,调用jQuery对象的法子还是不会报错!!!省去了汪洋的论断!!!

十后生可畏、表单成分选用器

不管提交还是传递数据,表单成分在动态人机联作页面包车型客车功力是不行重要的。jQuery中特意投入了表单采纳器,进而能够非常方便地获得到有个别项指标表单成分
表单选拔器的具体方法描述:

图片 9

注意事项:
除了input挑选选取器,大概各类表单连串筛选器都对应三个input成分的type值。大多数表单体系筛选器能够采取品质筛选器替换。比方$(':password'卡塔尔(英语:State of Qatar) == $('[type=password]')

高亮选中项

修改CSS

jQuery对象有“批量操作”的特征使得校订css拾分惠及。用法:css('name', 'value')

<html>
<head>
    <script src="jquery-2.2.4.js"></script>
</head>
<body>
    <ul id="test-css">
        <li class="lang dy">JavaScript</li>
        <li class="lang">Java</li>
        <li class="lang dy">Python</li>
        <li class="lang">Swift</li>
        <li class="lang dy">Scheme</li>
    </ul>
</div>
</body>
    <script>
        // 高亮显示动态语言
        $('#test-css li.dy>span').css('background-color', '#ffd351').css('color', 'red');
    </script>
</html>

地点直接运用了链式调用,因jQuery对象的有所办法都回到一个jQuery对象(恐怕是新的也只怕是本人)。

jQuery对象的css(卡塔尔(英语:State of Qatar)方法援救下边包车型地铁写法。

var div = $('#test-div');
div.css('color'); // 获取CSS属性
div.css('color', '#336699'); // 设置CSS属性
div.css('color', ''); // 清除CSS属性,同样返回jQuery对象
alert(div.css('color'));    // 清除后返回undefined

为了和JavaScript保持后生可畏致,CSS属性能够用'background-color'和'backgroundColor'三种格式。

css(卡塔尔(英语:State of Qatar)方法将作用于DOM节点的style属性,具备最高优先级。如若要修正class属性,能够用jQuery提供的下列方法.

var div = $('#test-div');
div.hasClass('highlight'); // false, class是否包含highlight
div.addClass('highlight'); // 添加highlight这个class
div.removeClass('highlight'); // 删除highlight这个class

十六、表单对象属性筛选接受器

除了表单元素选拔器外,表单对象属性筛选选拔器也是非常针对表单成分的选用器,能够叠加在别的选拔器的末尾,重要作用是对所筛选的表单成分举办筛选
表单筛选接受器的描述:

图片 10

注意事项:

  1. 选拔器适用于复选框和单选框,对于下拉框成分, 使用 :selected 选取器
  2. 在少数浏览器中,选用器:checked恐怕会错误选用到<option>成分,所以保障起见换用选用器input:checked,确定保证只会选用<input>成分

接下去得以达成把近年来相中的树枝高亮的职能。有八个时候必要高亮:菜单开头化的时候和点击有个别菜单项的时候。

显示和掩盖DOM

要藏匿三个DOM,使用css(卡塔尔(英语:State of Qatar)设置CSS的display属性为none。掩盖DOM节点并没有改动DOM树的协会,它只影响DOM节点的突显。

要来得这几个DOM须要先过来原来的display属性,因而需求先记下来本来的display属性到底是block依然inline依旧别的值。

有力的jQuery直接提供show(卡塔尔国和hide(卡塔尔(英语:State of Qatar)方法。我们绝不关怀它是怎么保存以前的display属性的。

十一、特殊选拔器this

深信广大刚接触jQuery的人,超多都会对$(this卡塔尔国和this的分歧模糊不清,那么这两个有何差距吗?

  1. this是JavaScript中的关键字,指的是现阶段的上下文对象,简单来讲便是办法/属性的主人
    下边例子中,imooc是三个对象,具有name属性与getName方法,在getName中this指向了所属的靶子imooc
var imooc = {
    name:"慕课网",
    getName:function(){
        //this,就是imooc对象
        return this.name;
    }
}
imooc.getName(); //慕课网

本来在JavaScript中this是动态的,相当于说那一个上下文对象都以能够被动态改换的(能够经过call,apply等方法卡塔尔国

  1. 平等的在DOM中this就是指向了那么些html成分对象,因为this便是DOM成分自个儿的三个引用
    万一给页面一个P成分绑定一个平地风波:
p.addEventListener('click',function(){
    //this === p
    //以下两者的修改都是等价的
    this.style.color = "red";
    p.style.color = "red";
},false);

经过add伊芙ntListener绑定的平地风波回调中,this指向的是时下的dom对象,所以重复改正那样对象的样式,只需求经过this获取到援引就能够
this.style.color = "red"
只是这么的操作实际照旧特不方便人民群众的,这里面将在涉及第一次全国代表大会堆的样式宽容,借使经过jQuery管理就能够轻便多了,我们只要求把this加工成jQuery对象

  1. 换成jQuery的做法:
$('p').click(function(){
    //把p元素转化成jQuery的对象
    var $this= $(this) 
    $this.css('color','red')
})

透过把$(卡塔尔(英语:State of Qatar)方法传入当前的因素对象的援引this,把那些this加工成jQuery对象,我们就足以用jQuery提供的短平快方法直接管理体制了

总体:

  1. this,表示如今的上下文对象是二个html对象,能够调用html对象所独具的本性和艺术。
  2. $(this),代表的上下文对象是二个jquery的上下文对象,能够调用jQuery的法子和属性值。

初阶化的时候可比易于管理,直接给必要高亮的节点多个例外的Class就能够,比方“Selected”:

获取DOM信息

行使jQuery的主意而不须要针对差别浏览器编写特定代码。

alert($(window).width());
alert($(window).height());

alert($(document).width());
alert($(document).height());

var div = $('#text-div');
alert(div.width()); 
alert(div.height());
div.width(400);         // 设置CSS属性 width: 400px,是否生效要看CSS是否有效
div.height('300px');    // 设置CSS属性 height: 200px,是否生效要看CSS是否有效

attr(卡塔尔(قطر‎和removeAttr()方法用于操作DOM节点的个性。

prop(卡塔尔国方法和attr(卡塔尔肖似,但是HTML5规定有风度翩翩种属性在DOM节点中得以未有值,唯有现身与不出新三种。

<input id="test-radio" type="radio" name="test" checked value="1">等价于<input id="test-radio" type="radio" name="test" checked="checked" value="1">

相近接受第生机勃勃种写法,适用于radio和checkbox,其它,<select>里面的<option>使用selected。

attr(卡塔尔和prop(卡塔尔(قطر‎对于属性checked管理的重返值不一致。attr(卡塔尔重临checked只怕undefined,prop再次回到布尔。由此prop看起来越来越好。

实际上,单选框、复选框和<select>,管理时最棒使用is('checked'卡塔尔(英语:State of Qatar)或许is('selected'卡塔尔国。

<html>
<head>
    <script src="jquery-2.2.4.js"></script>
</head>
<body>
    <div id="test-div" style="width: 300px; height: 200px">Hello</div>
    <input id="test-radio" type="radio" name="test" checked value="1">哈哈
</div>
</body>
    <script>
        var div = $('#test-div');
        alert(div.attr('id'));      // test-div
        alert(div.attr('name'));    // undefined
        div.attr('name', 'div1'); 
        div.removeAttr('name'); 
        alert(div.attr('name'));    // undefined

        var radio = $('#test-radio');
        alert(radio.attr('checked'));   // checked,没有就返回undefined
        alert(radio.prop('checked'));   // true,没有就返回false

        alert(radio.is(':checked'));    // true,没有就返回false
    </script>
</html>

第3章 jQuery的属性与体制

.TreeView li.Selected a:link,.TreeView li.Selected a:visited,.TreeView li.Selected a:hover,.TreeView li.Selected a:active{ background-color:#05F; color:#FFF; text-decoration:none;/*去除下划线*/ cursor:default;/*让光标变为普通箭头,假装是不能点的^_^*/ padding:0 2px;/*为了美观考虑,也可以不要这句*/}

操作表单

对此表单成分,使用val(卡塔尔国方法得到和装置相应的value属性。等价于前边的attr(卡塔尔国和prop(卡塔尔(قطر‎。

一、.attr().removeAttr()

种种成分都有多个依旧八个特征,那个特色的用途就是给出相应成分只怕其内容的叠合消息。如:在img成分中,src便是因素的特点,用来标志图片的地址。

操作特性的DOM方法主要有3个,getAttribute方法、setAttribute方法和removeAttribute方法,尽管如此在实操中还是会设有不菲难题,这里先不说。而在jQuery中用三个attr(卡塔尔与removeAttr(卡塔尔即可整个解决了,包罗包容难题

jQuery中用attr(卡塔尔方法来博取和设置成分属性,attr是attribute(属性)的缩写,在jQuery DOM操作中会常常使用attr(卡塔尔国

(1)attr(卡塔尔(英语:State of Qatar)有4个表明式

  1. attr(传入属性名卡塔尔(英语:State of Qatar):获取属性的值
  2. attr(属性名, 属性值卡塔尔(英语:State of Qatar):设置属性的值
  3. attr(属性名,函数值卡塔尔(英语:State of Qatar):设置属性的函数值
  4. attr(attributes卡塔尔:给钦点成分设置五个属性值,即:{属性名意气风发: “属性值后生可畏” , 属性名二: “属性值二” , … … }

(2)removeAttr(卡塔尔国删除方法
.removeAttr( attributeName ) : 为同盟的因素集合中的各样成分中移除贰个属性(attribute)

优点:
attr、removeAttr都是jQuery为了属性操作封装的,直接在贰个 jQuery 对象上调用该情势,超级轻巧对质量实行操作,也不须求去特意的敞亮浏览器的天性名分歧的标题

小心的主题素材:
dom中有个概念的差别:Attribute和Property翻译出来都以“属性”,《js高级程序设计》书中翻译为“特性”和“属性”。老妪能解:

  1. Attribute就是dom节点自带的属性
    比如说:html中常用的id、class、title、align等:
    <div id="immooc" title="慕课网"></div>
  2. Property是其黄金年代DOM元素作为靶子,
    其附加的剧情,举例,tagName, nodeName, nodeType,, defaultChecked, 和 defaultSelected 使用.prop(卡塔尔国方法实行取值或赋值等

收获Attribute就需求用attr,获取Property就需求用prop

翻开效果

修改DOM结构

二、html()及.text()

读取、修改成分的html构造照旧成分的文件内容是不足为道的DOM操作,jQuery针对那样的拍卖提供了2个便民的方法.html(卡塔尔(قطر‎与.text(卡塔尔国

此处有几点可能还索要补给说美素佳儿(Friso卡塔尔国下:

添加DOM

除此而外前方的第一手的html(),还是能动用append(卡塔尔(英语:State of Qatar)、prepend(卡塔尔(قطر‎、after(卡塔尔国和before(卡塔尔国。

除了收受字符串,append(卡塔尔(英语:State of Qatar)还足以流传原始的DOM对象,jQuery对象和函数对象。

盛传函数时,必要再次来到一个字符串、DOM对象只怕jQuery对象。

因为jQuery的append(卡塔尔国大概效果于生龙活虎组DOM节点,唯有传入函数技术针对每一种DOM生成不同的子节点,即依照index参数。

<html>
<head>
    <script src="jquery-2.2.4.js"></script>
</head>
<body>
    <div id="test-div">
        <ul>
            <li id="js">JavaScript</li>
            <li>Python</li>
            <li>Swift</li>
        </ul>
    </div>
</div>
</body>
    <script>
        // 字符串形式
        var ul = $('#test-div>ul');
        ul.append('<li>Haskell</li>');

        // 添加DOM对象
        var ps = document.createElement('li');
        ps.innerHTML = 'Pascal';
        ul.append(ps);

        // 添加jQuery对象
        ul.append($('#js'));    // 已经存在的则移动!不新增

        ul.append(function (index, html) {  // 这里的index是ul的!
            return '<li>Language - '   index   '</li>';
        });
    </script>
</html>

append(卡塔尔国把DOM增多到终极,prepend(卡塔尔国则把DOM增多到最前。

瞩目,假如要增添的DOM节点已经存在于HTML文书档案中,它会首先从文书档案移除,然后再增添,也正是说,用append(卡塔尔(قطر‎,你能够活动贰个DOM节点(即移动到最终,同理,prepend(卡塔尔移动到最前。)

假诺要把新节点插入到钦命地点,用after(卡塔尔国或before(卡塔尔国方法。

(1).html()方法

得到集结中首先个相称成分的HTML内容 或 设置每二个相称元素的html内容,具体有3种用法:

  1. .html(卡塔尔国 不传入值,就是获得集合中首先个相称成分的HTML内容
  2. .html( htmlString 卡塔尔(英语:State of Qatar) 设置每一个相配成分的html内容
  3. .html( function(index, oldhtml卡塔尔 卡塔尔国 用来回到设置HTML内容的三个函数

注意事项:
.html(卡塔尔(قطر‎方法内部使用的是DOM的innerHTML属性来管理的,所以在安装与收获上必要在乎的三个最要紧的题目,那个操作是指向全部HTML内容(不独有只是文本内容)

接纳器的先头为啥要加上.TreeView,那不是冗余代码吗?在此个例子中确确实实是冗余代码,但在其实项目中,二个页面上或者会有种种分歧的机件,比方还会有三个美食做法,被选中的菜单项也用.Selected来表示。那时就需求在采纳符的先头先提出是怎么组件的选中项以免冲突。当然还应该有别的的解决办法,举个例子这里的类不取名字为Selectd,改为TreeSelected或然其余什么的,不过那样做人工的把命名方案复杂化了,笔者个人不引入那样做。 选拔器为何分作四行来写?因为大家前边曾经设置过a的体裁,为了巩固优先级重载旧的体制,所以需求内定a的多种伪状态(还会有其余拉长优先级的点子,关于优先级算法,在《网址重构》意气风发书中有详细表明)。 Selected为何要用在li上,而不直接用在a上?这又是四个不太轻便说精晓之处,因为比异常的大程度上它是大器晚成种个人习贯,只是自己个人认为这么做更确切一些。事实上,写在li上或a上都以足以的,起码看起来不会有太大的分别,可是即使您从“表现层”中跳出来,站在“构造层”的见识来看,不论这几个菜单的树结构照旧DOM构造,四个节点都以由三个li来发布的,a只可是是以此节点内的更细节的一些。尽管本人最终是希望给a点名三个独特的体裁(为何不点名给li?你能够团结试一下),但从XHTML布局来讲,这几个`还是写在li`上更妥善。 下蓬蓬勃勃篇讲如何?

删去节点

调用remove(卡塔尔国。即使带有多少个DOM节点,则批量去除了。

(2).text()方法

收获相配成分集合中各类成分的文件内容结合,满含他们的子孙,或安装相配成分集结中每一个成分的公文内容为内定的文件内容。具体有3种用法:

  1. .text(卡塔尔(قطر‎ 得到相配成分集合中各样成分的联合文本,包蕴他们的后人
  2. .text( textString 卡塔尔国 用于安装相称成分内容的公文
  3. .text( function(index, text卡塔尔(قطر‎ 卡塔尔(英语:State of Qatar) 用来回到设置文本内容的一个函数

注意事项:
.text(卡塔尔(قطر‎结果回到一个字符串,包涵全部相配成分的集合文本

那篇小说是本人先是次投入Javascript内容,不是很掌握是说浅了依旧说深了,请大家在侧边留言告知自个儿你的主见。从下一篇最初,我们发轫进入安顿鼠标事件和响应鼠标事件方面包车型地铁内容。只怕从下下篇开端再加入一些Javascript面向对象编制程序的从头到尾的经过,待定待定……hehe^_^

事件

jQuery屏蔽了不一样浏览器对事件管理的代码差别,便于写出宽容性好的代码。

jQuery对象的on方式用来绑定一个事件,传入事件名称和相应的管理函数就能够。

<html>
<head>
    <script src="jquery-2.2.4.js"></script>
</head>
<body>
    <a id="test-link" href="#">点我</a>
</div>
</body>
    <script>
        var a = $('#test-link');
        a.on('click', function () {
            alert('Hello!');
        });
    </script>
</html>

下面包车型地铁更简短更分布的写法。二种写法完全同样,刚毅提议使用第三种。

var a = $('#test-link');
a.click(function () {
    alert('Hello!');
});
(3).html与.text的异同:
  1. .html与.text的措施操作是同样,只是在切切实实针对管理对象不相同
  2. .html处理的是因素内容,.text管理的是文件内容
  3. .html只好接受在HTML文书档案中,.text 在XML 和 HTML 文档中都能使用
  4. 假使管理的对象唯有三个子文本节点,那么html管理的结果与text是相符的
  5. 火狐不扶植innerText属性,用了相近的textContent属性,.text(卡塔尔方法综合了2个属性的扶植,所以能够相称全数浏览器
 <h3>.html()与.text()</h3>
    <div class="left first-div">
        <div class="div">
            <a>:first-child</a>
            <a>第二个元素</a>
            <a>:last-child</a>
        </div>  
        <div class="div">
            <a>:first-child</a>
            <a>第二个元素</a>
            <a>:last-child</a>
        </div>
    </div>

    <h4>显示通过html方法获取到的内容</h4>
    <p></p>

    <h4>显示通过text方法获取到的内容</h4>
    <p></p>

    <script type="text/javascript">
        //显示出html方法获取到的内容
        //.html()是整个html文档结构
        $('p:first').text( $(".first-div").html() ) 
    </script>

图片 11

    <script type="text/javascript">
        //显示出text方法获取到的内容
        //.text()是文本内容的合集
        $('p:last').text( $(".first-div").text() ) 
    </script>

图片 12

jQuery能够绑定的平地风波

  • 鼠标事件

    • click: 鼠标单击时接触
    • dblclick:鼠标双击时接触
    • mouseenter:鼠标踏入时接触
    • mouseleave:鼠标移出时接触
    • mousemove:鼠标在DOM内部移动时接触
    • hover:鼠标步入和分离时触发三个函数,也正是mouseenter加上mouseleave。
  • 键盘事件
    键盘事件仅作用在当下核心的DOM上,平常是<input><textarea>

    • keydown:键盘按下时接触
    • keyup:键盘松开时触发
    • keypress:按一遍键后触及。
  • 其余事件

    • focus:当DOM得到主旨时接触
    • blur:当DOM失去主题时接触
    • change:当<input><select><textarea>的故事情节更改时接触
    • submit:当<form>交由时接触
    • ready:当页面被载入何况DOM树实现最初化后触发

注意,ready仅成效于document对象。ready事件在DOM完结开头化后触发,且只触发二回,特别符合编写其余起头化代码

下边包车型客车代码没有收效,因为JS执行时,<form>还未加载到浏览器中。这时候的jQuery对象是空数组。

<html>
<head>
    <script src="jquery-2.2.4.js"></script>
    <script>
        var form = $('#test-form');
        alert(form.length);     // 0,form还未加载到浏览器中
        form.submit(function () {
            alert('submit!');
        });
    </script>
</head>
<body>
    <form id="test-form"></form>
</div>
</body>
</html>

由此上述的初步化代码应该献身document的ready事件管理函数中,以保证DOM完全初叶化后再举行。

<html>
<head>
    <script src="jquery-2.2.4.js"></script>
    <script>
        $(document).ready(function () {
            var form = $('#test-form');
            alert(form.length);     // 1
            form.submit(function () {
                alert('submit!');   // 没有提交按钮,这里暂时不能执行...
            });
        });
    </script>
</head>
<body>
    <form id="test-form"></form>
</div>
</body>
</html>

ready事件选取十分广阔,上边的代码可用于简化成上边!

$(function () {
    var form = $('#test-form');
    alert(form.length);     // 1
    form.submit(function () {
        alert('submit!');   // 没有提交按钮,这里暂时不能执行...
    });
});

大凡相符于$(function () {...})的都以document对象的ready事件处理函数。

相同的时候,完全能够频仍绑定事件管理函数,它们会相继执行!

$(function () {
    alert('init - 1');
})
$(function () {
    alert('init - 2');
})
$(function () {
    alert('init - 3');
})

三、.val()

jQuery中有二个.val(卡塔尔方法重如果用以拍卖表单元素的值,比如 input, select 和 textarea。

事件参数

所有的事件都会传来伊芙nt对象作为参数。

<html>
<head>
    <script src="jquery-2.2.4.js"></script>
    <script>
        $(function () {
            $('#test-div').mousemove(function (e) {
                $('#test-span').text('pageX = '   e.pageX   ', pageY = '   e.pageY);
            });
        })
    </script>
</head>
<body>
    <div id="test-div" style="width: 200px; height: 100px; border: red solid 1px"></div>

</div>
</body>
</html>
(1).val()方法
  1. .val(卡塔尔(英语:State of Qatar)无参数,获取相称的元素集合中第贰个因素的近来值
  2. .val( value 卡塔尔,设置相称的成分集合中种种元素的值
  3. .val( function 卡塔尔(英语:State of Qatar) ,一个用来回到设置值的函数

收回绑定

接受相同于off('click', function卡塔尔(قطر‎死灭绑定的事件管理函数。

function hello() {
    alert('Hello!');
}
$('#test-link').click(hello);
// 10s后解除绑定
setTimeout(function () {
    $('#test-link').off('click', hello);
}, 10000);

介意上边包车型客车消灭无效,因为五个佚名函数不是同三个函数,纵然代码相通。

$('#test-link').click(function () {
    alert('Hello!');
});

$('#test-link').off('click', function () {
    alert('Hello!');
});

使用off('click')能够三遍性移除已绑定到click事件的所有管理函数。

同理,无参数调用off()三次性移除已绑定的装有事件类型的管理函数。

(2) 注意事项:
  1. 经过.val(卡塔尔(قطر‎管理select成分, 当未有选取项被选中,它回到null
  2. .val(卡塔尔(قطر‎方法多用来安装表单的字段的值
  3. 豆蔻梢头经select成分有multiple(多选)属性,並且最少叁个选取项被选中, .val(卡塔尔(英语:State of Qatar)方法再次回到一个数组,这几个数组包蕴种种选中采纳项的值

事件触发条件

亟待注意的是,事件的接触总是由顾客操作引发的。譬喻监察和控制文本框的始末改造,使用JS去改革文本框内容将不会触发事件。

假使一定要由此代码触发,要求调用需求无参数调用jQuery对象的change(卡塔尔。x.change()等价于x.trigger('change'),即trigger()的简写。

<html>
<head>
    <script src="jquery-2.2.4.js"></script>
    <script>
        $(function () {
            var input = $('#test-text');
            input.change(function () {
                alert('text changed!');
            });

            input.val('change it!');
            // 下面两句等价
            input.change();
            // input.trigger('change');
        });
    </script>
</head>
<body>
    <input type="text" id="test-text">
</div>
</body>
</html>
(3).html(卡塔尔(英语:State of Qatar),.text(卡塔尔(英语:State of Qatar)和.val(卡塔尔(英语:State of Qatar)的异样计算:
  1. .html(卡塔尔,.text(卡塔尔(英语:State of Qatar),.val(卡塔尔(قطر‎三种艺术都以用来读取选定成分的从头到尾的经过;只可是.html(卡塔尔国是用来读取成分的html内容(包涵html标签).text(卡塔尔(قطر‎用来读取成分的纯文本内容,包涵其后裔成分.val(卡塔尔(英语:State of Qatar)是用来读取表单成分的"value"值。其中.html(卡塔尔国和.text(卡塔尔方法不能够应用在表单成分上,而.val(卡塔尔国只可以利用在表单成分上;另外.html(卡塔尔(قطر‎方法应用在多少个因素上时,只读取第多个要素;.val()方法和.html()相同,如果其运用在三个因素上时,只可以读取第二个表单成分的"value"值,可是.text(卡塔尔(英语:State of Qatar)和他们不风华正茂致,假设.text(卡塔尔应用在多少个因素上时,将会读取全体入选成分的文本内容。
  2. .html(htmlString卡塔尔(英语:State of Qatar),.text(textString卡塔尔国和.val(value卡塔尔(قطر‎两种艺术都以用来替换选七月素的内容,若是四个法子同有时间利用在几个成分上时,那么将会轮番全体入选成分的内容。
  3. .html(卡塔尔,.text(卡塔尔国,.val(卡塔尔(قطر‎都足以采用回调函数的再次回到值来动态的变动三个要素的剧情

浏览器安全节制

浏览器中,有个别代码只可以由客户触发,举个例子window.open()

<script>
    $(function () {
        window.open('1.txt');
    });
</script>

浏览器会拦截下边包车型大巴代码。

下边包车型客车代码里面的500ms后自动试行的竟然也实践了?!

<html>
<head>
    <script src="jquery-2.2.4.js"></script>
</head>
<body>
    <input type="button" id="btn1" value="按钮1">
    <input type="button" id="btn2" value="按钮2">
</div>
</body>
    <script>
        function pop() {
            ('call');
            window.open('/');
        }

        $('#btn1').click(function () {
            pop();    // 放在用户的点击事件里面,允许
        });

        $('#btn2').click(function () {
            // 并未立即执行pop,延迟由JS代码执行
            setTimeout(pop, 100);   // 貌似也自动打开了啊
        });
    </script>
</html>

四、扩展样式.addClass()

因此动态改换类名(class),能够让其纠正成分展现出不一致的效用。在HTML布局中,八个class以空格分隔,当四个节点(或称为二个标签)含有多少个class时,DOM成分响应的className属性获取的不是class名称的数组,而是贰个带有空格的字符串,那就使得多class操作变得很辛勤。同样的jQuery开拓者也设想到这种景色,扩张了叁个.addClass(卡塔尔方法,用于动态扩大class类名

.addClass( className )方法

  1. .addClass( className 卡塔尔(قطر‎ : 为每一种相称成分所要扩张的贰个或多个样式名
  2. .addClass( function(index, currentClass卡塔尔(قطر‎ 卡塔尔(قطر‎ : 这几个函数再次来到四个或更多用空格隔开分离的要追加的样式名

注意事项:
.addClass(卡塔尔国方法不会轮流多个体制类名。它只是简短的增加一个体裁类名到成分上
简短的汇报下:在p成分扩张一个newClass的样式

<p class="orgClass">
$("p").addClass("newClass")

那便是说p成分的class实际上是 class="orgClass newClass"样式只会在原先的类上一往直前增添,通过空格分隔

动画

JS完毕动漫的原理:每间距大器晚成段时间去退换DOM成分的体裁。

看起来大致,手写JS完结动画是很复杂的,使用jQuery封装的卡通片,只需生龙活虎行代码。

五、删除样式.removeClass()

jQuery通过.addClass(卡塔尔(英语:State of Qatar)方法能够很方便的充实样式。倘诺急需样式之间的切换,同样jQuery提供了叁个很有益的.removeClass(卡塔尔(英语:State of Qatar),它的效用是从相称的因素中剔除全体或然内定的class

.removeClass( )方法

  1. .removeClass( [className ] 卡塔尔(قطر‎:每种相配成分移除的八个或多少个用空格隔离的体裁名
  2. .removeClass( function(index, class卡塔尔(قطر‎ 卡塔尔 : 一个函数,再次回到多少个或两个将在被移除的体制名

注意事项
假设三个体制类名作为多少个参数,只有这么式类会被从匹配的要素集结中删除 。 若无样式名作为参数,那么具备的样式类将被移除

show/hide

无参数调用show(卡塔尔(英语:State of Qatar)和hide(卡塔尔(قطر‎将展现和掩瞒元素,toggle(卡塔尔将依靠当前情景调节显示依然隐敝,动漫方式都是从左上竞争渐开展或裁减的。传入二个小时参数(单位:ms),便是卡通,即在指如时期内呈现或隐敝。也足以是slowfast等字符串。

<html>
<head>
    <script src="jquery-2.2.4.js"></script>
</head>
<body>
    <div id="div1" style="width: 300px; height: 200px; background-color: blue"></div>
</div>
</body>
    <script>
        $('#div1').hide(3000);
        $('#div1').show('slow');
        $('#div1').toggle('fast');
    </script>
</html>

六、切换样式.toggleClass(卡塔尔国

在做一些意义的时候,恐怕会针对同大器晚成节点的某叁个样式不断的切换,也正是addClass与removeClass的排外切换,举例隔行换色效果

jQuery提供叁个toggleClass方法用于简化这种互斥的逻辑,通过toggleClass方法动态拉长删减Class,叁回推行一定于addClass,再一次试行一定于removeClass

.toggleClass( )方法:在十二分的因素群集中的每一种成分上加上或删除四个或七个样式类,决定于这一个样式类是还是不是存在或值切换属性。即:假若存在(不设有)就删除(增添)叁个类

  1. .toggleClass( className 卡塔尔(英语:State of Qatar):在配合的元素集合中的每种成分上用来切换的一个或多少个(用空格隔开分离)样式类名
  2. .toggleClass( className, switch 卡塔尔:叁个布尔值,用于判定样式是或不是应当被加上或移除
  3. .toggleClass( [switch ] 卡塔尔国:三个用来判定样式类拉长照旧移除的 布尔值
  4. .toggleClass( function(index, class, switch) [, switch ] 卡塔尔国:用来回到在协作的要素集合中的每一种元素上用来切换的体制类名的二个函数。接受成分的目录地方和要素旧的样式类作为参数

注意事项:

  1. toggleClass是四个排斥的逻辑,也正是通过判定相应的要素上是或不是存在钦赐的Class名,如若有就删除,若无就充实
  2. toggleClass会保留原有的Class名后新添,通过空格隔绝

slideUp / slideDown

动画片形式是在笔直方向慢慢开展或缩短。slideToggle(卡塔尔国同toggle(卡塔尔(英语:State of Qatar)。参数同show(卡塔尔(قطر‎/hide(卡塔尔(英语:State of Qatar)/toggle(卡塔尔国。

七、样式操作.css(卡塔尔(قطر‎

由此JavaScript获取dom成分上的style属性,大家能够动态的给成分付与样式属性。在jQuery中我们要动态的改造style属性大家只要利用css(卡塔尔(قطر‎方法就能够兑现了

.css(卡塔尔 方法:获取成分样式属性的总计值也许安装成分的CSS属性

fadeIn / fadeOut

动画效果是淡入淡出。通过不断设置DOM成分的opacity属性来贯彻,fadeToggle(卡塔尔(قطر‎同理。

获取:
  1. .css( propertyName ):获取相称成分集结中的第多少个成分的体制属性的总计值
  2. .css( propertyNames 卡塔尔(قطر‎:传递风姿罗曼蒂克组数组,重回三个目的结果

自定义动漫

选取animate(卡塔尔国达成自由动漫效果。传入的参数便是DOM元素最终的CSS状态和时间,jQuery在岁月段内连发调节CSS直到达到我们设定的值。

animate(卡塔尔(英语:State of Qatar)还足以再盛传三个函数,当动漫截止时,该函数将被调用。

<html>
<head>
    <script src="jquery-2.2.4.js"></script>
</head>
<body>
    <div id="div1" style="width: 300px; height: 200px; background-color: blue"></div>
</div>
</body>
    <script>
        $('#div1').animate({
            opacity: 0.25,
            width: '150px',
            height: '100px'
        }, 3000, function () {
            alert('动画结束!');
            // 注意,this指DOM对象,需要包装成jQuery对象
            $(this).css('opacity', '1.0').css('width', '300px').css('height', '200px');
        });
    </script>
</html>
设置:
  1. .css(propertyName, value ):设置CSS
  2. .css( propertyName, function 卡塔尔(英语:State of Qatar):能够流传贰个回调函数,重回取到对应的值进行拍卖
  3. .css( properties 卡塔尔国:能够传贰个目的,同不经常间安装几个样式

串行动漫

jQuery的卡通片效果还足以串行施行,通过delay(卡塔尔(قطر‎方法还足以兑现暂停,进而得以完成更复杂的卡通片效果,而代码却特出轻松。

因为动漫要求实践豆蔻梢头段时间,所以jQuery必得不断再次回到新的Promise对象才具世袭实行操作。简单地把动漫封装在函数中是相当不足的。

<html>
<head>
    <script src="jquery-2.2.4.js"></script>
</head>
<body>
    <div id="div1" style="width: 300px; height: 200px; background-color: blue; display: none"></div>
</div>
</body>
    <script>
        $('#div1').slideDown(2000)  // 为了看到效果,先display: none
            .delay(1000)
            .animate({
                width: '150px',
                height: '100px'
            }, 2000)
            .delay(1000)
            .animate({
                width: '300px',
                height: '200px'
            }, 2000);
    </script>
</html>
注意事项:
  1. 浏览器属性获取模式各异,在得到有些值的时候都jQuery选用统生龙活虎的管理,举个例子颜色接收RBG,尺寸采取px
  2. .css(卡塔尔国方法扶植驼峰写法与大小写混合搭配的写法,内部做了容错的拍卖
  3. 当叁个数只被视作值(value)的时候, jQuery会将其改换为一个字符串,并添在字符串的结尾处增多px,譬喻.css("width",50}卡塔尔 与 .css("width","50px"}卡塔尔(英语:State of Qatar)同样

缘何有的动画未有效用

那是因为jQuery动漫的规律是稳步改动CSS的值,如height从100px慢慢变为0。可是过多不是block性质的DOM成分,对它们设置height根本就不起成效,所以动漫也就平素不意义。

别的,jQuery也未曾兑现对background-color的动漫效果,用animate()设置background-color也平昔不效益。这种意况下得以选拔CSS3的transition落到实处动漫效果。

八、.css(卡塔尔国与.addClass(卡塔尔(قطر‎设置样式的界别

对此样式的设置,大家学了addClass与css方法,那么两个之间有何样分别?

AJAX

动用jQuery写AJAX,不仅仅不用思忖浏览器的包容性,何况代码十三分精练。

(1)可维护性:

.addClass(卡塔尔的实质是透过定义个class类的体裁法规,给成分增加一个或四个类。css方法是经过JavaScript一大波代码实行转移成分的体裁

通过.addClass(卡塔尔(英语:State of Qatar)大家可以批量的给同样的因素设置统蓬蓬勃勃法规,变动起来比较有利,能够统生龙活虎匡正删除。假若通过.css(卡塔尔国方法就要求钦命每二个成分是逐豆蔻年华的改过,日后保卫安全也要各个的修正,相比辛劳

ajax()

一向调用全局对象$的ajax(url, settings)。settings对象设置如下:

  • async:是不是异步实践AJAX恳求,默以为true,纯属不要钦命为false
  • method:发送的Method,缺省为'GET',可钦定为'POST'、'PUT'等
  • contentType:发送POST央求的格式,暗中同意值为'application/x-www-form-urlencoded; charset=UTF-8',也得以钦点为'text/plain'、'application/json'
  • data:发送的数额,能够是字符串、数组或object。假设是GET乞求,data将被转换到query附加到U普拉多L上,假若是POST供给,依照contentType把data体系化成合适的格式
  • headers:发送的附加的HTTP头,必得是一个object
  • dataType:接受的数量格式,能够内定为'html'、'xml'、'json'、'text'等,缺省状态下基于响应的Content-Type揣测。

回调函数处理回来的数目和失误时的响应前边是利用Promise对象(ES6引进),jQuery里面也是有个像样的jqXHR目的,由此得以使用链式写法处理回调。

<html>
<head>
    <script src="jquery-2.2.4.js"></script>
</head>
<body>
    <textarea id="response-text" rows="5"></textarea>
    <button type="button" id="btn">获取</button>
</body>
<script>
    function ajaxLog(s) {
        var txt = $('#response-text');
        txt.val(txt.val()   'n'   s);
    }

    $('#btn').click(function () {
        $('#response-text').val('');

        $.ajax('https://www.liaoxuefeng.com/api/categories', {  // 不能跨越,暂时会报错
            dataType: 'json'
        }).done(function (data) {
            ajaxLog('成功,收到数据:'   JSON.stringify(data));
        }).fail(function (xhr, status) {
            ajaxLog('失败:'   xhr.status   ',原因:'   status);
        }).always(function () {
            ajaxLog('请求完成:无论成功与否都会执行。');
        });
    });
</script>
</html>

对于常用的AJAX操作,jQuery提供了帮扶的方法。

(2)灵活性:

通过.css(卡塔尔国方式得以超轻巧动态的去改造一个体制的属性,无需在去繁杂的定义个class类的平整。通常的话在不显明伊始构造准绳,通过动态变化的HTML代码布局中,都以通过.css(卡塔尔(قطر‎方法管理的

get()

处理GET请求。

var jqxhr = $.get('/path/to/resource', {
    name: 'Bob Lee',
    check: 1
});

第4个参数若是是object,jQuery自动把它形成query string接下来加到U奥迪Q5L前面,实际的U陆风X8L是:/path/to/resource?name=Bob Lee&check=1。实际上大家不须要关切UPRADOL是何许编码的。

(3)样式值:

.addClass(卡塔尔(英语:State of Qatar)本质只是本着class的类的加多删除,不可能获取到钦点样式的性质的值,.css(卡塔尔国能够拿走到内定的样式值。

post()

拍卖POST伏乞,和get(卡塔尔相近,不过传入的第一个参数私下认可被连串化为application/x-www-form-urlencoded,即事实上的数目name=Bob Lee&check=1作为POST的body被发送。

var jqxhr = $.post('/path/to/resource', {
    name: 'Bob Lee',
    check: 1
});
(4)样式的刚开始阶段级:

css的体制是有优先级的,当外界体制、内部样式和内联样式同样样式准绳同期采用于同一个成分的时候,优先级如下:
外界体制 < 内部样式 < 内联样式

  1. .addClass(卡塔尔(قطر‎方法是通过扩大class名的办法,那么那个样式是在外部文件只怕此中样式中先定义好的,等到供给的时候在叠合到成分上
  2. 通过.css(卡塔尔(英语:State of Qatar)方法管理的是内联样式,直接通过成分的style属性附加到成分上的

通过.css方法设置的体制属性优先级要高于.addClass方法

getJSON()

是因为JSON用得越来越广阔,所以jQuery也提供了getJSON(卡塔尔国方法来急速经过GET获取叁个JSON对象。

var jqxhr = $.getJSON('/path/to/resource', {
    name: 'Bob Lee',
    check: 1
}).done(function (data) {
    // 此时data已经是JSON对象了
});
(5)总结:

.addClass与.css方法有利有弊,平日是静态的布局,都明确了布局的平整,能够用addClass的办法,增添统蓬蓬勃勃的类法规
风流倜傥旦是动态的HTML构造,在不鲜明法规,或许常常转移的图景下,平常多考虑.css(卡塔尔方式

安然范围

jQuery的AJAX完全封装的是JS的AJAX操作,所以它的平安范围和前面讲的用JavaScript写AJAX完全平等。

只要急需利用JSONP,可以在ajax(卡塔尔中安装jsonp: 'callback',让jQuery落成JSONP跨域加载数据。

九、成分的数据存款和储蓄.data()

html5 dataset是新的HTML5标准,允许你在平凡的成分标签里放置雷同data-*的习性,来兑现部分大致多少的存取。它的多少不受约束,并且也能由JavaScript动态改革,也支撑CSS选择器实行体制设置。那使得data属性非常灵巧,也极度苍劲。有了如此的属性大家能够更进一层有序直观的扩充数量预设或存储。那么在不援助HTML5职业的浏览器中,大家什么落实数量存取? jQuery就提供了三个.data(卡塔尔(英语:State of Qatar)的点子来管理那么些主题素材

动用jQuery初读书人平常不是很关心data方式,这一个方法是jquery内部预用的,能够用来做品质优化,比方sizzle采纳中能够用来缓存部分结果集等等。当然这些也是不行主要的二个API了,常常用于大家贮存有时的风流倜傥对数码,因为它是一向跟DOM成分对象绑定在黄金年代道的

jQuery提供的仓库储存接口

jQuery.data( element, key, value )   //静态接口,存数据
jQuery.data( element, key )  //静态接口,取数据   
.data( key, value ) //实例接口,存数据
.data( key ) //实例接口,存数据

2个方法在动用上存取都是同三个接口,传递成分,键值数据。在jQuery的官方文书档案中,建议用.data(卡塔尔方法来替代。

大家把DOM能够当做三个对象,那么大家往对象上是足以存在基本类型,引用类型的多少的,可是这里会掀起五个标题,恐怕会设有循环引用的内部存款和储蓄器泄漏危害

因而jQuery提供的数量接口,就很好的拍卖了那一个主题素材了,咱们无需关心它底层是怎么促成,只供给据守相应的data方法应用就能够了

无差别于的也提供2个照管的去除接口,使用上与data方法其实是千篇黄金时代律的,只可是是二个是扩大四个是剔除罢了

jQuery.removeData( element [, name ] )
.removeData( [name ] )

扩展

jQuery内置的形式长久不容许满足全体的急需。在jQuery的底蕴上编写制定插件,可防止止重新代码,进步代码可维护性。

给jQuery对象绑定一个新格局是通过扩充$.fn对象实现的。

<html>
<head>
    <script src="jquery-2.2.4.js"></script>
</head>
<body>
    <div id="test-highlight1">
        <p>什么是jQuery</p>
        <p>jQuery是目前最流行的JavaScript库。</p>
    </div>
</body>
<script>
    $.fn.highlight1 = function () {
        // 注意,此时的this是jQuery对象!
        this.css('backgroundColor', '#FFFCEB').css('color', '#D85030');
        return this;
    };

    $('#test-highlight1 span').highlight1();
</script>
</html>

专一,函数内部的this在调用时被绑定为jQuery对象,所以函数内部代码能够健康调用全体jQuery对象的不二诀窍。

咱俩在自定义的highlight1(卡塔尔(英语:State of Qatar)函数最后return this,是为着扶持链式调用,仿佛jQuery同样。

自定义的highlight1(卡塔尔还能吸收接纳参数,让调用者内定高亮的颜色。

<html>
<head>
    <script src="jquery-2.2.4.js"></script>
</head>
<body>
    <div id="test-highlight2">
        <p>什么是jQuery</p>
        <p>jQuery是目前最流行的JavaScript库。</p>
    </div>
</body>
<script>
    $.fn.highlight2 = function (options) {
        // 巧妙地使用短路运算检查输入
        var bgcolor = options && options.backgroundColor || '#fffceb';
        var color = options && options.color || '#D85030';
        this.css('backgroundColor', bgcolor).css('color', color);
        return this;
    };

    $('#test-highlight2 span').highlight2({
        backgroundColor: '#00a8e6',
        color: '#FFFFFF'
    });
</script>
</html>

这里,高超的使用短路运算,协作||和&&运算符,能够检查输入或者安装私下认可值

另朝气蓬勃种方式是利用jQuery提供的佑助方法$.extend(target, obj1, obj2, ...),它把前边的四个obj对象的性质合併到第一个target对象中,蒙受同名属性,总是利用靠后的对象的值,也正是越以后优先级越高。

故此大家传入默许值到背后的object对象如obj1里面,假诺急需自定义参数,在再前面传来options。分明,这几个暗许值能够献身$.fn.highlight对象上面,表示归于它的暗中同意值。有了这些暗许值,客商也可以安装并修改成自个儿偏疼的私下认可值

<html>
<head>
    <script src="jquery-2.2.4.js"></script>
</head>
<body>
    <div id="test-highlight">
        <p>什么是jQuery</p>
        <p>jQuery是目前最流行的JavaScript库。</p>
    </div>
</body>
<script>
    $.fn.highlight = function (options) {
        // 合并默认值和用户设定值
        var opts = $.extend({}, $.fn.highlight.defaults, options);
        this.css('backgroundColor', opts.backgroundColor).css('color', opts.color);

        return this;
    };

    // 设置默认值
    $.fn.highlight.defaults = {
        backgroundColor: '#fff8de',
        color: '#d85030'
    };


    // 用户也可以修改成自己偏好的默认值!
    $.fn.highlight.defaults.color = '#fff';
    $.fn.highlight.defaults.backgroundColor = '#000';
    // 无参调用
    $('#test-highlight span').highlight();
</script>
</html>

二、DOM篇

编写制定二个jQuery插件的标准

  1. $.fn绑定函数,实现插件的代码逻辑;
  2. 插件函数最终要return this;以帮忙链式调用;
  3. 插件函数要有私下认可值,绑定在$.fn.<pluginName>.defaults上;
  4. 顾客在调用时可传唱设定值以便覆盖暗许值。

率先章 DOM节点的始建

本着一定成分的恢宏

jQuery对象的有个别措施只可以效用在一定DOM成分上,举个例子submit()方式只可以针对form。我们得以注重jQuery的filter()对特定DOM成分增添方法。

诸如上边包车型客车要求:要给全数指向外链的超链接加上跳转提醒。

<html>
<head>
    <script src="jquery-2.2.4.js"></script>
</head>
<body>
    <div id="test-external">
        <p>百度:<a href="http://www.baidu.com" target="_blank">百度网址</a></p>
        <p>谷歌:<a href="https://www.google.com" target="_blank">谷歌</a></p>
        <p>本地:<a href="/hello.txt" target="_blank">hello.txt</a></p>
    </div>
</body>
<script>
    $.fn.external = function () {
        // 这里的this是jQuery对象
        // 返回each()返回结果,以支持链式调用!
        return this.filter('a').each(function () {
            // 这里的this是DOM元素本身!
            var a = $(this);
            var url = a.attr('href');
            if (url && url.indexOf('http://') === 0 || url.indexOf('https://') === 0) {
                // 不重置href的话,confirm对话框关闭后,链接依然照常打开
                a.attr('href', '#')
                  // 不移除target,confirm点击取消后,会在新窗口打开a.href的网址
                  .removeAttr('target')
                  .click(function () {
                    if (confirm('您确定要前往'   url   "?")) {
                        window.open(url);
                    }
                  });
            }
        });
    };

    $('#test-external a').external();
</script>
</html>

编辑的扩充方法要能够协理链式调用具备默许值过滤特定成分树状菜单_javascript技巧_脚本之家,菜单固定。,使得扩张方法看起来和jQuery本身的法子未有怎么分化。

(1)DOM创立节点及节点属性

创设流程大要如下:
  1. 创造节点(布衣蔬食的:成分、属性和文书卡塔尔国
  2. 增添节点的局地质量
  3. 到场到文书档案中
流程中关系的一些方法:
  1. 创办元素:document.createElement
  2. 安装属性:setAttribute
  3. 累Gavin件:innerHTML
  4. 步向文书档案:appendChild
<body>
    <h2>动态创建元素节点</h2>
    <div class="left">
        <div class="aaron">点击body区域会动态创建元素节点</div>
    </div>
    <script type="text/javascript">
        var body = document.querySelector('body');

        document.addEventListener('click',function(){

            //创建2个div元素
            var rightdiv = document.createElement('div')
            var rightaaron = document.createElement("div");

            //给2个div设置不同的属性
            rightdiv.setAttribute('class', 'right')
            rightaaron.className = 'aaron'
            rightaaron.innerHTML = "动态创建DIV元素节点";

            //2个div合并成包含关系
            rightdiv.appendChild(rightaaron)

            //绘制到页面body
            body.appendChild(rightdiv)
        },false)
    </script>
</body>
问题:
  1. 每一个要三秋点都必须要独立创制
  2. 节点是性质供给独自设置,并且设置的接口不是很统一
  3. 丰硕到钦定的因素位置不灵敏
  4. 最终还会有多个最要害的:浏览器宽容难题管理

(2)jQuery节点创制与质量的管理

通过JavaScript原生接口创制节点,在管理上是特别复杂与麻烦的。我们可以透过选用jQuery来简化了这一个进程

1.开立成分节点:

相近格局正是向来把那个节点的协会给通过HTML标志字符串描述出来,通过$(卡塔尔国函数管理,$("html构造"卡塔尔(قطر‎
$("<div></div>")

2.创办为本节点:

与创产生分节点相仿,能够间接把公文内容风姿浪漫并描述
$("<div>我是文本节点</div>")

3.创办为属性节点:

与创制作而成分节点相通的法门
$("<div id='test' class='aaron'>我是文本节点</div>")

改进后:
<body>
    <h2>动态创建元素节点</h2>
    <button>点击通过jQuery动态创建元素节点</button>
    <script type="text/javascript">
    var $body = $('body');
    $body.on('click', function() {
        //通过jQuery生成div元素节点
        var div = $("<div class='right'><div class='aaron'>动态创建DIV元素节点</div></div>")
        $body.append(div)
    })
</body>

其次章 DOM节点的插入

(1)DOM内部插入append(卡塔尔国与appendTo(卡塔尔

动态创立的要素是非常不够的,它只是临时寄放在内部存款和储蓄器中,最后大家须求安置页面文书档案并显现出来。那么难点来了,怎么放到文书档案上?
此地就关乎到四个岗位关系,常见的就是把这么些新创制的要素,当做页面某二个成分的子成分放到其内部。针对那样的拍卖,jQuery就定义2个操作的主意

图片 13

  1. append:其豆蔻年华操作与对点名的元素实行原生的appendChild方法,将它们增进到文书档案中的情状近似。
  2. appendTo:事实上,使用那么些方法是颠倒了符合规律的$(A卡塔尔(英语:State of Qatar).append(B卡塔尔(قطر‎的操作,即不是把B追加到A中,而是把A追加到B中。
总结:

.append(卡塔尔国和.appendTo(卡塔尔三种艺术效果雷同,主要的两样是语法——内容和对象的地点分歧

  1. append(卡塔尔前边是被插入的目标,前边是要在对象内插入的成分内容
  2. appendTo(卡塔尔前边是要插入的成分内容,而后边是被插入的对象
<body>
    <h2>通过append与appendTo添加元素</h2>
    <button id="bt1">点击通过jQuery的append添加元素</button>
    <button id="bt2">点击通过jQuery的appendTo添加元素</button>
    <div class="content"></div>

    <script type="text/javascript">
        $("#bt1").on('click', function() {
            //.append(), 内容在方法的后面,
            //参数是将要插入的内容。
            $(".content").append('<div class="append">通过append方法添加的元素</div>')
        })

    </script>

    <script type="text/javascript">

        $("#bt2").on('click', function() {
            //.appendTo()刚好相反,内容在方法前面,
            //无论是一个选择器表达式 或创建作为标记上的标记
            //它都将被插入到目标容器的末尾。
            $('<div class="appendTo">通过appendTo方法添加的元素</div>').appendTo($(".content"))
        })
    </script>
</body>

(2)DOM外界插入after(卡塔尔(英语:State of Qatar)与before(卡塔尔国

节点与节点以前有各类关系,除了老爹和儿子,祖辈关系,仍为能够是弟兄关系。此前大家在拍卖节点插入的时候,接触到了中间插入的多少个主意,那节大家开首讲外界插入的管理,也正是兄弟之间的涉及管理,这里jQuery引入了2个方式,能够用来在合作的因素前后插入内容

接受器的叙说:

图片 14

  • before与after都是用来对相对选瓜时素外界扩展相邻的小家伙节点
  • 2个方法都是都能够选择HTML字符串,DOM 元素,成分数组,只怕jQuery对象,用来插入到聚集中种种匹配元素的后边只怕后边
  • 2个方法都帮助多个参数字传送递after(div1,div2,....卡塔尔
注意点:
  • after向成分的末端增加html代码,假定成分前边有成分了,那将前面的成分后移,然后将html代码插入
  • before向成分的前段时间增加html代码,假设成分前面有成分了,那将前方的要素前移,然后将html代码插
<body>
    <h2>通过before与after添加元素</h2>
    <button id="bt1">点击通过jQuery的before添加元素</button>
    <button id="bt2">点击通过jQuery的after添加元素</button>
    <div class="aaron">
        <p class="test1">测试before</p>
    </div>
    <div class="aaron">
        <p class="test2">测试after</p>
    </div>
    <script type="text/javascript">
    $("#bt1").on('click', function() {
        //在匹配test1元素集合中的每个元素前面插入p元素
        $(".test1").before('<p style="color:red">before,在匹配元素之前增加</p>', '<p style="color:red">多参数</p>')
    })
    </script>
    <script type="text/javascript">
    $("#bt2").on('click', function() {
        //在匹配test1元素集合中的每个元素后面插入p元素
        $(".test2").after('<p style="color:blue">after,在匹配元素之后增加</p>', '<p style="color:blue">多参数</p>')

    })
    </script>
</body>

(3)DOM内部插入prepend(卡塔尔(قطر‎与prependTo(卡塔尔

在要素内部实行操作的法子,除了在被选成分的结尾(照旧在其间)通过append与appendTo插入钦命内容外,相应的仍是可以够在被选元素早前插入,jQuery提供的法门是prepend与prependTo
选用器的描述:

图片 15

透过侧面代码能够看到prepend与prependTo的使用及界别:

  • .prepend(卡塔尔(قطر‎方法将点名成分插入到相配成分里面作为它的首先个子元素(假诺要作为最终四个子元素插入用.append(卡塔尔(قطر‎卡塔尔(قطر‎.
  • .prepend(卡塔尔和.prependTo(卡塔尔国完成平等的作用,首要的不一样是语法,插入的原委和对象的岗位区别
  • 对于.prepend(卡塔尔来讲,接受器表达式写在艺术的日前,作为待插入内容的容器,就要被插入的内容作为艺术的参数
  • 而.prependTo(卡塔尔(英语:State of Qatar)正巧相反,就要被插入的开始和结果写在格局的先头,能够是选用器表明式或动态创制的符号,待插入内容的容器作为参数。

此地总括下里面操作两个章程的不同:

  • append(卡塔尔向各类相配的要素内部追加内容
  • prepend(卡塔尔(英语:State of Qatar)向各种相称的因素内部前置内容
  • appendTo(卡塔尔(英语:State of Qatar)把装有相称的因素追加到另一个钦赐成分的聚合中
  • prependTo(卡塔尔把装有相称的因素前置到另两个点名的要素集结中
<body>
    <h2>通过prepend与prependTo添加元素</h2>
    <button id="bt1">点击通过jQuery的prepend添加元素</button>
    <button id="bt2">点击通过jQuery的prependTo添加元素</button>
    <div class="aaron1">
        <p>测试prepend</p>
    </div>
    <div class="aaron2">
        <p>测试prependTo</p>
    </div>
    <script type="text/javascript">
    $("#bt1").on('click', function() {
        //找到class="aaron1"的div节点
        //然后通过prepend在内部的首位置添加一个新的p节点
        $('.aaron1')
            .prepend('<p>prepend增加的p元素</p>')
    })
    </script>
    <script type="text/javascript">
    $("#bt2").on('click', function() {
        //找到class="aaron2"的div节点
        //然后通过prependTo内部的首位置添加一个新的p节点
        $('<p>prependTo增加的p元素</p>')
            .prependTo($('.aaron2'))
    })
    </script>
</body>

(4)DOM外部插入insertAfter(卡塔尔(قطر‎与insertBefore(卡塔尔

与在那之中插入管理相近,jQuery由于内容指标的职位差异,扩充了2个新的方式insertAfter与insertBefore

图片 16

  • .before(卡塔尔(قطر‎和.insertBefore(卡塔尔国落成均等的效应。重要的区分是语法——内容和目的的地点。 对于before(卡塔尔(英语:State of Qatar)接收表明式在函数后边,内容作为参数,而.insertBefore(卡塔尔正巧相反,内容在点子前边,它将被放在参数里成分的眼下
  • .after(卡塔尔和.insertAfter(卡塔尔实现均等的意义。主要的不等是语法——特别是(插入)内容和对象的职位。 对于after(卡塔尔(英语:State of Qatar)选拔表明式在函数的前头,参数是将要插入的内容。对于 .insertAfter(卡塔尔(قطر‎, 刚好反而,内容在方式后边,它将被放在参数里成分的后面
    before、after与insertBefore。insertAfter的不外乎指标与地点的分歧外,后边的不援助多参数处理
注意事项:
  • insertAfter将JQuery封装好的因素插入到钦赐成分的末端,假使成分后边有成分了,那将前面包车型客车成分后移,然后将JQuery对象插入;
  • insertBefore将JQuery封装好的元素插入到内定成分的先头,假诺成分前边有成分了,那将前方的成分前移,然后将JQuery对象插入;
<body>
    <h2>通过insertBefore与insertAfter添加元素</h2>
    <button id="bt1">点击通过jQuery的insertBefore添加元素</button>
    <button id="bt2">点击通过jQuery的insertAfter添加元素</button>
    <div class="aaron">
        <p class="test1">测试insertBefore,不支持多参数</p>
    </div>
    <div class="aaron">
        <p class="test2">测试insertAfter,不支持多参数</p>
    </div>
    <script type="text/javascript">
    $("#bt1").on('click', function() {
        //在test1元素前后插入集合中每个匹配的元素
        //不支持多参数
        $('<p style="color:red">测试insertBefore方法增加</p>', '<p style="color:red">多参数</p>').insertBefore($(".test1"))
    })
    </script>
    <script type="text/javascript">
    $("#bt2").on('click', function() {
        //在test2元素前后插入集合中每个匹配的元素
        //不支持多参数
        $('<p style="color:red">测试insertAfter方法增加</p>', '<p style="color:red">多参数</p>').insertAfter($(".test2"))
    })
    </script>
</body>

其三章 DOM节点删除

(1)empty(卡塔尔的着力用法

empty 从名称想到所包蕴的意义,清空方法,可是与删除又有一些不意气风发致,因为它只移除了 钦定成分中的全数子节点。本条主意不仅移除子元素(和别的后代成分),同样移除成分里的文书。因为成分里其余文本字符串都被视作是该因素的子节点。

请看上边的HTML:

<div class="hello"><p>慕课网</p></div>
//通过empty处理
$('.hello').empty()

假诺大家通过empty方法移除里面div的富有因素,它会清空内部的html代码,自己的div成分未有被删去。

//结果:<p>慕课网</p>被移除
<div class="hello"></div>

(2)remove(卡塔尔国的有参用法和无参用法

remove与empty相近,都以移除成分的方法,不过remove会将元素本身移除,同期也会移除成分内部的100%,包蕴绑定的轩然大波及与该因素相关的jQuery数据。

譬喻风流潇洒段节点,绑定点击事件

<div class="hello"><p>慕课网</p></div>
$('.hello').on("click",fn)

经过remove方法移除div及其内部有着因素,remove内部会自动操作事件销毁方法,所以利用起来特别轻松

//通过remove处理
$('.hello').remove()
//结果:<div class="hello"><p>慕课网</p></div> 全部被移除
//节点不存在了,同时事件也会被销毁

为了以免万豆蔻梢头"内部存款和储蓄器泄漏",前端开采者必必要小心,绑了轻微事件,不用的时候势必要记得销毁

remove表明式参数:

remove比empty好用的地点正是能够传递叁个选择器表明式用来过滤将被移除的相配成分集结,能够采取性的删除钦定的节点

<body>
    <h2>通过jQuery remove方法移除元素</h2>
    <div class="test1">
        <p>p元素1</p>
        <p>p元素2</p>
    </div>
    <div class="test2">
        <p>p元素3</p>
        <p>p元素4</p>
    </div>
    <button>通过点击jQuery的empty移除元素</button>
    <button>通过点击jQuery的empty移除指定元素</button>
    <script type="text/javascript">
    $("button:first").on('click', function() {
        //删除整个 class=test1的div节点
        $(".test1").remove()
    })

    $("button:last").on('click', function() {
        //找到所有p元素中,包含了3的元素
        //这个也是一个过滤器的处理
        $("p").remove(":contains('3')")
    })
    </script>
</body>

大家也足以通过相同于那样处理
$("p").filter(":contains('3')").remove()

(3)empty和remove区别

要用到移除钦命成分的时候,jQuery提供了empty(卡塔尔与remove([expr]卡塔尔国三个法子,八个都是去除成分,可是相互照旧有分别

1. empty方法
  • 无情地讲,empty(卡塔尔国方法并不是剔除节点,而是清空节点,它能清空成分中的全体后代节点
  • empty不能去除自身笔者那几个节点
2. remove方法
  • 该节点与该节点所包涵的享有后代节点将同时被剔除
  • 提供传递一个筛选的表达式,删除钦赐合集中的成分

(4)保留数据的删除操作detach(卡塔尔(英语:State of Qatar)

倘诺大家愿意有时删除页面上的节点,不过又不愿意节点上的数额与事件不见,而且能在下二个小时段让这一个删除的节点显示到页面,这个时候就能够使用detach方法来管理

detach从字面上就比较轻易通晓。让叁个web成分托管。即从脚下页面中移除该因素,但保留这么些成分的内部存款和储蓄器模型对象。

jquery官方文书档案的阐述:
  • 这一个方法不会把相称的成分从jQuery对象中删去,由此能够在未来再利用那一个匹配的成分。与remove(卡塔尔分化的是,全数绑定的事件、附加的数码等都会保留下来。
  • $("div"卡塔尔.detach(卡塔尔这一句会移除对象,仅仅是呈现效果未有了。可是内部存储器中依旧存在的。当你append之后,又重新归来了文书档案流中。就又呈现出来了。

自然这里要特别注意,detach方法是JQuery特有的,所以它必须要管理通过JQuery的措施绑定的事件仍旧数额

<body>
    <p>P元素1,默认给绑定一个点击事件</p>
    <p>P元素2,默认给绑定一个点击事件</p>
    <button id="bt1">点击删除 p 元素</button>
    <button id="bt2">点击移动 p 元素</button>
    <script type="text/javascript">
    $('p').click(function(e) {
        alert(e.target.innerHTML)
    })
    var p;
    $("#bt1").click(function() {
        if (!$("p").length) return; //去重
        //通过detach方法删除元素
        //只是页面不可见,但是这个节点还是保存在内存中
        //数据与事件都不会丢失
        p = $("p").detach()
    });

    $("#bt2").click(function() {
        //把p元素在添加到页面中
        //事件还是存在
        $("body").append(p);
    });
    </script>
</body>

(5)detach()和remove()区别

图片 17

1. remove:移除节点
  • 无参数,移除本人整个节点以至该节点的里边的装有节点,满含节点上事件与数量
  • 有参数,移除筛选出的节点以至该节点的里边的具有节点,包罗节点上事件与数据
2. detach:移除节点
  • 移除的管理与remove生龙活虎致
  • 与remove(卡塔尔国分歧的是,全体绑定的事件、附加的多寡等都会保留下去
<body>
    <h3>给页面2个p元素节点绑定点击事件,点击后弹出自己本身的节点内容</h3>
    <p>元素p1,同时绑定点击事件</p>
    <p>元素p2,同时绑定点击事件</p>
    <h3>通过点击2个按钮后观察方法处理的区别</h3>
    <button>点击通过remove处理元素p1</button>
    <button>点击通过detach处理元素p2</button>
</body>
<script type="text/javascript">
    //给页面上2个p元素都绑定时间
    $('p').click(function(e) {
        alert(e.target.innerHTML)
    })

    $("button:first").click(function() {
        var p = $("p:first").remove();
        p.css('color','red').text('p1通过remove处理后,点击该元素,事件丢失')
        $("body").append(p);
    });

    $("button:last").click(function() {
        var p = $("p:first").detach();
        p.css('color','blue').text('p2通过detach处理后,点击该元素事件存在')
        $("body").append(p);
    });
</script>

来源1:慕课网_jQuery基础(一)—样式篇
来源2:慕课网_jQuery基础(二)—DOM篇

本文由澳门新浦京娱乐场网站发布于服务器,转载请注明出处:树状菜单_javascript技巧_脚本之家,菜单固定