学习笔记--jQuery
jQuery的安装
引用Google CDN：
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
</script>
</head>
引用Microsoft CDN
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">
</script>
</head>
jQuery的语法
基础语法是：$(selector).action()
示例：
$(this).hide()
演示 jQuery hide() 函数，隐藏当前的 HTML 元素。
$("#test").hide()
演示 jQuery hide() 函数，隐藏 id="test" 的元素。
$("p").hide()
演示 jQuery hide() 函数，隐藏所有 <p> 元素。
$(".test").hide()
演示 jQuery hide() 函数，隐藏所有 class="test" 的元素。
文档就绪函数，防止文档在完全加载（就绪）之前运行 jQuery 代码：
$(document).ready(function(){
--- jQuery functions go here ----
});
或者
$(function(){
});
jQuery元素选择器
$("p") 选取 <p> 元素。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。
jQuery属性选择器
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
jQuery CSS选择器
把所有 p 元素的背景颜色更改为红色：
$("p").css("background-color","red");
jQuery 属性选择
$("p").attr("attr1", "string1");
$("p").attr("attr1");
jQuery 事件
| Event 函数 | 绑定函数至 |
|---|---|
| $(document).ready(function) | 将函数绑定到文档的就绪事件（当文档完成加载时） |
| $(selector).click(function) | 触发或将函数绑定到被选元素的点击事件 |
| $(selector).dblclick(function) | 触发或将函数绑定到被选元素的双击事件 |
| $(selector).focus(function) | 触发或将函数绑定到被选元素的获得焦点事件 |
| $(selector).mouseover(function) | 触发或将函数绑定到被选元素的鼠标悬停事件 |
jQuery 效果
隐藏、显示
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
$(selector).toggle();
淡入淡出
$(selector).fadeIn(speed,callback);
$(selector).fadeOut(speed,callback);
$(selector).fadeToggle(speed,callback);
$(selector).fadeTo(speed,opacity,callback);
滑动
$(selector).slideDown(speed,callback);
$(selector).slideUp(speed,callback);
$(selector).slideToggle(speed,callback);
动画
$(selector).animate({params},speed,callback);
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
停止动画
$(selector).stop(stopAll,goToEnd);
jQuery chaining（链接）
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
jQuery HTML
获取和设置
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容（包括 HTML 标记）
- val() - 设置或返回表单字段的值
添加元素
- append() - 在被选元素的结尾插入内容
- prepend() - 在被选元素的开头插入内容
- after() - 在被选元素之后插入内容
- before() - 在被选元素之前插入内容
var txt1="<p>Text.</p>"; // 以 HTML 创建新元素
var txt2=$("<p></p>").text("Text."); // 以 jQuery 创建新元素
var txt3=document.createElement("p"); // 以 DOM 创建新元素
txt3.innerHTML="Text.";
$("p").append(txt1,txt2,txt3); // 追加新元素
删除元素
- remove() - 删除被选元素（及其子元素）
- empty() - 从被选元素中删除子元素
$("p").remove(".italic");
获取并设置CSS类
- addClass() - 向被选元素添加一个或多个类
- removeClass() - 从被选元素删除一个或多个类
- toggleClass() - 对被选元素进行添加/删除类的切换操作
- css() - 设置或返回样式属性
$("h1,h2,p").addClass("blue");
$("#div1").addClass("important blue");
$("p").css("background-color");
$("p").css("background-color","yellow");
$("p").css({"background-color":"yellow","font-size":"200%"});
尺寸
- width()
- height()
- innerWidth()
- innerHeight()
- outerWidth()
- outerHeight()
outerWidth(true) 方法返回元素的宽度（包括内边距、边框和外边距）。
outerHeight(true) 方法返回元素的高度（包括内边距、边框和外边距）。
jQuery遍历
- parent() //所有父元素
- parents() //所有祖先元素
- parentsUntil() //到某元素之间的所有祖先元素
- children() //所有直接子元素
- find() //查找某一后代元素
- siblings() //所有同胞元素
- next() //下一同胞元素
- nextAll() //所有跟随的同胞元素
- nextUntil() //到某元素之间的所有同胞元素
- prev() //上一同胞元素
- prevAll() //所有前面的同胞元素
- prevUntil() //到某元素之间的所有同胞元素
$("span").parents();
$("span").parents("ul");
$("span").parentsUntil("div");
$("div").children("p.1");
$("div").find("span");
$("div").find("*"); //返回所有后代
过滤
first() 方法返回被选元素的首个元素。
last() 方法返回被选元素的最后一个元素。
eq() 方法返回被选元素中带有指定索引号的元素。
filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
not() 方法返回不匹配标准的所有元素。
jQuery AJAX方法
load()方法
$(selector).load(URL,data,callback);
$("#div1").load("demo_test.txt #p1");
$("button").click(function(){
$("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("外部内容加载成功！");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
});
Get/Post方法
$.get(URL,callback);
$("button").click(function(){
$.get("demo_test.asp",function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});
$.post(URL,data,callback);
$("button").click(function(){
$.post("demo_test_post.asp",
{
name:"Donald Duck",
city:"Duckburg"
},
function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});
ajax()方法
jQuery.ajax([settings]) //settings为用于配置 Ajax 请求的键值对集合。
$("#b01").click(function(){
htmlobj=$.ajax({url:"/jquery/test1.txt",async:false});
$("#myDiv").html(htmlobj.responseText);
});
$.ajax({
url: page,
data:{"name":value},
success: function(result){
$("#checkResult").html(result);
}
});
noConflict()方法
$.noConflict();
或
var jq = $.noConflict();
或
$.noConflict();
jQuery(document).ready(function($){
$("button").click(function(){
$("p").text("jQuery 仍在运行！");
});
});
数组操作
遍历
$.each( a, function(i, n){
document.write( "元素[" + i + "] : " + n + "<br>" );
})
去重
a.sort();
$.unique(a); //需先进行sort处理
是否存在
document.write($.inArray(9,a));
字符串操作
去除空白
$.trim(" Hello JQuery ");
JSON
$.parseJSON(Str);
JSON.parse(str);
eval();
