当前位置:文档之家› jQuery+AJAX+JSON

jQuery+AJAX+JSON

jQuery1. 什么是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对象 -> DOMvar 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对象的innerHTML的作用一致。

2. text() text()等价于innerText读取或修改节点中的文本内容,会过滤掉标记内容,与innerText的作用基本一致,但innerText在不同浏览器中写法不同,在jQuery中则使用text()方法即可。

3. val()读取或修改节点的value属性值,也就是针对表单元素中有value属性的哪些元素的操作。

4. attr()读取或设置修改节点的属性。

这个方法会更宽泛一些,可以修改元素的任何属性。

7. jQuery操作DOM-创建、插入、删除1. 创建DOM节点的语法使用$符号将HTML标记的字符串文本括起来,即创建了DOM节点,如$(html)。

大多数时候创建后的节点需要放入文档中,使用到后续的一些方法可以实现节点的插入简写形式如 $(‘body’).append(‘<div>…</div>”)2. 插入DOM节点的方法append方法会将DOM节点作为最后一个孩子节点添加进来prepend方法将DOM节点作为第一个孩子节点添加进来after方法将DOM节点作为下一个兄弟节点添加进来before方法将DOM节点作为上一个兄弟节点添加进来3. 删除DOM节点的方法remove()可以移除DOM,remove(selector)可以按选择器定位后删除,empty()清空节点。

4.将js和html内容分离$(fn);注意:window.onload=function(){}等价于$(fucntion(){});但是内在的机制不相同。

fn是一个函数,表示当整个页面记载完成之后就会执行fn。

8. jQuery操作DOM-复制节点1.复制DOM节点的方法clone()方法和clone(true)都会实现复制,添加参数true的时候会将节点的行为也复制到新的对象之上。

9. jQuery操作DOM-属性操作1. 属性操作的方法读取属性使用attr()方法,设置属性使用attr(‘’,‘’)方法。

删除属性使用removeAttribute(‘’)方法。

10. jQuery操作DOM-样式操作attr("class","")获取和设置addClass("")追加样式removeClass("")删除所样式toggleClass("")切换样式hasClass("")是否有某个样式css("")读取css值css("","")设置多个样式11.jQuery操作DOM-遍历节点childern()/childern(selector)只考虑直子节点next()/next(selector)下一个兄弟的节点perv()/perv(selector)上一个兄弟的节点sibling()/sibling(selector)其他的兄弟find(selector)查找满足选择器的所有的后代parent()父节点,没有选择器jQuery事件处理1. 使用jQuery实现事件绑定1. 使用jQuery实现事件绑定$obj. bind(事件类型,事件处理函数);注意:为一个jQuery对象绑定单击事件的代码实现为 $obj.bind(‘click’,fn);也可以简写为 $obj.click(fn);2. 获得事件对象event$(fucntion(e){e就是事件处理对象(jQuery对底层事件对象做了一个封装,简化代码)});3. 事件对象的常用属性a、找到事件源:var obj = e.target获取事件源使用 事件对象的target属性。

b、获取发生事件时的鼠标点击的坐标:alert(e.pageX + ' ' + e.pageY);获取发生事件时的鼠标坐标使用pageX和pageY属性。

c、禁止事件冒泡e.stopPropagation();2. 事件冒泡子节点产生的事件会依次向上抛给相应的父节点当事件发生时,会首先发送给最内层的元素,在这个元素获得响应机会之后,事件会向上冒泡给更外层的元素,及从内层向外层依次传递。

3. 合成事件.hover(over,out)模拟鼠标悬停事件它为频繁使用的任务提供了一种“保持在其中”的状态。

当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。

当鼠标移出这个元素时,会触发指定的第二个函数。

而且,会伴随着对鼠标是否仍然处在特定元素中的检测(例如,处在div中的图像),如果是,则会继续保持“悬停”状态,而不触发移出事件(修正了使用mouseout事件的一个常见错误)。

toggle(f1,f2,... ...)模拟连续单机事件注意的是,通过jQuery这种方式触发事件时,不会发生事件传播;只会执行直接添加到元素的处理程序。

相关主题