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

最近一直在学习jQuery。虽然现在大部分工作并不对此有要求,但是了解jQuery之后发现,设计得甚是巧妙。作为一个新人,希望在不断学习之后也能写出这么精妙的设计。言归正传,现在来稍微讲讲jQuery的使用方法。

jQuery 如何获取元素

jQuery可以获取到网页的某个元素,然后对其进行操作。它的参数可以是符合css语法的选择器。
- $('#Id') 获取到ID为Id的元素
- $('.red') 获取到class为red的元素
- $('div.red') 获取到class为red的所有div元素
- $(document) 获取到整个文档对象

这比DOM的获取方式简单许多,甚至都不需要写jQuery,直接用$就可以。

jQuery 的链式操作

前面讲到,jQuery设计的一大特点就是,获取到了某个网页元素就可以对它进行操作。并且可以操作一次后继续操作,这就是jQuery的链式操作,比如:
$('#test').find('.child').addClass('red')
我们分开来看看
1. $('#test') 获取到id为test的元素
2. .find('.child') 获取到class为child的元素
3. .addClass('red') 给这些元素加上red这个class
这就是链式操作。因为jQuery每一步操作,返回的都是一个jQuery对象,所以可以连续地进行操作。这也是jQuery的一大设计亮点。

jQuery 如何创建元素

我们使用jQuery构造函数直接创建元素,非常简单
$('<div><span>1</span></div>') 就是创建一个div元素,div里有一个span元素,然后
.appendTo(document.body) 就可以把这个创建出来的元素插入到body里面。

jQuery 如何移动元素

我们可以将某个需要的元素放到另外一个元素的前面,或者后面。
- $('div').insertAfter($('p')) 在p元素后面插入div元素
- $('p').after('div') 把p元素加到div元素前面
这两种方式效果是一样的,只不过操作的对象不同,所以可以根据自己的需求来选择。

jQuery 如何修改元素的属性

  • $('#p').attr('class') 获取id为p的元素的class属性
  • $('#p').attr('class','red') 如果有第二个参数,就是给p元素的class加一个red属性
    这是一个很有意思的例子。因为这是jQuery的一个巧妙的设计。这是一个getter/setter模式。就是指这个函数,既可以读也可以写。
  • $('#p').addClass('blue') 给id为p的元素增加一个blue的class属性
  • $('#p').removeClass('yellow') 删除id为p的元素的yellow的class属性

jQuery 设计得巧妙的地方还有很多,虽然现在工作中会比较少地提到他,但是它的设计模式还是很值得学习的。希望以后也能写出这么构思巧妙的代码。

{{topic.upvote_count || 0}}

最近一直在学习jQuery。虽然现在大部分工作并不对此有要求,但是了解jQuery之后发现,设计得甚是巧妙。作为一个新人,希望在不断学习之后也能写出这么精妙的设计。言归正传,现在来稍微讲讲jQuery的使用方法。

jQuery 如何获取元素

jQuery可以获取到网页的某个元素,然后对其进行操作。它的参数可以是符合css语法的选择器。
- $('#Id') 获取到ID为Id的元素
- $('.red') 获取到class为red的元素
- $('div.red') 获取到class为red的所有div元素
- $(document) 获取到整个文档对象

这比DOM的获取方式简单许多,甚至都不需要写jQuery,直接用$就可以。

jQuery 的链式操作

前面讲到,jQuery设计的一大特点就是,获取到了某个网页元素就可以对它进行操作。并且可以操作一次后继续操作,这就是jQuery的链式操作,比如:
$('#test').find('.child').addClass('red')
我们分开来看看
1. $('#test') 获取到id为test的元素
2. .find('.child') 获取到class为child的元素
3. .addClass('red') 给这些元素加上red这个class
这就是链式操作。因为jQuery每一步操作,返回的都是一个jQuery对象,所以可以连续地进行操作。这也是jQuery的一大设计亮点。

jQuery 如何创建元素

我们使用jQuery构造函数直接创建元素,非常简单
$('<div><span>1</span></div>') 就是创建一个div元素,div里有一个span元素,然后
.appendTo(document.body) 就可以把这个创建出来的元素插入到body里面。

jQuery 如何移动元素

我们可以将某个需要的元素放到另外一个元素的前面,或者后面。
- $('div').insertAfter($('p')) 在p元素后面插入div元素
- $('p').after('div') 把p元素加到div元素前面
这两种方式效果是一样的,只不过操作的对象不同,所以可以根据自己的需求来选择。

jQuery 如何修改元素的属性

  • $('#p').attr('class') 获取id为p的元素的class属性
  • $('#p').attr('class','red') 如果有第二个参数,就是给p元素的class加一个red属性
    这是一个很有意思的例子。因为这是jQuery的一个巧妙的设计。这是一个getter/setter模式。就是指这个函数,既可以读也可以写。
  • $('#p').addClass('blue') 给id为p的元素增加一个blue的class属性
  • $('#p').removeClass('yellow') 删除id为p的元素的yellow的class属性

jQuery 设计得巧妙的地方还有很多,虽然现在工作中会比较少地提到他,但是它的设计模式还是很值得学习的。希望以后也能写出这么构思巧妙的代码。

27
回复 编辑