jQuery学习笔记
很多时候,都会很头疼如何选择一个或几个HTML里的元素,下面是一些最基本的用法:
jQuery 元素选择器
$(this) 当前 HTML 元素
$("p") 选取 <p> 元素。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取 id="demo" 的第一个 <p> 元素。
$("ul li:first") 每个 <ul> 的第一个 <li> 元素
$("div#intro .head") id="intro" 的 <div> 元素中的所有 class="head" 的元素
$("p:first") 第一个 <p> 元素
$("tr:odd") 所有奇数 <tr> 元素
$("ul li:eq(3)") 列表中的第四个元素(index 从 0 开始)
$("ul li:lt(3)") 列出 index 小于 3 的元素
$("input:not(:empty)") 所有不为空的 input 元素
$(":header") 所有标题元素 <h1><h2>...
$(":contains(‘W3School‘)") 包含文本的所有元素
jQuery 属性选择器
$("[href]") 选取所有带有 href 属性的元素。
$("[href=‘#‘]") 选取所有带有 href 值等于 "#" 的元素。
$("[href!=‘#‘]") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$=‘.jpg‘]") 选取所有 href 值以 ".jpg" 结尾的元素。
$(":checked") 所有被选中的 input 元素
jQuery CSS 选择器
$("p").css("background-color","red");
更高级的请参照这里:
http://w3school.com.cn/jquery/jquery_ref_selectors.asp
jQuery 名称冲突(这个还是挺好玩的):
var jq=jQuery.noConflict(),用jq来代替 $ 符号。
(当 HTML 文档就绪可用)
$(selector).click(function) 被选元素的点击事件
$(selector).dblclick(function) 被选元素的双击事件
$(selector).focus(function) 被选元素的获得焦点事件
$(selector).mouseover(function) 被选元素的鼠标悬停事件
更多事件,请参照:
http://w3school.com.cn/jquery/jquery_ref_events.asp
hide()
show()
slideToggle()来回显示=显示/隐藏
fadeTo("slow",0.25)后面加速度和程度
fadeOut()
fadeIn()(其中fadeIn需要把要显示的内容display:none)
slideDown(其中slideDown需要把要显示的内容display:none)
slideUp
animate({width:300},"slow");参数是{属性:值},"速度"
也可以传多个参数,比如:
animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"},3000);
属性包括:(位置不变)width,length,(运动型)left,top,fontSize
其中都可以加数字,表示毫秒数
注:HTML 元素默认是静态定位,且无法移动。
如需使元素可以移动,请把 CSS 的 position 设置为 relative 或 absolute。
可以设置一个效果结束之后再执行下一个函数,如下:
$("p").hide(1000,function(){
alert("The paragraph is now hidden");
});
$("p").html("Google");html() 函数改变所匹配的 HTML 元素的内容(innerHTML)。
$("p").append(" Google");在p标签后面加上Google,也可以写<b>Google</b>(在p标签里面)跟prepend用法相同
$("p").after(" Google.");在p标签后面加上Google,(在p标签外面)
还有几个常用的:addClass()添加类;remove()移除元素;wrap()把匹配的元素用指定的内容或元素包裹起来;val()设置或返回匹配元素的值。
更多文档方法,请参阅:
http://w3school.com.cn/jquery/jquery_ref_manipulation.asp
jQuery CSS:
$("p").css("background-color","yellow");
$("p").css({"background-color":"yellow","font-size":"200%"});
获得id为abc的width属性的css
$("#abc").html($(this).css("width"));
定义高度:
$("#abc").height("200px");
$("#abc").width("200px");
导入txt里面的内容
$(‘#abc‘).load(‘/jquery/test1.txt‘)
比较常用的Ajax技术:
$(selector).load(url,data,callback) 把远程数据加载到被选的元素中
$.ajax(options) 把远程数据加载到 XMLHttpRequest 对象中
$.get(url,data,callback,type) 使用 HTTP GET 来加载远程数据
$.post(url,data,callback,type) 使用 HTTP POST 来加载远程数据
$.getJSON(url,data,callback) 使用 HTTP GET 来加载远程 JSON 数据
$.getScript(url,callback) 加载并执行远程的 JavaScript 文件