1. jQuery核心函数
jQuery也可写$,通常情况下$可能会与其他框架中的对象冲突(php有$的用法),所以如果所用的框架没有$的用法,jQuery可用$代替
(1)$(document).ready() 一般缩写为$(),参数为回调函数,文档就绪时触发,要优先于onload触发
① $(document).ready(function () {});
② $( function () {});
(2)jQuery(elements) 将一个或多个dom对象转换为jQuery对象
$(document.getElementById("txtName"))
(3)根据提供的原始 HTML 标记字符串,动态创建由 jQuery 对象包装的 DOM 元素。
① $("<input type='checkbox'>").appendTo("body")
② $("<input>", { type: 'textfield' }).appendTo("body")
(4)检索器(多个检索条件同时满足时,检索表达式直接连接;满足其中某个时,检索表达式用", "连接。如[name="text"].divClass结果为样式为divClass且name为text的元素)
以下结合例子分析检索器的用法(为了简单叙述,检索结果用ID代替Dom元素)
Demo,有这样一段html代码,id从0-8,有div元素及span元素:
<div id="0" class="divClass">
<span id="1" title="this is a span">
<div id="2">value2</div>
</span>
</div>
<span id="3">3value</span>
<div id="4">
<div id="5"></div>
<div id="8"></div>
<span id="6"></span>
<div id="7"></div>
</div>
普通检索
① $("#id"): 根据给定的ID匹配一个元素。
和js的document.getElementById("")功能差不多,但也有区别:$获取到的是i指定id的jQuery对象,后者获取到的是dom对象 但$("#3")[0]与document.getElementById("3")指的都是id为3的dom对象
$("#3")获取的结果即为 3
② $("dom元素名"):根据给定的元素名匹配所有元素
和js的document.getElementByTagName ("")功能类似
$("span")获取的结果即为 1、3
③ $(".class样式名"): 根据给定的样式匹配元素。
$(".divClass")获取的结果即为 0
④ $("*") :匹配所有元素。结果为 0、1、2、3、4、5、6、7、8
层级
① $("div div"): 在给定的祖先元素下匹配所有的后代元素。
结果为 2、5、7、8
② $(" div>div "):在给定的父元素下匹配所有的子元素啊
结果为 5、7、8
③ $("div+div"):匹配所有紧接在 div 元素后的 div 元素。
结果为8
④ $("div~div") :匹配 div 元素之后的所有 div (同级) 元素。
结果为 4、7、8
简单(该组检索表达式中,用到索引的都不考虑是否同级,索引依据出现的先后顺序)
① $("div:first") 匹配找到的第一个元素
结果为0
如果将例子该为:
<span id="1" title="this is a span">
<div id="2">value2</div>
</span>
<div id="0" class="divClass">
</div>
则修改后的例子结果为 2
② $("div:last") 匹配找到的最后一个元素
结果为 7
③ $(" div:not(:first)") //返回除第一个div以外的所有div
not的用法:如$("div>:not(span)");该例子表示不含有span节点的div节点集合,因为0和4都包含span节点,所以结果为5,7,8
④ $(" div:even") 匹配所有索引值为偶数的元素,从 0 开始计数
结果为0、4、8
⑤ $(" div:odd") 匹配所有索引值为奇数的元素,从 0 开始计数
结果为 2、5、7
⑥ $(" div:eq(3)") 匹配一个给定索引值的元素 eq: equal
结果为5
⑦ $(" div:gt(3)") 匹配所有大于给定索引值的元素 gt:greater than
结果为8、7
⑧ $(" div:lt(3)") 匹配所有小于给定索引值的元素 lt:less than
结果为0、2、4
内容:
① $("div:contains('value')") 匹配包含给定文本的元素
结果为0、2 innerText.indexOf("value")>=0及[title*="value"]类似,区别在于,*=只能检索属性,contains检索元素包含的所有文本,注意检索的范围为元素的文本
② $("div:has(div)") 匹配所有包含 p 元素的 div 元素
查找方式类似于层次查找的"div div",区别在于,"div div"结果是子节点,has结果是父节点,例子结果为0、4
$("div:has(span[title$='span'])~div>div");选择器也可以像xpath一样方便
上述例子可翻译为:含有span子元素且子span节点的title属性文本为"span"结尾的div元素之后(同级)的div元素的div子元素
猛一看,罗里吧嗦的描述那么长,感觉用处不是很大,其实页面html内容庞大的情况下,查找符合某些条件的集合会很方便
③ $("div:empty") 查找所有不包含子元素或者文本的空元素
结果:5、8、7
可见性
① $("input:visible") 查找所有可见的input元素
② $("tr:hidden") 匹配所有的不可见元素,input 元素的 type 属性为 "hidden" 的话也会被匹配到
属性检索
① $("div[id]") 查找所有含有 id 属性的 div 元素
② $("input[name='newsletter']") 查找所有 name 属性是 newsletter 的 input 元素
③ $("input[name!='newsletter']") 查找所有 name 属性不是 newsletter 的 input 元素
④ $("input[name^='news']") 查找所有 name 以 'news' 开始的 input 元素
⑤ $("input[name$='letter']") 查找所有 name 以 'letter' 结尾的 input 元素
⑥ $("input[name*='man']") 查找所有 name 包含 'man' 的 input 元素
⑦ $("input[id][name$='man']") 找到所有含有 id 属性,并且它的 name 属性是以 man 结尾的
子元素
① nth-child(even)/:nth-child(odd)/:nth-child(3n)/:nth-child(2)/:nth-child(3n+1)/:nth-child(3n+2) 匹配其父元素下的第N个子或奇偶元素
② $("div:first-child") 查找属于父节点的第一个子节点的div元素
结果为 0、2、5
③ $("div:last-child") 查找属于父节点的最后子节点的div元素
结果为2、4、7
④ $("div:only-child") 查找属于父节点的唯一子节点的div元素
表单
① $(":input") 查找所有的input元素
$(":input")与$("input")的区别:
//:input表示选择表单中的input,select,textarea,button元素,input仅仅选择input元素
② $("text") 匹配所有的单行文本框
③ $(":password") 匹配所有密码框
④ $("radio") 匹配所有单选按钮
⑤ $("checkbox") 匹配所有复选框
⑥ $("submit") 匹配所有提交按钮
⑦ $("image") 匹配所有图像域
⑧ $("button") 匹配所有按钮
⑨ $("file") 匹配所有文件域
⑩ $("hidden") 匹配所有不可见元素,或者type为hidden的元素
表单对象属性
① $("input:checked") 匹配所有选中的被选中元素(复选框、单选框等,不包括select中的option)
② $("input:enabled") 匹配所有可用元素
③ $("input:disabled") 匹配所有不可用元素
④ $("select option:selected") 匹配所有选中的option元素
(5)属性操作
① 操作样式(class)
方法名addClass,removeClass,toggleClass
特殊用法toggleClass:如果存在(不存在)就删除(添加)一个样式
当方法传递两个参数的时候,第二个参数为布尔表达式,布尔表达式为true时添加样式,布尔表达式为false时删除样式,如:
var b = true;
$("input").click(function () {
//情况一:$(this).toggleClass("ccc");
//情况二:
b = !b;
$(this).toggleClass("ccc", b);
});
② 样式操作2(style)
方法名css,参数分为3种情况
Ø 传递一个参数,且为string类型,这样会返回该样式值,如
$("input").css("background-color")
Ø 传递两个参数,分别为key\value,为dom元素样式赋值,如
$("input").css("color","blue")
Ø 传递一个参数,为json对象,会对json的键逐一赋值,如
$("input").css({color:"blue",background:"red"})
③ 操作属性
属性操作方法名:attr,removeAttr
方法attr参数有4种情况:
Ø 只传属性名,返回该jQuery元素的属性值(注意如果查找到多个元素,则返回第一个元素的属性),如$("input").attr("title")返回的是第一个input的title
Ø 传递两个参数,且第二个参数为值时,为dom元素属性赋值,如
$("input").attr("title", "这是一个文本框")
Ø 传递两个参数,且第二个参数为function,为dom元素属性赋函数计算值,如
$("input").attr("title", function () { return "这是一个文本框"})
Ø 传递一个参数,且为json对象时,会对json的键逐一赋值,如
$("input").attr({ title: "this the title",value:"this the value" })
④ html 文本 值
这三类操作一致
获取内容为$("input").html/text/val()
设置时为$(" input ").html/text/val("内容")
$("input").val 等于input.attr("value")