jQuery基础

文档就绪函数

$(document).ready(function(){
  // jQuery functions go here
});

选择器

元素选择器

$("p")        // 选取所有<p> 
$("p.intro")  // class为intro的<p>
$("p#demo")   // id为demo的<p>
$("ul li:first") // 每个ul的第一个li元素

属性选择器

$("[href]")         // 选取所有带href属性的元素
$("[href='#']")     // 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']")    // 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") // 选取所有 href 值以 ".jpg" 结尾的元素。

css选择器

$("p").css("background-color","red");

事件

多页面项目，尽量将jQuery函数放到独立文件

Event 函数	绑定函数至
$(document).ready(function)	将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function)	触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function)	触发或将函数绑定到被选元素的双击事件
$(selector).focus(function)	触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function)	触发或将函数绑定到被选元素的鼠标悬停事件

效果

显示和隐藏

$("p").hide(speed,callback);
$("p").show(speed,callback);
$("p").toggle(speed,callback); // 切换显示和隐藏模式

淡入淡出

滑动

动画与停止动画

动画中的callback用于确保动画执行完成后再执行回调函数

DOM操作

获取内容

$("#test").text() // 获取文本内容
$("#test").html() // 获取包括html的内容
$("#test").val() // 设置或返回表单字段的值
$("#test").attr("href") // 获取指定的属性值

设置内容和属性

// 即上面的方法内添加要设置的内容
// 上面方法添加属性（此处也支持对象格式设置多个属性）
$("#test").attr("href","http://www.w3school.com.cn/jquery");

回调函数

// 设置内容
$("#btn2").click(function(){
  // (index,原始值) 
  $("#test2").html(function(i,origText){
    return "Old html: " + origText + " New html: Hello <b>world!</b>
    (index: " + i + ")";
  });
});
// 设置属性同理
// 回调函数的返回值即想要设置的值

添加元素

1. $("#test").append() - 在被选元素的结尾插入内容（插入内部）
2. $("#test").prepend() - 在被选元素的开头插入内容
// 支持多行数据，多种类型
var txt1="<p>Text</p>";              // 以 HTML 创建新元素
var txt2=$("<p></p>").text("Text");  // 以 jQuery 创建新元素
var txt3=document.createElement("p");
txt3.innerHTML="Text";               // 通过 DOM 来创建文本
$("body").append(txt1,txt2,txt3);

3. $("#test").after() - 在被选元素之后插入内容（同级插入）
4. $("#test").before() - 在被选元素之前插入内容

删除元素

// 支持接收参数，对被删元素进行过滤
/// eg：删除italic类 remove(".italic");
$("#test").remove() - 删除被选元素（及其子元素）
$("#test").empty() - 从被选元素中删除子元素

设置CSS

addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性
	返回样式属性.css('属性名')
	设置样式.css('属性名',值) 设置多个样式.css({"属性":"值",...})

尺寸

// 获取和设置尺寸
width() 
height() - 纯content
innerWidth()
innerHeight() - content+padding
outerWidth()
outerHeight() - 除margin外所有

JQ遍历

向上遍历

parent() // 直接父元素
parents() // 全部父元素（参数作用为筛选元素）
parentsUntil() // 两个元素之间的元素
// eg：$("span").parentsUntil("div"); -span和div之间的所有元素

向下遍历

children() // 直接子元素
// eg：$("span").parentsUntil("div"); -类名为1的所有p元素，且是<div>的直接子元素
find("参数") // 返回满足参数的所有后代
find("*") // 返回所有后代

同胞遍历

siblings() // 返回被选元素的所有同胞元素
// 向下
next() // 下一个同胞元素
nextAll() // 后面的所有同胞元素
nextUntil() // 两者之间所有同胞元素
// 向上，效果同上
prev()
prevAll()
prevUntil()

过滤（筛选）

first() // 选取第一个元素 不论级别
// eg：$("div p").first(); -首个 <div> 元素内部的第一个 <p> 元素
last() // 选取最后一个元素 不论级别
eq(num) // 选取指定元素 参数为索引（从0开始）
filter() // 自定义标准
// eg：$("p").filter(".intro"); -带有类名 "intro" 的所有 <p> 元素：
not() // 与filter()相反，排除

Ajax

load()

$(selector).load(URL,data,callback);
// - selector： 选择器
// - URL: 希望加载的url
// - data： 查询参数
// - callback：load完成后执行函数

// eg：$("#div1").load("demo_test.txt #p1");
// 将demo_test.txt文件中id="p1"的内容，加载到<div id="div1">中

/* callback中的参数 */
function(responseTxt,statusTxt,xhr)
// responseTxt - 包含调用成功时的结果内容
// statusTXT - 包含调用的状态
// xhr - 包含 XMLHttpRequest 对象

get()&post()

$.get(URL,callback);
$.post(URL,data,callback);
/* callback参数 */
function(data,staus)