jQuery学习总结(二)

紧接上一篇博客jQuery总结(一),jQuery总是会给我太多的便利、简洁还有一点点的零散,所以,需要我们好好的总结,将零散的它们串成线,再结合以前的JS织成网……

1、关于load方法

JQuery中的load( )方法十分强大,可以把一个指定的静态,动态页面或服务器端程序输出的数据装入到执行load(
)方法的JQuery对象包装着的元素中。

load( )方法还支持部分装载,在装入的页面地址后面加空格,然后使用选择器,就可以把页面中符合选择器的部分装入进来。但有一点要注意的是被load的页面一定要是UTF-8编码的,否则装入后中文会出现乱码。

2、关于元素

(1)效果

fadeOut( )和fadeIn(
)可以实现淡出淡入的效果,参数内容和slideUp( ),slideDown( )方法类似。

animate( )方法可以实现任意的动画效果,可以控制某个css属性在某个时间内进行变化,从而达到动画的效果。

opacity( )可以改变元素的透明度,IE中使用过滤器实现,100表示完全显示,0表示完全透明,非IE浏览器使用opacity属性,1表示完全显示,0表示透明。JQuery在animate(
)方法中屏蔽了浏览器差异,直接使用opacity就可以达到淡入淡出的效果。

(2)定位

position属性可以控制元素定位的方式,值为relative时表示相对原来的位置进行定位。可以通过设定top,left,bottom,right的值来控制元素相对原来的位置进行移动

z-index可以控制元素在页面中的层高,值越大就会在页面的层越靠前,也就会覆盖住一些z-index值较低的元素。只有position的值为relative或absolute的元素,z-index才会生效。

3、获取节点

parent()方法可以获得一个节点的父节点

next()方法可以获得一个节点的下一个兄弟节点

previous()方法可以获得一个节点的上一个兄弟节点

attr()方法可以设置或获取某一个节点的属性值

each(),一个包含了多个元素的JQuery对象上执行each()方法,可以注册给each()方法的那个function的内容被每一个元素执行。同时这个function还可以接收到一个参数,表示这个元素的索引值。

eq()方法可以根据索引值只得到JQuery对象中包含的多个元素中的某一个元素,并仍然返回元素对应的新JQuery对象。

例如$(“div:eq(1)”)

4、扩展

(1)与ajax相关

ajaxStart在每一个JQuery发出的ajax请求开始前执行

ajaxStop在JQuery队列中所有的ajax请求结束后执行

ajaxComplete在每一个JQuery发出的ajax请求结束后执行

ajaxStart,ajaxStop对应ajax交互开始前和结束后的事件,给某一个节点注册了这两个事件后,当前页面的ajax交互开始前和结束后,就会执行指定的方法。

(2)一些不同点的对比:

visibility的属性值为hidden时,元素隐藏,但是和display为none不同的时,在页面中任然占据一定空间,只是不显示

(3)和JS的对比:

change()方法对应标准Javascript中的onchange事件,可以处理下拉框内容变化的事件

Javascript中的setTimeout()方法可以延时执行某些代码,对应的clearTimeout()可以清除设定的延时操作。

JQuery中的mouseover(),mouseout()方法对应标准javascript的onmouseover,onmouseout事件,可以处理鼠标进入和离开的事件。

bind可以用于给指定的节点绑定Javascript的事件或JQuery中定义的事件。对于JQuery中没有直接提供注册方法的事件,可以用这种方式注册。方法的第二个参数可以是事件执行的方法定义。

JSON的数据格式其实就是Javascript中的一个对象或数据定义的文本格式内容,比如{key1:value1, key2: [1,2,3]}或[1,2,{key2: value2}]

可以直接$(“<option></option>”)的方法来建立下拉框中的选项,然后用appendTo这样的方法加入到下拉框中

$("<optionvalue=‘‘>请选择汽车类型</option>").appendTo(cartypeSelect);

JS的学习还在继续中,总结也是未完待续……

时间: 2024-11-21 01:13:30

jQuery学习总结(二)的相关文章

jquery学习(二)-DOM操作

来自锋利的jquery第二版 一.DOM分类 DOM分为3类DOM Core(核心).HTML-DOM.CSS-DOM 1.DOM Core:其并不专属于javascript,任何一种支持DOM程序设计的语言都可以使用它.如javascript中的getElementById.getElementByTagName.getAttibute和setAttribute等方法,就是DOM Core的组成部分. 2.HTML-DOM:其比DOM Core出现的还要早,它提供了一些更简明的记号来描述各种H

[jQuery学习系列二 ]2-JQuery学习二-数组操作

前言 上一篇内容 已经对于Jquery 有了一些认识, 包括Jquery的选择器和DOM对象, 那么这一篇继续来看下Jquery中很实用的Jquery对于数组的操作. Jquery中对数组的操作大致有以下几种形式:each(迭代), map(转换), grep(筛选), 合并等. 1,迭代(each)jQuery.each( object, callback ) 返回值:Object说明:通用例遍方法,可用于例遍对象和数组.注意: 传入的第一个参数可以是数组或者对象.如果数组,则遍历数组中的每一

jquery学习基础(二)

今天继续学习jquery的基础.直接看栗子吧. jquery操作checkbox demoOne 这里我点击超链接的时候,使用alert将所有已经checked的checkbox的value值打印出来,先看下效果: 关键的html和jquery代码: <div> <a href="#">获得被选中的元素</a> <input type="checkbox" checked value="111">c

jQuery学习(二)

jQuery选择器.记得在我做的一个自动化测试项目里面,涉及到大量DOM操作.每次对一个DOM元素操作之前,都要对每个元素进行一次判断.而jQuery获取网页中不存在的元素也不会报错.比如$('#tt')获取的永远是对象,即使网页上没有此元素. 过滤选择器:各种选择器看得头晕,选择器是行为与文档内容之间连接的纽带,选择器是为了轻松找到文档中的元素.

jquery 学习笔记二 隐藏与显示

css找到元素后是添加样式,而jquery找到元素后是添加形为. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><

jquery学习记录二(过滤性选择器)

过滤性选择器包括: 1.:first过滤选择器 2.:eq(index)过滤选择器 3.:contains(text)过滤选择器 4.:has(selector)过滤选择器 5.:hidden过滤选择器 6.:visible过滤选择器 7.[attribute=value]属性选择器 8.[attribute!=value]属性选择器 9.[attribute*=value]属性选择器 10.:first-child子元素选择器 11.last-child子元素选择器 过滤性选择器,该类型的选择

jquery源码学习(二)sizzle部分 【转】

一,sizzle的基本原理 sizzle是jquery选择器引擎模块的名称,早在1.3版本就独立出来,并且被许多其他的js库当做默认的选择器引擎.首先,sizzle最大的特点就是快.那么为什么sizzle当时其他引擎都快了,因为当时其他的引擎都是按照从左到右逐个匹配的方式来进行查找的,而sizzle刚好相反是从右到左找的. 举个简单的例子 “.a .b .c”来说明为什么sizzle比较快.这个例子如果按照从左到右的顺序查找,很明显需要三次遍历过程才能结束,即先在document中查找.a,然后

Jquery的学习(二)基础核心

1.学习要点: 1.代码风格 2.加载模式 3.对象互换 一.代码风格: 在jQuery程序中,不管是页面元素的选择.内置的功能函数,都是美元符号"$"来起始的.而这个"$"就是jQuery当中最重要且独有的对象:jQuery对象,所以我们在页面元素选择或执行功能函数的时候可以这么写: $(function () {}); //执行一个匿名函数 $('#box'); //进行执行的ID元素选择 $('#box').css('color', 'red'); //执行功

jQuery学习-事件之绑定事件(二)

在上一篇<jQuery学习-事件之绑定事件(一)>我们了解了jQuery的add方法,今天我们来学习下dispatch方法: dispatch: function( event ) { //这里是修正event对象的属性,处理兼容性问题         event = jQuery.event.fix( event ); var i, ret, handleObj, matched, j,             handlerQueue = [],//事件队列             arg

jQuery学习笔记(一):入门

jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操作如下: 1 document.getElementById('info').value = 'Hello World!'; 使用JQuery时获取DOM文本操作如下: 1 $('#info').val('Hello World!'); 嗯,可以看出,使用JQuery的优势之一是可以使代码更加简练,使开