Jquery基础总结

1、jQuery

(1)   jQuary的特点?

        jQuary使用选择器(借鉴了css中的选择器语法)查找节点,并且将节点封装成jQuary对象。这样做的目的是,为了兼容不同的浏览器之间的差异;另外,也会简化代码。

(2) jQuary编程的步骤?

        step1, 使用选择器查找节点

        step2, 调用jQuary对象提供的属性或者方法对节点(原始的DOM节点)进行相应的操作

(3) jQuery对象与DOM对象的转换

        ajQuery对象 ---> DOM对象

               var obj = $obj.get(0)

               var obj = $obj.get()[0]

        bDOM对象 ---> jQuery对象  

               var $obj = $(obj)

2、选择器

1) 基本选择器

        #id:依据id查找

        .class:根据节点的class属性查找

        element:依据标记的名称查找

        select1,select2,...selectn:将多个选择器查找的结果进行进行合并

        :返回所有的节点

2) 层次选择器

        select1 select2 '#id div')查找#id的后代子孙中满足是div的节点

        select1>select2  只查找儿子一代符合条件的

        select1+select2  下面的所有的兄弟中第一个紧挨着的

        select1~select2 下面的所有的兄弟中满足条件的

3) 过滤选择器

        (1) 基本过滤选择器

        :first 第一行(table tr:first)

        :last 最后一行

        :not 排除在外(table tr:not(#tt))

        :even 奇数行

        :odd 偶数行

        :eq(index) 等于下标为index的行

        :gt(index)

        :lt(index)

        (2) 内容过滤选择器

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

        :empty() 匹配标签内部为空的元素<div></div>

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

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

        (3) 可见性过滤选择器

        :hidden 匹配所有不可见的元素

        :visiable 匹配所有可见的元素

        (4) 属性过滤选择器

        [attribute] 匹配包含给定属性的元素。注意,在jQuery 1.3中,

                        前导的@符号已经被废除!如果想要兼容最新版本,

                        只需要简单去掉@符号即可。

                         div[id]

        [attribute=value] 匹配给定的属性是某个特定值的元素

        [attribute!=value]

        [attribute^=value] 匹配给定的属性是以某些值开始的元素

        [attribute$=value]

        [attribute*=value] 匹配给定的属性是以包含某些值的元素

        [selector1][selector2][selectorN] 复合属性选择器,需要同时满足多个条件时使用。

        (5) 子元素过滤选择器

        :nth-child(index/even/odd/equation)

              匹配其父元素下的第N个子或奇偶元素':eq(index)' 只匹配一个元素,而这个将为每一个父元素匹配子元素。

              :nth-child1开始的,而:eq()是从0算起的!

 

               可以使用:

               :nth-child(even)

               :nth-child(odd)

               :nth-child(3n)

               :nth-child(2)

               :nth-child(3n+1)

               :nth-child(3n+2)

 

        :first-child

        :last-child

        :only-child

        (6) 表单对象属性选择器

        :enabled

        :disabled

        :checked

        :selected

4) 表单选择器

:input

:text

:password

:radio

:checkbox

:submit

:image

:reset

:button

:file

3、DOM处理

jQueryDOM操作与浏览器无关

1)查询

        利用jQuery提供的选择器可以利用jQuery对象提供的方法来获得

        或者设置节点的属性值,文本,html内容

        a) 获得或者设置节点的html内容:html();

        b) 获得或者设置节点的文本:text();

        c) 获得或者设置节点的值: val();

        d) 获得或者设置节点的属性值: attr();

               attr('id') 获得

               attr('class','c1') 设置

               attr({'style':'color:red;','class':'c1'}) 以传对象的形式同时设置多个属性

2)创建

        $(html)

        var $obj = $('<div>dddddddd</div>')

3)插入节点

        append(obj) obj节点追加到调用此方法的节点的所有子节点的最后面(父子)

        prepend(obj) obj节点追加到调用此方法的节点的所有子节点的最前面(父子)

        after(obj) obj节点追加到调用此方法的节点的后面(兄弟)

        before(obj) obj节点追加到调用此方法的节点的前面(兄弟)

               此外简写可以将创建的内容直接放到括号内

               $('div').append('<span>ddd</span>')

 

4)删除节点

        remove() 删除节点

        remove(selector)  $('ul li').remove('#i2')

        empty() 将节点的内容去掉

5)复制

        clone()

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

       

        $(function() {

               //当整个页面解析完成,相应的dom树已经生成,会执行这儿的代码

               $('#b1').click(function() {

                      $('d1').html("hello,jQuert");

               });

       

       

        });

        为了将数据与行为分离,使用$(function(){})

        $(function(){

               $('ul li:eq(2)').click(function(){

                      alert('hello');

               });

               $('#b1').click(function() {

                      var $obj = $('ul li:eq(2)').clone(true);//这里加上参数,将上面的事件处理代码一块复制

                      $('ul').append($obj);

               });

        });

6)样式操作

        获取和设置:attr('','');

        追加样式:addClass(''); == <div class="s1 s2"></div>

        去掉样式:removeClass('s1');

        或者remove('s1 s2')

        或者remove();//移出全部

        样式切换:toggleClass('s2') 有该样式就删除,没有就添加

        是否有某个样式:hasClass('s1');

        读取css('')设置css('','')或者css({'':"","":""})

7)遍历节点

        children()/chlidren(selector);只考虑子元素,不考虑其他后代元素

        next()/next(selector);兄弟

        prev()/prev(selector);

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

        find(selector) //寻找调用此方法的元素的满足selector的所有的子孙后代

8)模拟操作

        trigger('click')

        click

        doubleClick

       

        <table width="40%">

               <thead>

<tr><td>选择</td><td>姓名</td><td>工资</td><td>年龄</td><tr>

               <thead>

               <tbody>

                      <tr><td><input type="radio" name="ck" value="1"></td>

                             <td>张三</td><td>5000</td><td>20</td><tr>

                      <tr><td><input type="radio" name="ck" value="2"></td>

                             <td>李四</td><td>6000</td><td>23</td><tr>

                      <tr><td><input type="radio" name="ck" value="3"></td>

                             <td>王五</td><td>7000</td><td>21</td><tr>

                      <tr><td><input type="radio" name="ck" value="4"></td>

                             <td>赵六</td><td>8000</td><td>22</td><tr>

               </tbody>

        </table>

4、事件处理

1)事件绑定

        bind(type,fn)

2)绑定方式的简写

        click(function(){});

3)合成事件

        hover(enter,leave) 模拟鼠标悬停时间

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

4)事件冒泡

        (1) 获得事件对象

               $(function(event) {

                      var obj = event.target;//event事件对象转化成js对象,不用考虑浏览器的兼容,此时

                      的事件对象obj并不是底层的,而是jQuery封装的

               })

        (2) 停止冒泡

               event.stopPropagation()

        (3) 停止默认行为

               <a href="del.do" onclick="return false;">

               event.preventDefault();

5) 事件对象属性

        event.type 事件的类型

        event.target 返回dom类型的节点

6) 模拟操作

5、动画

1) show hide

        作用:显示或者隐藏某个节点,通过同时改变节点的宽度和高度

        show("slow"/"normal"/"fast"/number毫秒)

        show(time,[fn])//fn会在动画执行完以后再执行

2) fadeIn() fadeOut() 改变不透明度

3) slideUp() slideDown()

        作用:显示或者隐藏某个节点,通过改变高度

4) 自定义动画animate(params,speed,callback)

        用法:

               params:是一个js对象,描述了动画执行完毕之后节点的样式

               speed:动画执行的速度

               callback:是一个函数,在动画执行完毕之后执行

6、类数组

1) each(fn(i))循环遍历每一个元素

        this代表被迭代的dom元素。

        $(this)代表被迭代的jQuery元素。

       

        $obj = ('ur li')//被封装成一个jQuery对象的多个dom对象

        $obj.each(function(){

               alert($(this).html());

        })

        $obj.each(function(i){//i表示正在被遍历的元素的下标/0 1 2

               alert(i);

        })

2) eq(index) 返回index+1位置处的的jQuery对象。

        var $obj2 = $obj.eq(1);//取出类数组的第二个元素

3) index(obj) 返回下标,obj可以是dom对象也可以是jQuery对象

      var index = $obj.index($obj2);

 4) length:个数

 5) get():返回dom对象数组

 6) get(index):返回index+1位置处的dom对象

7、jQueryajax的支持

1) load(url,[data]) 将服务器返回的数据直接插入到符合要求的节点之上。

        url:服务器端的某个组件的地址

        data:请求参数,请求参数的格式

               第一种形式:"username=zs&age=22";//请求字符串

               第二种形式:{'username':'zs','age':22}

        采用get方式发送请求

2) $.get(url,[data],[callback],[type]) 其中,

        callback格式:

               function(data,statusText),其中data表示服务器返回的数据,statusText表示

               服务器返回数据的状态。

        type:服务器返回的数据的格式:

               text:普通文本

               html:html内容

               json:json字符串

               xml:xml文档

               script:javascript脚本

               $.get('carInfo.do','{'carName':$(this).val()},function(data){

                      //data:服务器返回的数据

                      //如果服务器返回的是json字符串,会自动转换成js对象

                      $(this).after()           

               }.'json');

    $.post()格式同上

3) $.ajax(options):options是一个形如{key1value,key2value2}

选项参数如下:

url(string):请求地址

type(string):GRT/POST

data(object/string):发送到服务器的数据(这儿可以使用字符串的方式或者对象的方式)

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

               text:普通文本

               html:html内容

               json:json字符串

               xml:xml文档

               script:javascript脚本

success(function):请求成功以后调用的回调函数

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

       function(XmlHttpRequest,textStatus,errorThrown)
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值