jQuery功能

EVA
298 阅读1分钟

1、如何选择页面中的元素呢？

使用jQuery的第一步，往往就是将一个选择表达式，放进构造函数jQuery()（简写为$），然后得到被选中的元素。选择表达式可以是css选择器也可以是jQuery自己特有的选择的表达式

选择表达式css选择器

  • $(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元素

查找元素

  • $('#xxx')返回值并不是元素，而是一个api对象
  • $('#xxx').find ('.red')查找#xxx里的.red元素
  • $('#xxx').parent()获取爸爸
  • $('#xxx').children()获取儿子
  • $('#xxx').siblings()获取兄弟
  • $('#xxx').index()获取排行老几(从0开始)
  • $('#xxx').next()获取弟弟
  • $('#xxx').prev()获取哥哥
  • $('.red').each(fn)遍历并对每个元素执行fn

增

  • $ ('<div><span>1</span></div>')创建div
  • .appendTo(document.body)插入到 body 中

删

  • $div.remove()
  • $div.empty()

改

  • $div.text(?)读写文本内容
  • $div.html(?)读写HTML内容
  • $div.attr('title',?)读写属性
  • $div.css({color: 'red})读写style
  • $div.addClass('blue')
  • $div.on('click', fn)
  • div.off(′click′,fn)∗注意:∗∗div.off('click', fn) *注意:* *div大部分时候对应了多个div元素*

使用原型

  • 把共用属性（函数)全都放到$.prototype
  • $.fn = $.prototype//名字太长不爽
  • 然后让api.__proto__指向$.fn

2、链式操作

jQuery设计思想之三，就是最终选中网页元素以后，可以对它进行一系列操作，并且所有操作可以连接在一起，以链条的形式写出

image.png jQuery还提供了.end()方法，使得结果集可以后退一步

$('div')
 .find('h2')
 .eq(2)
 .html('Hello') 
 .end() //退回到选中所有的h2元素的那一步
 .eq(0) //选中第一个h3元素
 .html('World'); //将它的内容改为World

设计模式?

jQuery 用到了哪些设计模式
  • 不用new的构造函数,这个模式没有专门的名字
  • $(支持多种参数)，这个模式叫做重载
  • 用闭包隐藏细节,这个模式没有专门的名字
  • $div.text()即可读也可写，getter / setter
  • $.fn是$.prototype的别名，这叫别名
  • jQuery针对不同浏览器使用不同代码，这叫适配器
设计模式是啥

老子这个代码写得太漂亮了，别人肯定也用得到那就给这种写法取个名字吧，比如适配器模式设计模式就是对通用代码取个名字而已

3、移动元素操作

avatar
文章
阅读
粉丝