JavaScript入门(五)——jQuery库

澳门新葡亰网址 1

一、前言

简单的描述一下,实习几个原理,思想,其实写很多东西,思想算是最重要的。

1、目标:将写一个无限节点的树形目录结构,如下图

澳门新葡亰网址 1

jQuery

JS最广泛使用的库,80%-90%以上的网站使用。jQuery的理念:Write Less, Do
More。

优点:

  • 消除浏览器差异:你不需要自己写冗长的代码来针对不同的浏览器来绑定事件,编写AJAX等代码;
  • 简洁的操作DOM的方法:写$(‘#test’)肯定比document.getElementById(‘test’)来得简洁;
  • 轻松实现动画、修改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)两个版本。

步骤:

1、你的下载 插件  ztree。然后布置在你的项目中。

<script src="__PUBLIC__/js/jquery-1.4.4.min.js"></script> 
<script src="__PUBLIC__/js/jquery.ztree.core-3.5.js"></script>

2、相关CSS

<link rel="stylesheet" href="__PUBLIC__/css/zTreeStyle/zTreeStyle.css" type="text/css"> 
<link rel="stylesheet" href="__PUBLIC__/css/zTree.css" type="text/css">

以上CSS 和JS 以你自己的为准。

3、目录结构DIV

<div class="content_wrap"  style="background:#666;"> 
    <div class="zTreeDemoBackground left"> 
        <ul id="treeDemo" class="ztree"></ul> 
    </div> 
</div> 
<div class="content-text" id="text"></div>

4、自己单独js中的代码

<SCRIPT  src="__PUBLIC__/js/ztreeonload.js"></SCRIPT>

里面写的相关功能及配置!

//配置项 
var setting = { 
     isSimpleData : true,              //数据是否采用简单 Array 格式,默认false  性   
     showLine : true,                  //是否显示节点间的连线   
     checkable : true,    
     callback: { 
         onClick: zTreeOnClick       
     } 
 }; 

 var zNodes;//数据变量 

 //ajax提交数据,请求后台PHP处理返回出目录结构json数据 
 $.ajax({ 
     url:"/admin.php/Ztree", 
     type: "get", 
     async: false, 
     dataType:"json",   
     success: function (data) { 
             //alert(data); 
             zNodes=data;    //将请求返回的数据存起来 
              //alert(zNodes); 
     }, 
     error: function (){//请求失败处理函数   
         alert('请求失败');   
     },   
 }) 

 //初始化ztree目录结构视图! 
 $(document).ready(function(){ 
     //alert("111"); 
     $.fn.zTree.init($("#treeDemo"), setting, zNodes); 
 });

5、后台PHP 递归算法,从数据库中查找目录结构并且生成 JSON数据

地址:如4中,AJAX所请求的
【/admin.php/Ztree】我这里是用的ThinkPHP框架,所以url是这个样子,以你自己的接口文件为准!

<?php 
            //父节点数组 
            $arr=array(); 
            $arr_str0 = array("name" =>'函数库查询','children'=>$this->SelectSon(1));       //父节点  Pid=1; 
            $arr_str1 = array("name" =>'数据库查询','children'=>$this->SelectSon(2));       //父节点  Pid=2; 

            array_push($arr, $arr_str0); 
            array_push($arr, $arr_str1);//这里是2个父节点。 

            echo(json_encode($arr)); //这是最后返回给页面,也就是返回给AJAX请求后所得的返回数据 JSON数据 
?> 

//这里仅仅是一个方法,一个调用SelectSon()方法,返回一个数组集合!但其中用的是递归! 
<?php 
        //查找子节点        Pid=父节点ID 
        private function SelectSon($Pid){ 

            $m=M('ztree'); 

            if(($info=$m->where("Pid='$Pid'")->select())) //查找该父ID下的子ID 
            { 
                $data=array(); 
                for ($i=0; $i < count($info) ; $i++)  
                {  
                    $da=array("name" =>$info[$i]['name'],'children'=>$this->SelectSon($info[$i]['id']));  //递归算法! 

                    array_push($data, $da);//加入子节点数组 
                }; 

                return $data;//一次性返回子节点数组,他们成为同级子节点。 
            } 
            else 
            { 
                return null; 
            } 

        } 
?>

注意:由于我是用的thinkphp框架。所以在方法调用上
有些不同,纯PHP文件中,思路应该是一样的,

首先是: 写一个数组。一个父节点的数组。

其次:  写一个方法,传递的参数是
父节点的ID,查询其子节点,在子节点中查询之后,用递归的方式继续查找子节点的子节点,直到最后查询完毕之后,返回数组给调用方法的父节点数组。然后再

echo(json_encode($arr));

转码成 JSON 将其输出,以便于AJAX异步访问,得到JSON数据。

得到之后,回到刚刚的JS功能代码中,直接初始化树目录结构,将其JSON数据传入OK。

使用jQuery

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

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

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

总结:

其主要思想分2步走。第一步,是如何能把目录生成出来。先测试时,可以用静态数据。类似于

var node=[ 
    {name:'父节点',children:[{name:'子节点',children:null},{name:'同级子节点',children:null}]} 
] 

先分析一下,这串数据,他有什么规律。你就会发现。其实很有规律。无限节点,其实就是每个json中,有children,而且 
还有同级子节点。

你先用固定数据 生成目录结构之后

你就可以开始考虑,动态的向node传目录结构的数据了。就是我们后面所谓的
AJAX请求 PHP得到JSON数据,

PHP处理中,我用的是递归算法,返回JSON数据。及完成了。目录结构。

哦对了。

$m=M('ztree');

这句代码是thinkphp 实例化 数据操作对象的。

用来查询数据库中,节点是否存在。就是存在子节点,就返回给子节点数组,有几个就加入子节点数组中,查询完了。然后一次性返回,他们就成了同级子节点了

$符号

$是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)...

选择器

这是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>

按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]

按tag查找

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

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

按class查找

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

按属性查找

节点往往有很多属性,根据属性查找可能更方便,比如在表单中。

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"都会命中!

组合查找

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

多项选择器

多项选择器就是把多个选择器用,组合起来一块选。

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')选择两次。

层级选择器

层级选择器(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');

子选择器(Child Selector)

类似于$('parent>child')。限定了层级关系必须是父子关系,<child>节点必须是<parent>节点的直属子节点。

过滤器(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>

表单相关

转为表单设计的选择器。

  • :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对象后,还可以以这个对象为基准,进行查找和过滤。

查找(find)

最常见的查找是在某个节点的所有子节点中查找,使用find()方法,它本身又接收一个任意的选择器。

如果要从当前节点开始向上查找,使用parent()方法。

对于位于同一层级的节点,可以通过next()和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>

过滤(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>

操作DOM

前面提高有的浏览器有innerText,有的不支持innerContent,现在有了jQuery,全部采用一样的操作API。

修改Text和HTML

jQuery的API设计非常巧妙,无参数调用text()和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对象的方法仍然不会报错!!!省去了大量的判断!!!

修改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()方法支持下面的写法。

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()方法将作用于DOM节点的style属性,具有最高优先级。如果要修改class属性,可以用jQuery提供的下列方法.

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

显示和隐藏DOM

要隐藏一个DOM,使用css()设置CSS的display属性为none。隐藏DOM节点并未改变DOM树的结构,它只影响DOM节点的显示。

要显示这个DOM需要先恢复原有的display属性,因此需要先记下来原有的display属性到底是block还是inline还是别的值。

强大的jQuery直接提供show()和hide()方法。我们不用关心它是如何保存之前的display属性的。

获取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’)或者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>

操作表单

对于表单元素,使用val()方法获取和设置对应的value属性。等价于前面的attr()和prop()。

修改DOM结构

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章

网站地图xml地图