jquery的介绍与使用
2012-11-30 20:57:17 来源:WEB开发网核心提示:$("标签或者id或者class :first-child")//查找标签或者id或者class节点下的第一个子元素$("标签或者id或者class :last-child")//查找标签或者id或者class节点下的第一个子元素$("标签或者id或者class :on
$("标签或者id或者class :first-child")//查找标签或者id或者class节点下的第一个子元素
$("标签或者id或者class :last-child")//查找标签或者id或者class节点下的第一个子元素
$("标签或者id或者class :only-child")//查找标签或者id或者class节点如果只有一个子元素,就返回
==========================表单选择器
input[type=checkbox]:checked").length//获取多选按钮的选中的个数
$("select>option:selected")//获取下拉选框选中的内容,一般用each遍历
==========================匹配选择器
$(":input")//返回值 集合元素 说明:匹配所有 input, textarea, select 和 button 元素
$(”:text”)//返回值 集合元素 说明: 匹配所有的单行文本框.
$(”:password”)//返回值 集合元素 说明: 匹配所有密码框.
$(”:radio”)//返回值 集合元素 说明: 匹配所有单选按钮.
$(”:checkbox”)//返回值 集合元素 说明: 匹配所有复选框
$(”:submit”)//返回值 集合元素 说明: 匹配所有提交按钮.
$(”:image”)//返回值 集合元素 说明: 匹配所有图像域.
$(”:reset”)//返回值 集合元素 说明: 匹配所有重置按钮.
$(”:button”)//返回值 集合元素 说明: 匹配所有按钮.这个包括直接写的元素button.
$(”:file”)//返回值 集合元素 说明: 匹配所有文件域.
$(”input:hidden”)//返回值 集合元素 说明: 匹配所有不可见元素,或者type为hidden的元素.这个选择器就不仅限于表单了,除了匹配input中的hidden外,那些style为hidden的也会被匹配.
注意: 要选取input中为hidden值的方法就是上面例子的用法,但是直接使用 “:hidden”的话就是匹配页面中所有的不可见元素,包括宽度或高度为0的,
==========================
=====创建节点元素
$("<p></p>")//标签怎么写就怎么写,注意自闭合标签的写法:<br/>
=====插入节点
$("#a").append($("#b"))//将后面的b节点添加到a节点上
$("#a").appendTo($("#b"))//将前面的a节点添加到b节点上
$("#a").after($("#b"))//将后面的b节点添加到a节点的后面
$("#a").before($("#b"))//将后面的b节点添加到a节点的前面
$("#a").insertAfter($("#b"))//将前面的a节点插入到b节点的后面
$("#a").insertBefore($("#b"))//将前面的a节点插入到b节点的前面
=====删除节点元素
remove()//删除节点元素,自身删除
empty()//删除所有的字节点,不删除属性节点
=====克隆节点元素
clone(boolean)//克隆一个节点,默认只克隆节点,不克隆事件,如果传入一个true就代表事件也同时克隆
=====替换节点元素
$("#a").repalaceWith($("#b"))//将a节点替换成b节点
$("#a").repalaceAll($("#b"))//将b节点替换成a节点
=====常用的基本方法
val()//获取节点元素的值
val("xxx")//改变节点元素的值
text()//获取节点对象的文本内容
text("abcd")//设置文本节点
attr("name")//获取name属性值
attr("name","zhangsan")//设置name属性值
removeAtt("name")//删除属性
==========================
-----.css('属性值','属性名')//设置样式
=====dom/jquery转换
-----$(dom对象)将dom对象装换成jquery对象
-----var name = $变量名[index] //将jquery转换成dom对象
-----jquery提供了一个get(index)方法将jquery转换成dom对象
-----$(document).ready(function(){});//所有页面中的内容加载完毕才执行//简写格斯:$().ready(function(){});
-----$(window).load(function(){})//一般不用
$("标签或者id或者class :last-child")//查找标签或者id或者class节点下的第一个子元素
$("标签或者id或者class :only-child")//查找标签或者id或者class节点如果只有一个子元素,就返回
==========================表单选择器
input[type=checkbox]:checked").length//获取多选按钮的选中的个数
$("select>option:selected")//获取下拉选框选中的内容,一般用each遍历
==========================匹配选择器
$(":input")//返回值 集合元素 说明:匹配所有 input, textarea, select 和 button 元素
$(”:text”)//返回值 集合元素 说明: 匹配所有的单行文本框.
$(”:password”)//返回值 集合元素 说明: 匹配所有密码框.
$(”:radio”)//返回值 集合元素 说明: 匹配所有单选按钮.
$(”:checkbox”)//返回值 集合元素 说明: 匹配所有复选框
$(”:submit”)//返回值 集合元素 说明: 匹配所有提交按钮.
$(”:image”)//返回值 集合元素 说明: 匹配所有图像域.
$(”:reset”)//返回值 集合元素 说明: 匹配所有重置按钮.
$(”:button”)//返回值 集合元素 说明: 匹配所有按钮.这个包括直接写的元素button.
$(”:file”)//返回值 集合元素 说明: 匹配所有文件域.
$(”input:hidden”)//返回值 集合元素 说明: 匹配所有不可见元素,或者type为hidden的元素.这个选择器就不仅限于表单了,除了匹配input中的hidden外,那些style为hidden的也会被匹配.
注意: 要选取input中为hidden值的方法就是上面例子的用法,但是直接使用 “:hidden”的话就是匹配页面中所有的不可见元素,包括宽度或高度为0的,
==========================
=====创建节点元素
$("<p></p>")//标签怎么写就怎么写,注意自闭合标签的写法:<br/>
=====插入节点
$("#a").append($("#b"))//将后面的b节点添加到a节点上
$("#a").appendTo($("#b"))//将前面的a节点添加到b节点上
$("#a").after($("#b"))//将后面的b节点添加到a节点的后面
$("#a").before($("#b"))//将后面的b节点添加到a节点的前面
$("#a").insertAfter($("#b"))//将前面的a节点插入到b节点的后面
$("#a").insertBefore($("#b"))//将前面的a节点插入到b节点的前面
=====删除节点元素
remove()//删除节点元素,自身删除
empty()//删除所有的字节点,不删除属性节点
=====克隆节点元素
clone(boolean)//克隆一个节点,默认只克隆节点,不克隆事件,如果传入一个true就代表事件也同时克隆
=====替换节点元素
$("#a").repalaceWith($("#b"))//将a节点替换成b节点
$("#a").repalaceAll($("#b"))//将b节点替换成a节点
=====常用的基本方法
val()//获取节点元素的值
val("xxx")//改变节点元素的值
text()//获取节点对象的文本内容
text("abcd")//设置文本节点
attr("name")//获取name属性值
attr("name","zhangsan")//设置name属性值
removeAtt("name")//删除属性
==========================
-----.css('属性值','属性名')//设置样式
=====dom/jquery转换
-----$(dom对象)将dom对象装换成jquery对象
-----var name = $变量名[index] //将jquery转换成dom对象
-----jquery提供了一个get(index)方法将jquery转换成dom对象
-----$(document).ready(function(){});//所有页面中的内容加载完毕才执行//简写格斯:$().ready(function(){});
-----$(window).load(function(){})//一般不用
更多精彩
赞助商链接