写代码啦
浅谈 jQuery
回复数(0) 浏览数(20)
{{topic.upvote_count || 0}} 编辑 回复

在谈jQuery之前我们要清楚什么是jQuery,jQuery其实就是个JavaScript库(为什么是JavaScript库?我的理解是:因为使用js语言编写的库)
里面存储着可以对页面元素(HTML,head,body等)进行操作的api
那又是怎么怎么通过api对页面进行操作的呢?
下面从以下几个方面一一进行介绍

  1. jQuery 如何获取元素
  2. jQuery 的链式操作是怎样的
  3. jQuery 如何创建元素
  4. jQuery 如何移动元素
  5. jQuery 如何修改元素的属性

jQuery如何获取元素

使用jQuery的第一步,往往就是将一个选择表达式,放进构造函数jQuery()(简写为$),然后得到被选中的元素。
选择表达式可以是CSS选择器
格式:jQuery(选择器)
下面的$均指jQuery

$(document) //选择整个文档对象

$('#myId') //选择ID为myId的网页元素

$('div.myClass') // 选择class为myClass的div元素

$('input[name=first]') // 选择name属性等于first的input元素

也可以是jQuery特有的表达式

  $('a:first') //选择网页中第一个a元素

  $('tr:odd') //选择表格的奇数行

  $('#myForm :input') // 选择表单中的input元素

  $('div:visible') //选择可见的div元素

  $('div:gt(2)') // 选择所有的div元素,除了前三个

  $('div:animated') // 选择当前处于动画状态的div元素

## jQuery 的链式操作是怎样的

链式操作就是在选取某个元素后,对元素进行一系列操作,并且所有操作可以连接在一起,以链条的形式写出来,比如:

$(div).find('#test').addClass('red').addClass('green')

 分解开就是
     $(div) //找到div元素
     .find('#test')//找到id = test的div元素
     .addClass('red')//给id = test的元素添加class = red
     .addClass('green')//对上述元素继续添加class =  green

这是jQuery最令人称道、最方便的特点。它的原理在于每一步的jQuery操作,返回的都是一个jQuery对象,所以不同操作可以连在一起。
jQuery还提供了.end()方法,使得结果集可以后退一步
```
  $('div')

   .find('h3')

   .eq(2)

   .html('Hello')

   .end() //退回到选中所有的h3元素的那一步

   .eq(0) //选中第一个h3元素

   .html('World'); //将它的内容改为World
```

jQuery 如何创建元素

利用jQuery创建元素的方法非常简单,直接将想创建的元素放在jQuery()就可以
```
$('

div
')

$('

Hello

');

$('

  • new list item
  • ');

    $('ul').append('

  • list item
  • ');
    ```

    jQuery 如何移动元素

    jQuery设计思想提供两组方法,来操作元素在网页中的位置移动。
    一组方法是直接移动该元素,
    另一组方法是移动其他元素,使得目标元素达到我们想要的位置。

    假定我们选中了一个div元素,需要把它移动到p元素后面。

    第一种方法是使用.insertAfter(),把div元素移动p元素后面:

      $('div').insertAfter($('p'));

    第二种方法是使用.after(),把p元素加到div元素前面:

      $('p').after($('div'));

    表面上看,这两种方法的效果是一样的,唯一的不同似乎只是操作视角的不同。但是实际上,它们有一个重大差别,那就是返回的元素不一样。第一种方法返回div元素,第二种方法返回p元素。你可以根据需要,选择到底使用哪一种方法。

    使用这种模式的操作方法,一共有四对:
    ```
      .insertAfter()和.after():在现存元素的外部,从后面插入元素

      .insertBefore()和.before():在现存元素的外部,从前面插入元素

      .appendTo()和.append():在现存元素的内部,从后面插入元素

      .prependTo()和.prepend():在现存元素的内部,从前面插入元素

    ## jQuery 如何修改元素的属性
    通过.attr()来获取或者修改元素的属性

    $(div)//找到div
    .find('#test')//找到id=test的div
    .attr('class','red')//为id=test的div添加属性class = red
    ```
    如果有属性class则修改属性class为red

    阮一峰老师的jQuery设计思想这一文中,对jQuery的介绍更全面

    本文章内容主要来源于阮一峰的jQuery设计思想

    {{topic.upvote_count || 0}}

    在谈jQuery之前我们要清楚什么是jQuery,jQuery其实就是个JavaScript库(为什么是JavaScript库?我的理解是:因为使用js语言编写的库)
    里面存储着可以对页面元素(HTML,head,body等)进行操作的api
    那又是怎么怎么通过api对页面进行操作的呢?
    下面从以下几个方面一一进行介绍

    1. jQuery 如何获取元素
    2. jQuery 的链式操作是怎样的
    3. jQuery 如何创建元素
    4. jQuery 如何移动元素
    5. jQuery 如何修改元素的属性

    jQuery如何获取元素

    使用jQuery的第一步,往往就是将一个选择表达式,放进构造函数jQuery()(简写为$),然后得到被选中的元素。
    选择表达式可以是CSS选择器
    格式:jQuery(选择器)
    下面的$均指jQuery

    $(document) //选择整个文档对象
    
    $('#myId') //选择ID为myId的网页元素
    
    $('div.myClass') // 选择class为myClass的div元素
    
    $('input[name=first]') // 选择name属性等于first的input元素
    

    也可以是jQuery特有的表达式

      $('a:first') //选择网页中第一个a元素
    
      $('tr:odd') //选择表格的奇数行
    
      $('#myForm :input') // 选择表单中的input元素
    
      $('div:visible') //选择可见的div元素
    
      $('div:gt(2)') // 选择所有的div元素,除了前三个
    
      $('div:animated') // 选择当前处于动画状态的div元素
    

    ## jQuery 的链式操作是怎样的

    链式操作就是在选取某个元素后,对元素进行一系列操作,并且所有操作可以连接在一起,以链条的形式写出来,比如:

    $(div).find('#test').addClass('red').addClass('green')
    
     分解开就是
         $(div) //找到div元素
         .find('#test')//找到id = test的div元素
         .addClass('red')//给id = test的元素添加class = red
         .addClass('green')//对上述元素继续添加class =  green
    

    这是jQuery最令人称道、最方便的特点。它的原理在于每一步的jQuery操作,返回的都是一个jQuery对象,所以不同操作可以连在一起。
    jQuery还提供了.end()方法,使得结果集可以后退一步
    ```
      $('div')

       .find('h3')

       .eq(2)

       .html('Hello')

       .end() //退回到选中所有的h3元素的那一步

       .eq(0) //选中第一个h3元素

       .html('World'); //将它的内容改为World
    ```

    jQuery 如何创建元素

    利用jQuery创建元素的方法非常简单,直接将想创建的元素放在jQuery()就可以
    ```
    $('

    div
    ')

    $('

    Hello

    ');

    $('

  • new list item
  • ');

    $('ul').append('

  • list item
  • ');
    ```

    jQuery 如何移动元素

    jQuery设计思想提供两组方法,来操作元素在网页中的位置移动。
    一组方法是直接移动该元素,
    另一组方法是移动其他元素,使得目标元素达到我们想要的位置。

    假定我们选中了一个div元素,需要把它移动到p元素后面。

    第一种方法是使用.insertAfter(),把div元素移动p元素后面:

      $('div').insertAfter($('p'));

    第二种方法是使用.after(),把p元素加到div元素前面:

      $('p').after($('div'));

    表面上看,这两种方法的效果是一样的,唯一的不同似乎只是操作视角的不同。但是实际上,它们有一个重大差别,那就是返回的元素不一样。第一种方法返回div元素,第二种方法返回p元素。你可以根据需要,选择到底使用哪一种方法。

    使用这种模式的操作方法,一共有四对:
    ```
      .insertAfter()和.after():在现存元素的外部,从后面插入元素

      .insertBefore()和.before():在现存元素的外部,从前面插入元素

      .appendTo()和.append():在现存元素的内部,从后面插入元素

      .prependTo()和.prepend():在现存元素的内部,从前面插入元素

    ## jQuery 如何修改元素的属性
    通过.attr()来获取或者修改元素的属性

    $(div)//找到div
    .find('#test')//找到id=test的div
    .attr('class','red')//为id=test的div添加属性class = red
    ```
    如果有属性class则修改属性class为red

    阮一峰老师的jQuery设计思想这一文中,对jQuery的介绍更全面

    本文章内容主要来源于阮一峰的jQuery设计思想

    20
    回复 编辑