jQuery——JavaScript流行的类库

jQuery——JavaScript流行的类库

jQuery的优点核心理念:写的更少,做的更多。(write less,do more)。

轻量级,标准版和mini版,mini版简化了函数的名称,减小了源码的大小。

语法便捷,可提高开发效率。

不用在html中插入一堆js来调用命令了,只需要定义id即可。

网上有很多优秀的插件可以选择(12306的日历就是一个)。

jQuery对象

jQuery对象就是通过jQuery包装DOM对象后产生的对象。 但是需要注意:jQuery对象虽然是包装DOM对象产生的,但是jQuery无法使用DOM对象的任何方法,同理DOM对象也不调用jQuery的方法。

DOM对象转为jQuery对象 var user = document.getElementById("username");//获取DOM对象

var $username = jQuery(user);//通过DOM对象获取jQuery对象,jQuery对象变量名建议使用$***

jQuery对象转为DOM对象 var $user = jQuery("#username"); //通过选择器获取jQuery对象

var user = $user[0];//jQuery对象是一个数组对象,获取数组的第一个索引的值即是DOM对象

引入jQuery库

注意:

①引入库不能再body标签以内或者以后,jQuery的文件位置一般采用相对寻址,不含有中文的路径。对于不同文件夹中,src="../jQuery库所在文件夹名/jQuery文件名.js"。

②导入的这个script标签中不能写代码,需要新建一个新的script标签才能写代码。

获取jQuery对象.html

补充:在实际开发中,常常把script标签写在head中,在JavaScript中调用window.onload() = function(){...}来确保加载完毕。而在jQuery中加载我们使用$(document).ready(function(){...}); 选择器jQuery提供的强大选择器,分为:

1、基本选择器

2、层次选择器

3、基本过滤选择器

4、内容过滤选择器

5、可见度过滤选择器

6、属性选择器

7、子元素选择器

8、表单选择器

9、表单对象属性选择器

基本选择器 #id , id选择器, 通过id值获得元素

element , 标签选择器 , 通过标签名获取元素

.class , 类选择器 , 通过class值获得元素

s1 , s2 , ... 多选择器 , 将多个选择器加在数组中

* 通用选择器 , 获取所有东西

层次选择器 层级:

ancestor descendant A B , 获取A元素内部所有的B后代元素(爷孙关系,获取的是所有的后代)

parent > child A>B , 获取A元素内部所有的B子元素(父子关系)

prev + next A+B , 获取A元素后面的第一个兄弟B元素(兄弟关系)

prev ~ siblings A~B , 获取A元素后面的所有的兄弟B元素(多兄弟关系)

过滤选择器格式: ":关键字"

:first 第一个

:last 最后一个

:eq(index) 获取指定索引的

:gt(index) 大于指定索引的

:lt(index) 小于指定索引的

:even 偶数索引的 例如:查找表格1,3,5行,索引是0,2,4。

:odd 奇数索引的

:not(selector) 去除所有与指定选择器匹配的元素

:header 获得所有标题元素

:animated 获得所有动画的

:focus 获得焦点的

过滤选择器的问题:有很多input标签,包括文本,按钮......现在要选中所有的按钮的input,怎么选?

方法一:$('input[type="button"]')可以获取类型为button的input

绑定事件: $('input[type="button"]').blur(这里写一个失去焦点的函数).focus(这里写一个得到焦点的函数)

方法二:使用jQuery的on()函数进行绑定:

$("input[type='button']").on("blur focus",function(){ });这种将事件并列写的方法可以使定义的函数同时适用于blur和focus两个事件,典型应用就是文本框提示字符的消失与出现。

内容选择器:empty 当前元素是否为空(是否有标签体--子元素、文本)

:has(...) 当前元素是否含有指定元素

:parent 当前元素是否是父元素

:contains(text) 标签体是否有指定的文本

属性选择器[属性名] 获得终极哦东的属性名元素

[属性名=值] 获得属性名 等于 指定值的 元素

[属性名!=值] 获得属性名 不等于 指定值的 元素

[属性名^=值] 获得以属性值 开头的 元素

[属性名$=值] 获得以属性值 结尾的 元素

[属性名*=值] 获得 含有属性值的 元素

[as1][as2][as3]... 复合选择器,多个条件同时成立

子元素过滤器:nth-child 获得指定索引的孩子,从1开始。

:first-child 获得第一个孩子

:last-child 获得最后一个孩子

:only-child 获得独生子

表单过滤器:input 所有表单元素。(/