jQuery+AJAX+JSON

合集下载
相关主题
  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

jQuery

1. 什么是jQuery??

jQuery是一个优秀的JavaScript框架,一个轻量级的JavaScript类库。

jQuery的核心理念是Write less,Do more。

使用jQuery可以兼容各种浏览器,方便的处理HTML、Events、动画效果等,并且方便的为网站提供AJAX交互。

2.jQuery的特点:

利用选择器来查找要操作的节点,然后将这些节点封装成一个jQuery对象,通过调用jQuery对象的方法或者属性来实现对底层被封装的节点的操作。

好处:a、兼容性更好;b、代码更简洁

3.编程步骤:

step1、使用选择器查找节点

step2、调用jQuery的属性和方法

4.jQuery对象与DOM对象之间的转换

1. 什么是jQuery对象??

jQuery对象是jQuery对底层对象的一个封装,只有创建了这个对象,才能使用类库中提供的方法。

2. DOM对象 ----> jQuery对象

DOM对象向jQuery对象的转变很容易,外面追加$和圆括号即可。

function f( ){

var obj = document.getElementById(‘d1’);

//DOM -> jQuery对象

var $obj = $(obj);

$obj.html(‘hello jQuery’);

}

3. jQuery对象 ----> DOM对象

jQuery对象向DOM对象转化,通过调用get方法加参数值0即可$obj.get(0)。

function f( ){

var $obj = $(‘#d1’);

//jQuery对象 -> DOM

var obj = $(obj).get (0);

obj.innerHTML = ‘hello jQuery’;

}

5. jQuery选择器

1. 什么是jQuery选择器??

jQuery选择器是一种类似CSS选择器的特殊说明符号,能够帮助jQuery 定位到要操作的元素上,使用了选择器可以帮助HTML实现内容与行为的分离。只需要在元素上加上Id属性。

2. 选择器的种类

a、基本选择器

#id根据指定的ID匹配一个元素

.class根据指定的类匹配一个元素

element根据的指定的元素名匹配所有的元素

select1,select2,......将每一个选择器匹配到的元素合并后一起返回 *匹配所有元素

b、层级选择器

1. select1 空格 select2 查找指定元素的所有的后代

2. select1 > select2 查找子节点

3. select1 + select2 下一个兄弟

4. select1 ~ select2 下面所有的兄弟

c、过滤选择器

1. 基本过滤选择器

:first 获取第一元素

:last 获取最后一个元素

:not 排除选择器要求的元素

:even 匹配所有下标为偶数的元素

:odd 匹配所有下标为奇数的元素

:eq 匹配所有给定索引值的元素

:gt 匹配所有大于给定索引值的元素

:lt 匹配所有小于给定索引值的元素

2. 内容过滤选择器

:contains 匹配包含给定文本的元素

:empty 匹配所有不包含子元素或者文本的空元素

:has 匹配含有选择器所匹配的元素的元素

:parent匹配含有子元素或者文本的元素

3. 可见性过滤选择器

根据元素在页面中的可见属性进行过滤,主要是对hidden属性和visible 属性的判断。

:hidden 匹配所有不可见元素,或者type为hidden的元素

:visible 匹配所有的可见元素

4. 属性过滤选择器

属性过滤器会对标记的属性进行判断,符合条件的元素会作为返回的对象。

[attribute] 匹配包含给定属性的元素。

[attribute=value] 匹配给定的属性是某个特定值的元素

[attribute!=value] 匹配所有不含有指定的属性,或者属性不等于特定值的元素。

[attribute^=value] 匹配给定的属性是以某些值开始的元素

[attribute$=value] 匹配给定的属性是以某些值结尾的元素

[attribute*=value] 匹配给定的属性是以包含某些值的元素

[attrSel1][attrSel2][attrSelN] 复合属性选择器,需要同时满足多个条件时使用。

5. 子元素过滤选择器

子元素过滤选择器会根据子元素的位置的数值来进行筛选。

:nth-child (index、enven、odd)匹配其父元素下的第N个子或奇偶元素。注意':eq(index)' 只匹配一个元素,而这个将为每一个父元素匹配子元素。:nth-child从1开始的,而:eq()是从0算起的!

6. 表单对象属性过滤选择器

:enabled 匹配所有可用元素

:disabled 匹配所有不可用元素

:checked 匹配所有选中的被选中元素(复选框、单选框等,不包括select 中的option)

:selected 匹配所有选中的option元素

d、表单选择器

使用的规则和以上各选择器一致。$(“:input”)就会返回所有的input输入框,大多数情况下,表单选择器会和其他选择器进行配合来定位元素。

:input 匹配所有 input, textarea, select 和 button 元素

:text 匹配所有的单行文本框

:password 匹配所有密码框

:radio 匹配所有单选按钮

:checkbox 匹配所有复选框

:submit 匹配所有提交按钮

:image 匹配所有图片

:reset 匹配所有重置按钮

:button 匹配所有按钮

:file 匹配所有的文件域

:hidden 匹配所有不可见元素,或者type为hidden的元素

6.jQuery操作DOM-查询

1. html() html()等价于innerHTML

读取或修改节点的HTML内容的属性和value值。与DOM对象的

相关文档
最新文档