jquery find 找到frame select_jQuery设计思想

就像jQuery的标语一样,write less, do more,jQuery做到使开发者写的代码更加简洁,却能实现更多复杂的效果.学习jQuery是非常有必要的,至今他仍是业界最通用的技术,且他将为我们今后学习更加高级的库打下基础.

本文参考了阮一峰大大的博客:

jQuery设计思想 - 阮一峰的网络日志​www.ruanyifeng.com

文章主要讲解了一下几点:

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

一、获取元素

jQuery的设计思想和主要方法就是选择网页中的元素,并可以对其进行一系列可连续的操作.相较于JavaScript而言,不需要反复重复选取元素的操作.

将一个选择表达式放进构造函数jQuery() [简写为$()] 中,即可得到被选中的元素.

$

或jQuery的表达式

$

同时还可以在选择完的元素的基础上使用jQuery的api再次进行筛选,在结果集中再次进行选择.这也是jQuery的设计思想之二.

$

二、链式操作

jQuery的设计思想之三就是链式操作,我们可以在选中网页中的元素之后对其进行一系列操作,并且所有的操作是可以链接在一起的,以链条的形式写出来,比如:

$

拆解开来即为:

$

链式操作是怎样实现的呢?

其实jQuery(选择器)用于获取对应的元素,但是他却不返回这些元素,相反,他返回一个对象,称为jQuery构造出来的对象,这个对象可以操作对应的元素.

window

三、创建元素

使用js创建元素:

var 

使用jQuery创建元素:

$

对比可见,是不是使用jQuery创建简单很多. 给元素添加属性也十分简单:

$

jQuery还有集中操作元素的重要方法:

• 复制元素: .clone()
• 删除元素: .remove() 不保留被删除元素的事件
• .detach() 保留被删除元素的事件,有利于重新插入文档时使用
• 清空元素内容: .empty()

四、移动元素

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

例如: 我们选中一个div元素,需要把它移动到p元素之后

//方法一

他们的区别是方法一返回的元素是div, 而方法二返回的元素是p,我们根据自己的需要来决定使用哪一种方法.

这种模式的操作方法有四对:

.

五、修改元素的属性

jQuery的设计思想之五,使用同一个函数来完成取值(getter)和赋值(setter),到底是取值还是赋值通过传入函数的参数来决定.

$

常见的取值和赋值函数有:

.

需要注意的是，如果结果集包含多个元素，那么赋值的时候，将对其中所有的元素赋值；取值的时候，则是只取出第一个元素的值（.text()例外，它取出第一个元素的所有元素的text内容）。

除此之外:

jQuery设计思想之六：除了对选中的元素进行操作以外，还提供一些与元素无关的工具方法。不必选中元素，就可以直接使用这些方法。

常用的工具方法有以下几种：

$.trim() 去除字符串两端的空格。 $.each() 遍历一个数组或对象。 $.inArray() 返回一个值在数组中的索引位置。如果该值不在数组中，则返回-1。 $.grep() 返回数组中符合某种标准的元素。 $.extend() 将多个对象，合并到第一个对象。 $.makeArray() 将对象转化为数组。 $.type() 判断对象的类别（函数对象、日期对象、数组对象、正则对象等等）。 $.isArray() 判断某个参数是否为数组。 $.isEmptyObject() 判断某个对象是否为空（不含有任何属性）。 $.isFunction() 判断某个参数是否为函数。 $.isPlainObject() 判断某个参数是否为用"{}"或"new Object"建立的对象。 $.support() 判断浏览器是否支持某个特性。

jQuery设计思想之七，事件操作,就是把事件直接绑定在网页元素之上。

$

目前，jQuery主要支持以下事件：

• .blur() 表单元素失去焦点。
• .change() 表单元素的值发生变化
• .click() 鼠标单击
• .dblclick() 鼠标双击
• .focus() 表单元素获得焦点
• .focusin() 子元素获得焦点
• .focusout() 子元素失去焦点
• .hover() 同时为mouseenter和mouseleave事件指定处理函数
• .keydown() 按下键盘（长时间按键，只返回一个事件）
• .keypress() 按下键盘（长时间按键，将返回多个事件）
• .keyup() 松开键盘
• .load() 元素加载完毕
• .mousedown() 按下鼠标
• .mouseenter() 鼠标进入（进入子元素不触发）
• .mouseleave() 鼠标离开（离开子元素不触发）
• .mousemove() 鼠标在元素内部移动
• .mouseout() 鼠标离开（离开子元素也触发）
• .mouseover() 鼠标进入（进入子元素也触发）
• .mouseup() 松开鼠标
• .ready() DOM加载完成
• .resize() 浏览器窗口的大小发生改变
• .scroll() 滚动条的位置发生变化
• .select() 用户选中文本框中的内容
• .submit() 用户递交表单
• .toggle() 根据鼠标点击的次数，依次运行多个函数
• .unload() 用户离开页面

使用.bind()可以更灵活地控制事件，比如为多个事件绑定同一个函数：

$

只想让事件运行一次，这时可以使用.one()方法。

$