java基础--jQuery

1、jQuery介绍(www.jquery.org)

     jQuery是一个js框架(.js文件),它使用选择器查找要操作的节点，并且将查找到的节点封装成一个jQuery对象，然后调用jQuery对象的属性或者方法来实现对底层节点的操作。这样做的目的是：解决浏览器的兼容性问题，另外，代码会得到简化。

2、一个简单的例子

     jQuery编程的步骤:

     第一步，使用选择器找到要操作的dom对象,该dom对象会被封装成jQuery对象。

     第二步，通过调用jQuery对象的方法或者属性来操作底层被封装的dom对象。

=============================================

//prototype的使用

<scripttype="text/javascript" src="js/prototype-1.6.0.3.js"></script>

<scripttype="text/javascript">

         functionf1(){

         varobj = $('d1');

         obj.innerHTML='hello java';

         }

<div id="d1"οnclick="f1();">Click me1</div>

 

//jQuery的$函数会覆盖prototype的$函数

<scripttype="text/javascript" src="js/prototype-1.6.0.3.js"></script>

<scripttype="text/javascript" src="js/jquery-1.4.3.js"></script>

function f1(){ 

         var$obj = $('#d1');

         $obj.html('hellojava');

     }

<div id="d1"οnclick="f1();">Click me1</div>

========================================================    

3、dom对象与jQuery对象之间的转换

     (1)dom对象 --- > jQuery对象

         $(dom对象)

     (2)jQuery对象 ---> dom对象

         $obj.get(0)或者$obj.get()[0]

4、同时使用prototype和jQuery

     使用jQuery.noConflict()将 $函数改名。

    

5、jQuery选择器  

     (1)什么是jQuery选择器

         借鉴了css选择器的语法，作用是查找要操作的节点(dom对象)。

     (2)选择器的使用

         1)基本选择器  selector/s1.html

              #id

              .class

              element

              selector1,select2..selectn

              *

         2)层次选择器 selector/s2.html

              select1select2

              select1>select2

              select1+select2

              select1~select2

         3)过滤选择器

              <1>基本过滤选择器  selector /s3.html

                   :first

                   :last

                   :not(selector)

                   :even

                   :odd

                   :eq(index)

                   :gt(index)

                   :lt(index)

              <2>内容过滤选择器 selector/ s4.html

                   :contains(text)匹配包含给定文本的元素

                   :empty匹配所有不包含子元素或者文本的空元素

                   :has(selector)匹配含有选择器所匹配的元素的元素

                   :parent匹配含有子元素或者文本的元素

              <3>可见性过滤选择器 selector/s5.html

                   :hidden匹配所有不可见元素，或者type为hidden的元素

                   :visible匹配所有的可见元素

              <4>属性过滤选择器  selector / s6.html

                   [attribute]

                   [attribute=value]

                   [attribute!=value]

              <5>子元素过滤选择器 selector / s7.html              

                   :nth-child(index/even/odd)    //index下标从1开始

              <6>表单对象属性过滤选择器

                   :enabled

                   :disabled

                   :checked

                   :selected

         4)、表单选择器

              :input

              :text

              :pasword

              :radio

              :checkbox

              :submit

              :image

              :reset

              :button

              :file

              :hidden

6、dom操作

         1)查询  dom / d1.html

              通过选择器，找到某个节点之后，可以查询节点的html内容、文本内容、值以及属性。

              html():html内容   相当于innerHTML属性

              text():文本内容    相当于innerText属性

              val():值  相当于value属性

              attr(属性名):读取某个属性的值

              除此之外，这四个方法还可以设置对应的值。

         2)创建  dom / d2.html

              $(html内容);

         3)插入节点

              append():向每个匹配的元素内部追加内容

              prepend():向每个匹配的元素内部前置内容

              after():在每个匹配的元素之后插入内容

              before():在每个匹配的元素之前插入内容

         4)删除节点 dom / d3.html

              remove():删除

              remove(selector)

              empty():清空节点

         5)如何将js代码与html分开 dom/d4.html,d5.html

             6)复制节点  dom / d6.html

              clone()

              clone(true):使复制的节点也具有行为(将事件处理代码一块复制)

         7)属性操作

              读取：attr('');

              设置：   attr('','') 或者一次

              设置多个 attr({"":"","":""});

              比如   $obj.attr({'id':'d1','class':'s1'});

              删除：removeAttr('')

         8)样式操作 dom / d7.html

              获取和设置: attr("class","")或者attr('style':'');

              追加:addClass('')

              移除:removeClass('')

              或者removeClass('s1s2')

              或者removeClass()//会删除所有样式

              切换样式：toggleClass,有该样式，就删除，没有，就添加。

              是否有某个样式 hasClass('')

              读取css('')

              设置css('','')或者css({'':'','':''})//设置多个样式

         9)遍历节点(可添加选择器)

              children()/chidren(selector):只考虑子元素，不考虑其它后代元素。

              next()/next(selector):下一个兄弟

              prev()/prev(selector):上一个兄弟

              siblings()/siblings(selector):其他兄弟

              find(selector):从当前节点开始查找所有的后代(满足selector)

              parent():父节点

一、事件处理

     1、事件绑订 event / e1.html

         bind(type,fn)

     2、绑订方式的简写形式

         click(function(){

         });

     3、合成事件  event/ e2.html e3.html

         hover(enter,leave): 模拟光标悬停事件

         toggle(fn1,fn2...)：模拟鼠标连续单击事件

     4、事件冒泡 even / e4.html, e5.html

         (1)什么是事件冒泡:

              子节点产生的事件会依次向上抛给父节点

         (2)获得事件对象  event / e6.html

              只需要给事件处理函数添加一个任意变量即可，比如e。

              e不是真正的事件对象，而是对底层的事件对象的一个封装。

              click(function(e){

              });

         (3)停止冒泡  event / e7.html

              event.stopPropagation()

         (4)停止默认行为 event / e8.html

              event.preventDefault()

     5、事件对象的属性 event / e9.html

              event.type:事件类型

              event.target:返回事件源（是dom对象!!!）

              event.pageX/pageY: 点击坐标

     6、模拟操作  event / e10.html

二、动画

     1、show() /hide(): animate / a1.html

         作用:通过同时改变元素的宽度和高度来实现显示和隐藏

         用法:

              show(速度,[回调函数]);

              速度可以使用"normal","fast","slow"，也可以使用毫秒数。回调函数会在整个动画执行完毕之后执行。

     2、slideUp() slideDown() animate / a1.html

         作用：通过改变元素的高度来实现显示和隐藏

         用法同上。            

     3、fadeIn()fadeOut() animate / a2.html

         作用：通过改变元素的不透明度来实现显示和隐藏

         用法同上。

     4、自定义动画

         animate(params,speed,[callback])  animate /a3.html

              params:是一个javascript对象，描述的是动画执行结束时的样式。

              speed:速度，单位是毫秒。

              callback:回调函数，会在动画执行完毕之后执行。

        

三、类数组的操作

         类数组：指的是jQuery选择器会将查找到的所有的dom对象封装成一个jQuery对象，将这些dom对象称为类数组。

         1)length属性：获得jQuery对象包含的dom对象的个数。   

         2)each(fn(i)):  array / a1.html

              循环遍历每一个元素,this代表被迭代的dom对象，$(this)代表被迭代的jquery对象。

         3)eq(index)：返回index+1位置处的jquery对象

         4)index(obj)：返回下标，其中obj可以是dom对象或者jquery对象。

         5)get()：返回dom对象组成的数组

         6)get(index)：返回index+1个dom对象。

jquery对ajax的支持

     1、三个方法

     (1)load方法

         作用：将服务器返回的数据直接添加到符合要求的

         dom对象上，相当于 obj.innerHTML = 服务器返回的数据。

         用法:

              $obj.load(url,[请求参数]);

              url:请求地址

              请求参数:

                   第一种形式：请求字符串，比如: 'username=zs&age=22'

                   第二种形式：对象,比如 {'username':'zs','age':22}

              注意：

                   a,load方法如果没有参数，会使用get方式发请求。如果有参数，会使用post方式发请求。

                   b,如果有中文参数值，load方法已经帮我们做了编码处理。

     (2)$.get方法

         作用：向服务器发送get请求

         用法:

              $.get(url,[data],[callback],[type]):

              url:请求地址

              data:请求参数，形式同上。

              callback:回调函数，可以通过该函数来处理服务器返回的数据。

                   callback格式：function(data,statusText)，其中，data可以获得服务器返回的数据,statusText是一个简单的字符串，描述服务器处理的状态。

              type:服务器返回的数据类型，类型可以是:

                   html: 返回的是html内容。

                   text:返回的是text。

                   json:返回的是json字符串

                   xml:返回的是dom兼容的xml对象

                   script:返回的javascript

     $.post()格式同上。

    

         练习：使用$.get或者$.post方法完成“商品热卖”。

        

     (3)$.ajax(options):options是一个形如

     {key1:value1,key2,value2...}的js对象，用于指定发送请求的选项。

     选项参数如下：

     url(string):请求地址

     type(string):GET/POST

     data(object/string):发送到服务器的数据

     dataType(string):预期服务器返回的数据类型

     success(function):请求成功后调用的回调函数，有两个参数：

         function(data,textStatus),其中，data是服务器返回的数据,textStatus 描述状态的字符串。

     error(function):请求失败时调用的函数，有三个参数

         function(xhr,textStatus,errorThrown),其中xhr是底层的ajax对象(XMLHttpRequest),textStatus,errorThrown这两个参数其中的一个可以获得底层的异常描述。

     async:true(缺省)/false:当值为false时，发送同步请求。

    

     2、两个辅助性的方法

         1)serialize():

              将jquery对象包含的表单或者表单控件转换成查询字符串。

         2)serializeArray()：转换为一个数组，每个数组元素形如{name:fieldName,value:fieldVal}的对象。序列化元素的作用，主要是用于ajax请求中，给data赋值。