day14—JQuery编程基础

JQuery

1、什么是jQuery

jQuery是一个优秀的JavaScript框架。一个轻量级的JavaScript类库。jQuery的核心理念是Write less。Do more。

使用jQuery能够兼容各种浏览器，方便的处理HTML、Events、动画效果等，而且方便的为站点提供AJAX交互。

jQuery公布于2006年，一经提出就吸引非常多人參与到丰富这个类库的开发之中。jQuery写法的简单性、易用性大

大提升了人们对它的使用。而且完备的文档说明也是其易用的一个体现。使用jQuery时能够做到HTML页面代码和控

制的分离。彻底的将控制代码放入一个单独的文件。

jQuery的版本号已经从1.x到了2.x。可是从2.x開始将不再支持IE6,7,8。文件的下载能够去jquery.com下载。

2、JQuery操作：利用选择器定位节点

jQuery操作的第一步一定是要先找到这个对象，也就是定位节点。这要借助于其强大的选择器。

为了定位一个id属性为d1的div节点，使用的选择器写法如$(“div”)或$(“#d1”),这都是定位的一种写法，这个$符号

就是jQuery中最主要的符号。搭配上不同的选择器最后就会成为包装后的jQuery对象。

jQuery解决这个问题的第二步就是调用类库中提供的方法。比方，为了改动div中文本的字体大小，在成功定位以后

通过css方法就能够实现。

典型的jQuery编程方式就是分这两步。定位后调用。

定位能够创建jQuery对象，调用方法会对jQuery对象施加动作。

3、JQuery对象和DOM对象能够互相转化:



DOM对象 -> jQuery对象

DOM对象向jQuery对象的转变非常easy，外面追加$和圆括号就可以。

function f( ){
    var obj = document.getElementById(‘d1’);
    //DOM -> jQuery对象
    var $obj = $(obj);
   //能够调用JQuery方法了
    $obj.html(‘hello jQuery’);
}

jQuery对象 -> DOM对象

jQuery对象向DOM对象转化，通过调用get方法加參数值0就可以

function f( ){
    var $obj = $(‘#d1’);
    //jQuery对象 -> DOM
    var  obj = $(obj).get (0);
    //能够调用DOM方法了
    obj.innerHTML = ‘hello jQuery’;
}

4、jQuery选择器

jQuery选择器是一种类似CSS选择器的特殊说明符号，可以帮助jQuery定位到要操作的元素上，使用了选择器可

以帮助HTML实现内容与行为的分离。仅仅须要在元素上加上id属性。

jQuery的选择器提供了非常多种形式，依照定位的不同特点，将其分类例如以下：

        1.基本选择器

        2.层级选择器

        3.过滤选择器

        4.表单选择器



基本选择器#id: id选择器



#id

利用id属性的唯一性进行定位，这是最快的定位方式。尽量使用Id选择器。

    

function f1(){
        $('#d1').css('font-size','60px');
    }    

 	<div id="d1">hello jQuery</div>
        <div class="s1">hello prototype</div>
        <p class="s1">hello dojo</p>
        <a href="javascript:;"     onclick="f1();">ClickMe</a>

基本选择器.class：类选择器



.class

依据节点的class属性进行定位。

function f2(){
        $('.s1').css('font-size','60px');
    }

 	 <div id="d1">hello jQuery</div>
        <div class="s1">hello prototype</div>
        <p class="s1">hello dojo</p>
        <a href="javascript:;"     onclick="f2();">ClickMe</a>

基本选择器element：元素选择器



根据HTML标记进行区分。满足条件的标记都会被返回。

function f3(){
        $('div').css('font-size','60px');
    }    

  	 <div id="d1">hello jQuery</div>
        <div class="s1">hello prototype</div>
        <p class="s1">hello dojo</p>
        <a href="javascript:;" onclick="f3();">ClickMe</a>   

合成选择器：



合成选择器，即所有选择器的合集作为定位的所有元素。

function f4(){
        $('#d1,p').css('font-size','60px'); //寻找ID为d1的<div>和他的子节点<p>标签
    }    					

 	 <div id="d1">hello jQuery</div>
        <div class="s1">hello prototype</div>
        <p class="s1">hello dojo</p>
        <a href="javascript:;" onclick="f4();">ClickMe</a>

层次选择器： select1 空格 select2



依据select1找到节点后，再去查找子节点中符合select2选择器的节点。这样的写法非常重要，非经常常使用。

function f1(){
        $('#d1 div').css('font-size','80px');  //查找ID为d1的div下的<div>
    }
<div id="d1">
            <div id="d2">hello java</div>
            <div id="d3">
                <div id="d4" style="font-size:40px;">hello c</div>
            </div>
            <div id="d5">hello red</div>
            <p>hello perl</p>
        </div>
        <a href="javascript:;" onclick="f1();">ClickMe</a>

层次选择器： select1 > select2



仅仅查找直接子节点，不查找间接子节点。

 function f2(){
        $('#d1>div').css('font-size','80px');    //查找ID为d1的<div>下的子节点<div>，再下一层则不查找
    }
<div id="d1">
            <div id="d2">hello java</div>
            <div id="d3">
                <div id="d4" style="font-size:40px;">hello c</div>
            </div>
            <div id="d5">hello red</div>
            <p>hello perl</p>
        </div>
        <a href="javascript:;" onclick="f2();">ClickMe</a>

层次选择器： select1 + select2



+号表示下一个兄弟节点

function f3(){
        $('#d3+p').css('font-size','80px');    //查找ID为d3的<div>的下一个兄弟节点<p>
    }						//假设d3的下一个兄弟节点不是<p>则无效
<div id="d1">
            <div id="d2">hello java</div>
            <div id="d3">
                <div id="d4" style="font-size:40px;">hello c</div>
            </div>
            <div id="d5">hello red</div>
            <p>hello perl</p>
        </div>
        <a href="javascript:;" onclick="f3();">ClickMe</a>

层次选择器： select1 ~ select2

“~”代表以下的全部兄弟节点。

function f4(){
        $('#d2~div').css('font-size','80px');  //查找ID为d2的<div>顺序之下的所有兄弟节点（同级别）
    }
<div id="d1">
            <div id="d2">hello java</div>
            <div id="d3">
                <div id="d4" style="font-size:40px;">hello c</div>
            </div>
            <div id="d5">hello red</div>
            <p>hello perl</p>
        </div>
        <a href="javascript:;" onclick="f4();">ClickMe</a>

过滤选择器—基本过滤选择器







过滤选择器—内容过滤选择器

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">



可见性过滤选择器:



依据元素在页面中的可见属性进行过滤，主要是对hidden属性和visible属性的推断。

 function f1(){
	 //"slow" "normal" "fast" 是固定速度
        $('div:hidden').show("slow");
    }
    //也能够用详细数值来控制速度
    function f2(){
        $('div:visible').hide(800);
    }
 	<div>hello jQuery</div>
        <div style="display:none;">hello java</div>
        <a href="javascript:;" onclick="f1();">ClickMe1</a>
        <a href="javascript:;" onclick="f2();">ClickMe2</a>

属性过滤选择器：



属性过滤器会对标记的属性进行推断，符合条件的元素会作为返回的对象

function f1(){
        $('div[id]').css('font-size','80px');
    }
function f2(){
        $('div[id=d2]').css('font-size','80px');
    }
function f3(){
        $('div[id!=d2]').css('font-size','80px');
    }

子元素过滤选择器：



子元素过滤选择器会依据子元素的位置的数值来进行筛选。格式为 ：nth-child（index/even/odd）。

function f1(){
        $('ul li:eq(1)').css('font-size','60px');
    }
function f2(){
        $('ul li:nth-child(even)').css('font-size','60px');
    }
//Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词

表单选择器：



表单选择器是依据表单元素特有的元素名进行定位的一种方式，所以这些选择器包含

使用的规则和以上各选择器一致。

$(“:input”)就会返回全部的input输入框。大多数情况下，表单选择器会和其它选

择器进行配合来定位元素。

5、jQuery操作DOM-查询：



html（）

读取或改动节点的HTML内容的操作方式。与DOM对象的innerHTML的作用一致。



text（）

读取或改动节点中的文本内容。会过滤掉标记内容，与innerText的作用基本一致，但innerText在不同浏览器中写法不同。在jQuery中则



使用text（）方法就可以。



val（）

读取或改动节点的value属性值。也就是针对表单元素中有value属性的哪些元素的操作。

attr（）

读取或设置改动节点的属性。这种方法会更宽泛一些，能够改动元素的不论什么属性。



6、jQuery操作DOM-创建：



创建DOM节点的语法：

使用$符号将HTML标记的字符串文本括起来。即创建了DOM节点，如$（html）。

大多数时候创建后的节点须要放入文档中，使用到兴许的一些方法能够实现节点的插入

简写形式如 $(‘body’).append(‘<div>…</div>”)



7、jQuery操作DOM-插入：



插入DOM节点的方法

append方法会将DOM节点作为最后一个孩子节点加入进来

prepend方法将DOM节点作为第一个孩子节点加入进来

after方法将DOM节点作为下一个兄弟节点加入进来

before方法将DOM节点作为上一个兄弟节点加入进来



8、jQuery操作DOM-删除：



删除DOM节点的方法

remove（）能够移除DOM

remove（selector）能够按选择器定位后删除

empty（）清空节点



jQuery操作DOM-样式操作:



改动对象样式的方法例如以下

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">