jQuery记录之选择器与属性

发布时间:2021-01-15编辑:脚本学堂
本文介绍了jquery中选择器、核心函数、页面载入方式等内容,需要的朋友参考下。

第二部分,jquery记录之选择器与属性等。

E、jQuery的页面载入方式:
 

复制代码 代码示例:
$(document).ready(callback);
 

$(document).ready(function() {});----->>>简化版:$(function(){});
(a.绑定一个在DOM文档载入完成后执行的函数;b.同一个页面上可以多次使用)
 
F、核心函数
$(expression,[context])
接收一个包含 CSS 选择器的字符串,然后用这个字符串去匹配一组元素;jQuery 的核心功能都是通过这个函数实现的。
$(html)根据提供的原始 HTML 标记字符串,动态创建由 jQuery 对象包装的 DOM 元素。
$(elements)将一个或多个DOM元素转化为jQuery对象  注意是jQuery对象,而不是DOM对象。如果我想得到DOM对象呢?很简单,只需在其后跟一个索引值(如[0])—因为它得到的是一个对象数组,即可得到DOM对象。然后就可以使用innerHTML、innerText等DHTML方法和属性了。
 
G、选择器
 

复制代码 代码示例:
返回jQuery对象
基本选择器*, class,element, id, selector1, selector2等.
层级选择器ancestor descendant, parent > child, prev + next , prev ` siblings
简单选择器even, odd, eq[index], last, first等
 
内容选择器contains[text], empty,  parent, has[selector]等.
可见性选择器hidden, visible.
属性选择器[attribute *=value], [attribute =value], [attribute]等
子元素选择器first-child, last-child, nth-child(index), only-child.
表单选择器button, checkbox, file, hidden等.
表单对象属性选择器checked, disabled, enabled, selected.
 

H、属性
attr(name):取得第一个匹配元素的属性值
attr(properties):将一个“名/值”形式的对象设置为所有匹配元素的属性
attr(key,value):为所有匹配的元素设置一个属性值
 
I、class
addClass(class):为每个匹配的元素添加指定的class
removeClass(class):从所有匹配的元素中删除全部或者指定的class
 
J、HTML
html():取得第一个匹配元素的html内容
html(val):设置每一个匹配元素的html内容【val为需要设置的值比如var val="test value"】
 
K、文本
text()、text(val)和HTML类似【只是html("<font color='red'>test value</font>");中的font标签不会显示在网页上,即显示的是 test value(字体为红);但是Text就是以纯文本的形式写出去,即在text("<font color='red'>test value</font>");网页显示的就是:<font color='red'>test value</font>.】
 
L、值
val():获得第一个匹配元素的当前值。
val(val):设置每一个匹配元素的值。
 
M、DOM文档处理
内部插入append(content), appendTo(content), prepend(content), prependTo(content).
外部插入after(content), before(content), insertAfter(content), insertBefore(content).
 
N、CSS
css(properties):把一个“名/值对”对象设置为所有匹配元素的样式属性,属性名包含 "-"的话,必须使用引号
css(name,value):在所有匹配的元素中,设置一个样式属性的值。
 
O、事件
页面载入事件
事件处理:bind , one , trigger, triggerHandler, unbind
交互处理:hover, toggle
事件:click, mouse event, keyboardevent等.
 
P、效果
 

复制代码 代码示例:
show():显示隐藏的匹配元素
show(speed,[callback]):以优雅的动画显示所有匹配的元素,并在显示完成后可选地触发一个回调函数
hide():隐藏显示的元素。
hide(speed,[callback]):以优雅的动画隐藏所有匹配的元素,并在显示完成后可选地触发一个回调函数
toggle() :切换元素的可见状态

Q、Ajax
 

复制代码 代码示例:
$.ajax(options)
$.get(”search.do”,{id:1},rend); function rend(xml){ alert(xml); } 
$.post(”search.do”,{id:1},rend); function rend(xml){alert(xml);} 
$(”#msg”).ajaxStart(function(){this.html(”正在载入..”);}); 
$(”#msg”).ajaxSuccess(function(){this.html(”加载完成!”); }); 


通过 HTTP 请求加载远程数据。