jQuery 1.4.1 速查表
jQuery 1.4.1 速查表-- Shawphy, 原作:G. Scott Olson 核心
?jQuery 核心函数
o jQuery(expr, [context])
o jQuery(html, [ownerDoc])
o jQuery(html, props)
o jQuery(elements)
o jQuery()
o jQuery(callback)
?jQuery 对象访问
o each(callback)
o size()
o length
o selector
o context
o get()
o get(index)
o index(subject)
?数据缓存
o data([name], [value])
o data(obj)
o removeData(name)
o$.data([el], [key], [val])
?队列控制
o queue(name ,[cb|queue])
o dequeue(name)
o clearQueue([queueName])
?插件机制
o jQuery.fn.extend(object)
o jQuery.extend(object)
?多库共存
o jQuery.noConflict([ex])
属性
?属性
o attr(name)
o attr(properties)
o attr(key, value)
o attr(key, fn)
o removeAttr(name)
?CSS 类
o addClass(class | fn)
o removeClass([class | fn])
o toggleClass(class|fn [, sw])
?HTML代码/文本/值
o html( [val | fn] )
o text( [val | fn] )
o val( [val | fn | arr] )
CSS
?CSS
o css(name)
o css(properties)
o css(name, value | fn)
?位置
o offset([coordinates])
o position()
o scrollTop( [val] )
o scrollLeft( [val] )
?尺寸
o height( [val] )
o width( [val] )
o innerHeight()
o innerWidth()
o outerHeight(options)
o outerWidth(options)
选择器
?基本
o#id
o element
o.class
o*
o selector1,selector2,selectorN ?层级
o ancestor descendant
o parent > child
o prev + next
o prev ~ siblings
?基本
o:first
o:last
o:not
o:even
o:odd
o:eq
o:gt
o:lt
o:header
o:animated
?内容
o:contains
o:empty
o:has
o:parent
?可见性
o:hidden
o:visible
?属性
o[attribute]
o[attribute=value]
o[attribute!=value]
o[attribute^=value]
o[attribute$=value]
o[attribute*=value]
o[attrSel1][attrSel2][attrSelN]?子元素
o:nth-child
o:first-child
o:last-child
o:only-child
?表单
o:input
o:text
o:password
o:radio
o:checkbox
o:submit
o:image
o:reset
o:button
o:file
o:hidden
?表单对象属性
o:enabled
o:disabled
o:checked
o:selected
文档处理
?内部插入
o append(content | fn) o appendTo(content)
o prepend(content | fn) o prependTo(content)?外部插入
o after(content | fn)
o before(content | fn) o insertAfter(content) o insertBefore(content)?包裹
o wrap(html)
o wrap(elem)
o wrap(fn)
o unwrap()
o wrapAll(html)
o wrapAll(elem)
o wrapInner(html)
o wrapInner(elem)
o wrapInner(fn)
?替换
o replaceWith(content) o replaceAll(selector)?删除
o empty()
o remove([expr])
o detach([expr])
?复制
o clone()
o clone(true)
筛选
?过滤
o eq(index)
o first()
o last()
o hasClass(class)
o filter(expr | fn)
o is(expr)
o map(callback)
o has(expr)
o not(expr)
o slice(start, [end])
?查找
o children([expr])
o closest([expr])
o find(expr)
o next([expr])
o nextAll([expr])
o nextUntil([expr])
o offsetParent()
o parent([expr])
o parents([expr])
o parentsUntil([expr]) o prev([expr])
o prevAll([expr])
o prevUntil([expr])
o siblings([expr])
?串联
o add(expr, [context])
o andSelf()
o contents()
o end()
事件
?页面载入
o ready(fn)
?事件处理
o bind(type, [data], fn)
o one(type, [data], fn)
o trigger(type, [data])
o triggerHandler(type, [data]) o unbind([type], [data])
?事件委派
o live(type, [data], fn)
o die([type], [fn])
?事件切换
o hover(over, out)
o toggle(fn, fn2, [fn3, fn4, ...])?事件
o blur( [fn] )
o change( [fn] )
o click( [fn] )
o dblclick( [fn] )
o error( [fn] )
o focus( [fn] )
o focusin( [fn] )
o focusout( [fn] )
o keydown( [fn] )
o keypress( [fn] )
o keyup( [fn] )
o mousedown(fn)
o mousemove(fn)
o mouseout(fn)
o mouseover(fn)
o mouseup(fn)
o resize(fn)
o scroll(fn)
o select( [fn] )
o submit( [fn] )
o unload(fn)
效果
?基本
o show()
o show(speed, [callback])
o hide()
o hide(speed, [callback])
o toggle()
o toggle(switch)
o toggle(speed, [callback])
?滑动
o slideDown(speed, [callback]) o slideUp(speed, [callback])
o slideToggle(speed, [callback])?淡入淡出
o fadeIn(speed, [callback])
o fadeOut(speed, [callback])
o fadeTo(speed, opacity, [fn])?自定义
o animate(param,[dur],[e],[fn])
o animate(params, options)
o stop([clearQueue], [gotoEnd]) o delay(duration, [queueName])?设置
o jQuery.fx.off
Ajax
?Ajax 请求
o$.ajax([options])
o load(url, [data], [callback])
o$.get(url, [data], [fn], [type])
o$.getJSON(url, [data], [fn])
o$.getScript(url, [callback])
o$.post(url, [data], [fn], [type])?Ajax 事件
o ajaxComplete(callback)
o ajaxError(callback)
o ajaxSend(callback)
o ajaxStart(callback)
o ajaxStop(callback)
o ajaxSuccess(callback)
?其它
o$.ajaxSetup([options])
o serialize()
o serializeArray()
工具
?浏览器及特性检测
o$.support
o$.browser
o$.browser.version
o$.boxModel
?数组和对象操作
o$.each(object, [callback])
o$.extend([d],tgt,obj1,[objN])
o$.grep(array, fn, [invert])
o$.makeArray(obj)
o$.map(array, callback)
o$.inArray(value, array)
o$.toArray()
o$.merge(first, second)
o$.unique(array)
o$.parseJSON(json)
?函数操作
o$.noop
o$.proxy(function, scope)
?测试操作
o$.contains(container, contained) o$.isArray(obj)
o$.isFunction(obj)
o$.isEmptyObject(obj)
o$.isPlainObject(obj)
?字符串操作
o$.trim(str)
?URL
o$.param(obj, [traditional])
?插件编写
o$.error(message)
关于
?关于jQuery 1.3 版翻译
?关于jQuery 1.2 版翻译
?提交bug及获取更新
jQuery选择器
$的选择器部分: 凡是运用$,其返回值是一个object $选择器主要用于选择标签.基本用法是同css的选择器.但是,很让人兴奋的是,他支持常见的浏览器,而css中很多选择器是IE6所不支持的. 1.基本选择器(3种): $("标签名"),如$("p")是选取了所有的p标签节点 $("#id名"),如$("#test")是选取了id为test的标签节点 $(".class名"),如$(".test")是选取了所有class为test的标签节点 上面的$("标签名")和$(".class名")返回的都是所有满足的节点,至于进一步筛选可以添加一些函数,如eq,gt,lt 等等. 2.组选择器: 下面还是现做一个约定:把"标签名或#id名或.class名"记作mix,则mix表示一个标签名,或一个#id或一个.class. $("mix,mix,mix,..."),如:$("div,#test1,p,.test2,#test3") 3.后代选择器: $("mix mix"),当然可以是多个嵌套,但后代选择器可以是深层子代,所以$("mix mix mix ...")这种写法作用不大.例子:$("div .test"):在div标签内的所有具有test的class的后代元素(就是被div嵌套的class属性为test 的标签) 可以见DEMO。 4.子选择器: $("mix>mix"),这个放在后代选择器后面是为了和它做对比.子选择器只能选择第一代子代.不处理深层嵌套.例子: $("div>.test")
在$("div + #test")中能取到p段落节点
则不能取到 6.属性选择器: 把属性选择器不放在css选择器里面是因为jQuery中写法是不一样的.至于css中写法可以参考我之前写的一篇css的选择器一文.jQuery中是和xPath类似的写法: $("mix[@attr]"):选取所有该mix且具有attr属性的节点 $("mix[@attr=a_value"]):选取所有该mix且具有attr属性并满足属性值为a_value的节点 $("mix[@attr^=a_value_head"]):attr属性的属性值是以a_value_head开头的 $("mix[@attr$=a_value_end"]):attr属性的属性值是以a_value_end结尾的 $("mix[@attr*=a_value"]):attr属性的属性值中包含a_value 7.进一步选择器:
jQuery对表单元素的取值和赋值操作
转:jQuery对表单元素的取值和赋值操作 jquery 2009-10-14 10:40:19 阅读339 评论0字号：大中小订阅 jQuery读取input元素的值： 使用常规的思路：$(”#keyword”).value 取值是取不到的，因为此时$(’#keydord’)已经不是个element，而是个jquery对象，所以应该使用：$(”#keyword”).val() 。 jQuery中val()函数的作用： val() 获得第一个匹配元素的当前值。 attr('value') 获取空间的value属性值 在jQuery 1.2 中,可以返回任意元素的值。包括select。如果多选，将返回一个数组，其包含所选的值。 返回值 String,Array 同理，对input元素赋值，需要： $(”#keyword”)[0].value = '';
jquery获取元素值（转） jQuery 2009-10-10 10:25:24 阅读147 评论0 字号：大中小订阅 jquery radio取值，checkbox取值，select取值，radio选中，checkbox选中，select选中，及其相关 获取一组radio被选中项的值 var item = $('input[name=items][checked]').val(); 获取select被选中项的文本 var item = $("select[name=items] option[selected]").text(); select下拉框的第二个元素为当前选中值 $('#select_id')[0].selectedIndex = 1; radio单选组的第二个元素为当前选中值 $('input[@name=items]').get(1).checked = true; 获取值： 文本框，文本区域：$("#txt").attr("value")； 多选框checkbox：$("#checkbox_id").attr("value")； 单选组radio：$("input[@type=radio][@checked]").val(); 下拉框select：$('#sel').val(); 控制表单元素： 文本框，文本区域：$("#txt").attr("value",'');//清空内容 $("#txt").attr("value",'11');//填充内容 多选框checkbox：$("#chk1").attr("checked",'');//不打勾 $("#chk2").attr("checked",true);//打勾 if($("#chk1").attr('checked')==undefined) //判断是否已经打勾 单选组radio：$("input[@type=radio]").attr("checked",'2');//设置value=2的项目为当前选中项 下拉框select：$("#sel").attr("value",'-sel3');//设置value=-sel3的项目为当前选中项$("").appendTo("#sel")//添加下拉框的option $("#sel").empty()；//清空下拉框
Jquery练习题2
单选： 1、下面哪一种不属于Jquery的选择器。（D） A：基本选择器B：层次选择器 C：表单选择器D：节点选择器 2、使用jquery检查元素在网页上是否存在。（B） A：if($("#id")) { //do someing... } B: if($("#id").length > 0) { //do someing... } C: if($("#id").length() > 0) { //do someing... } D: if($("#id").size > 0) { //do someing... } 3、新闻,获取元素title的属性值。（C） A：$("a").attr("title").val(); B：$("#a").attr("title"); C：$("a").attr("title"); D：$("a").attr("title").value; 4、执行下面语句 $(document).ready(function(){ $("#click").click(function(){ alert("click one time"); }); $("#click").click(function(){ alert("click two time"); });
}); 单击按钮，这个会有什么效果。（C） A：弹出一次对话框，显示click one time 。 B：弹出一次对话框，显示click two time 。 C：弹出两次对话框，依次显示click one time，click two time。D：js编译错误。 5、页面中有三个元素，如下：
jQuery获取Select选择的Text和 Value
一、jQuery获取Select选择的Text和Value:语法解释： 1.$("#select_id").change(function(){//code...}); //为Select添加事件，当选择其中一项时触发 2.varcheckText=$("#select_id").find("option:selected").text(); //获取Select选择的Text 3.varcheckValue=$("#select_id").val(); //获取Select选择的Value 4.varcheckIndex=$("#select_id ").get(0).selectedIndex; //获取Select选择的索引值 5.varmaxIndex=$("#select_idoption:last").attr("index"); //获取Select最大的索引值 二、jQuery设置Select选择的Text和Value:语法解释： 1.$("#select_id ").get(0).selectedIndex=1; //设置Select索引值为1的项选中 2.$("#select_id ").val(4); // 设置Select的Value值为4的项选中 3.$("#select_id option[text='jQuery']").attr("selected", true); //设置Select的Text值为jQuery的项选中 三、jQuery添加/删除Select的Option项：语法解释： 1.$("#select_id").append(""); //为Select追加一个Option(下拉项) 2.$("#select_id").prepend(""); //为Select插入一个Option(第一个位置) 3.$("#select_idoption:last").remove(); //删除Select中索引值最大Option(最后一个) 4.$("#select_id option[index='0']").remove(); //删除Select中索引值为0的Option(第一个) 5.$("#select_id option[value='3']").remove(); //删除Select中Value='3'的Option 6.$("#select_id option[text='4']").remove(); //删除Select中Text='4'的Option 四、获取值 1.jquery radio取值，checkbox取值，select取值，radio选中，checkbox选中，select选中，及其相关获取一组radio被选中项 的值var item = $('input[@name=items][@checked]').val(); 2.获取select被选中项的文本:var item = $("select[@name=items] option[@selected]").text(); 3.select下拉框的第二个元素为当前选中值:$('#select_id')[0].selectedIndex = 1; 4.radio单选组的第二个元素为当前选中值:$('input[@name=items]').get(1).checked = true; 5.文本框，文本区域：$("#txt").attr("value")； 6.多选框checkbox：$("#checkbox_id").attr("value")； 7.单选组radio：$("input[@type=radio][@checked]").val(); 8.下拉框select：$('#sel').val(); 五、控制表单元素： 1.文本框，文本区域：$("#txt").attr("value",'');//清空内容 2.$("#txt").attr("value",'11');//填充内容 3.多选框checkbox：$("#chk1").attr("checked",'');//不打勾 4.$("#chk2").attr("checked",true);//打勾 5.if($("#chk1").attr('checked')==undefined) //判断是否已经打勾 6.单选组radio：$("input[@type=radio]").attr("checked",'2');//设置value=2的项目为当前选中项 7.下拉框select：$("#sel").attr("value",'-sel3');//设置value=-sel3的项目为当前选中项 8.$("").appendTo("#sel")//添加下拉框的option 9.$("#sel").empty()；//清空下拉框 10.//遍历option和添加、移除option functionchangeShipMethod(shipping){ varlen = $("select[@name=ISHIPTYPE] option").length if(shipping.value != "CA"){ $("select[@name=ISHIPTYPE] option").each(function(){ if($(this).val() == 111){ $(this).remove(); } }); }else{ $("").appendTo($("select[@name=ISHIPTYPE]")); } } //取得下拉選單的選取值 $(#testSelectoption:selected').text(); 或$("#testSelect").find('option:selected').text(); 或$("#testSelect").val(); 六、下拉框: 1.var cc1 = $(".formc select[@name='country'] option[@selected]").text(); //得到下拉菜单的选中项的文本(注意中间有空格) 2.var cc2 = $('.formc select[@name="country"]').val(); //得到下拉菜单的选中项的值 3.var cc3 = $('.formc select[@name="country"]').attr("id"); //得到下拉菜单的选中项的ID属性值 4.$("#select").empty();//清空下拉框//$("#select").html(''); 5.$("").appendTo("#select")//添加下拉框的option 稍微解释: 1.select[@name='country'] option[@selected] 表示具有name 属性，并且该属性值为'country' 的select元素里面的具有selected 属 性的option 元素；可以看出有@开头的就表示后面跟的是属性。 2.单选框:
jQuery LigerUI 使用教程表格篇(1)模板
jQuery LigerUI 使用教程表格篇(1) ligerGrid是ligerui系列插件的核心控件，用户可以快速地创建一个美观,而且功能强大的表格,支持排序、分页、多表头、固定列等等 第一个例子 简介 ligerGrid是ligerui系列插件的核心控件，用户可以快速地创建一个美观,而且功能强大的表格,支持排序、分页、多表头、固定列等等。 支持本地数据和服务器数据(配置data或者url) 支持排序和分页(包括Javascript排序和分页) 支持列的“显示/隐藏” 支持多表头 支持固定列 支持明细行 支持汇总行 支持单元格模板 支持编辑表格(三种编辑模式,单元格编辑、行编辑、明细编辑) 支持树表格 支持分组 代码 首先引入基本的css和js文件 复制代码代码如下:
然后就可以使用liger Grid了 复制代码代码如下:
引入。 简单的jQuery示例jquery常用的选择器整理
jquery: 基本的选择器： $('#id').css('color','blue');//根据id属性为id，设置css样式颜色设置成蓝色 $('h2').css('background-color','pink'); $('input').css('width','500px'); $('.apple').css('background-color','lightgreen');//class属性值查找 $('*').css('background-color','gray');//通配符 $('h2,#usertel,#userqq').css('color','lightblue');//联合选择器 层次选择器： $('div span');//在div内部获得span节点，不考虑层次,只获得div内第一个span节点，，注意不考虑层次 $('div > span')//在div内部获得子元素span节点 $('div+span')//在div后边获得紧紧挨着的第一个兄弟关系的span节点，获得的是span节点 $('div~span')//在div后边后边获得全部兄弟关系的span节点 并且选择器： $('li').css('color','red'); $('li:first');//:first第一个 :last 最后一个 $('li:eq(3)').css('color','red')//eq(下标索引号码) 获得节点的下标索引值与给定索引值相等 gt(索引号) great than 节点索引值，大于某个范围 lt(索引值) less than 节点索引值，小于某个范围 $('li:gt(5)').css('background-color','pink'); $('li:lt(5)').css('background-color','orange'); :even 匹配到下标索引值为偶数的节点 :odd 匹配到下标索引值为奇数的节点
jQuery选择器种类
jQuery选择器种类 由于经常使用jQuery，但是其中的很多选择器又不太能够熟练记牢使用，所以趁着上周有人分享，我再仔细的把jQuery的选择器过一遍，争取一次拿下，以后做到运用自如。jQuery选择器主要来分可以分为三种：（1）基本选择器（2）层次选择器（3）过滤选择器(4) 表单选择器 1、基本选择器 基本选择器主要就是比较常见和常用的集中，是必须要掌握的。 #ID id选择器返回一个对象$("#div") .class类选择器返回集合$(".content") Element 标签选择器返回集合$("input") * 匹配所有元素返回集合$("*") selector1,selector2,selector3,....合并每个选择器匹配的元素，返回集合$("#div,.class,input") 2、层次选择器（主要是选择层次下面的元素） $("E F") 选择E元素中的所有F后代元素(注意：是子孙元素) 返回集合 $("P>C") 选择P元素下的C子元素（注意：是子元素）返回集合 $("P+N") 选择P元素后的相邻元素（即下一个兄弟元素），和$("P").next("N")方法执行效果相同 $("P~S") 选择P元素之后的所有S兄弟元素，和$("P").nextAll("S")方法执行效果相同，另pre()方法和next()方法相对。preAll()和nextAll()相对。 注意siblings()方法和nextAll()方法的区别：siblings()是所有前后的兄弟元素，nextAll()是所有后面的兄弟元素 第三和第四个选择器常常用后面的写法代替
jquery动态生成表格table
jquery动态生成表格table 动态生成table有很多好处，如：可以为指定列设置为图标或控件，可以为指定列或行添加指定事件（右键、双击等） 实现思路：客户端发送请求→服务端接收请求，从数据库获取数据到dataset，dataset转换为xml形式回发给客户端→客户端接收数据并给table动态添加行。 客户端代码：(列名按服务端返回的列名来定) function GetData() { $.ajax({ type: "GET", url: "../Page_Ajax/RS_OverView.aspx", dataType: "xml", success: function(xmldata) { $(xmldata).find("dt").each( function(index) { var otr = $("