jQuery设计思想

125 阅读1分钟

jQuery是目前使用最广泛、最流行的javascript函数库。它的基本设计思想和主要用法,就是"选择某个网页元素,然后对其进行某种操作"。

一、jQuery 如何获取元素

1.用CSS选择器获取

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

2.用jQuery特有的表达式获取

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

二、jQuery 的链式操作

使用链式操作可以节省代码量,使代码看起来更优雅。它的原理在于每一步的jQuery操作,返回的都是一个jQuery对象,所以不同操作可以连在一起。

如下:

$('.div').addClass('.red').find('.child')

三、jQuery 如何创建元素

创建元素只要把新元素直接传入jQuery的构造函数就可以了。

比如:

$('<div>你好</div>')
$('<p>你好</p>')

四、jQuery 如何移动元素

  • .insertAfter()和.after():在现存元素的外部,从后面插入元素

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

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

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

五、jQuery 如何修改元素的属性

  • .text():读写文本内容
  • .html():读写HTML内容
  • .attr():读写属性
  • .css():修改style
  • .addClass():添加一个或多个类