jQuery-学习笔记（1）（北风网-娄景亮）
jQuery：
（jQuery 版本分：V1.0 、V2.0（不再支持IE6/7/8））
1、函数自执行：
<script type="text/javascript"> //定义函数 function selfRun() { console.info("hello"); } //调用或执行 selfRun(); //函数自执行 (function selfRun() { console.info("hello"); })(); //函数自执行,带参数 (function selfRun(name) { console.info("hello" + name); })("world!"); </script>
2、可以写$来使用jQuery的原因：
window.jQuery = window.$ = jQuery;
jQuery自执行函数初始化时，已经把jQuery赋值给了window.jQuery 和window.$ 变量；
3、jQuery 和 javascript 开始执行函数的区别：
//当dom元素加载完毕之后开始执行函数
$(document).ready(function () {
$("#content").val("hello jquery");
});
//当dom元素和资源文件加载完毕之后才开始执行函数
window.onload = function () {};
一、选择器：
1、基本选择器：
1.1 ID选择器：$("#id") 根据元素id查询，
相当于： document.getElementById("id");
1.2 元素选择器： $("div") 根据元素名查询，
相当于：document.getElementByTagName("div");
1.3 类选择器：$(".myClass") 根据class名属性查询，返回所有 class = "myClass" 的元素；
1.4 返回所有元素：$(" * ")，多用于结合上下文搜索；
1.5 多条件选择器：$(" div , span ,p.myClass") , 返回所有查到的元素；
2、层次选择器：
2.1 后代选择器：
$("form div") :在给定的祖先元素下匹配所有后代元素；
2.2 parent > child 子代选择器 ：只设置它儿子的，不设置孙子的，
$("form > div ") : 在给定的父元素下匹配所有子元素
2.3 prev + next ：
$("lable + input") : 匹配所有紧接在prev后的next元素（紧相邻的且只一个）；
2.4 prev ~siblins :
$("form~ div ") : 匹配 prev 元素之后的所有siblings （兄弟级）元素（在匹配之后的元素，不包括该元素在内）
3、过滤器：
3.1 :first 选取第一个元素。$("div:first")选取第一个<div> $(".warn:first");
3.2 :last 选取最后一个元素。$("div : last")选取最后一个<div>;
3.3 :not(选择器) 选取不满足“选择器”条件的元素，
$("input : not(.myClass)")选取样式名不是myClass的<input>;
3.4 :even 、 :odd, 选取索引是偶数、奇数的元素 ： $("input : even ") 选取索引是奇数的<input>;
3.5 :eq(索引序号)、 :gt(索引序号)、 :lt（索引序号）选取索引等于、大于、小于索引序号的元素，比如$("input : lt(5)") 选取索引小于5的<input> ;
$("tr:gt(1):lt(5)")组合选择器是按照表达式从前向后进行数据过滤；
3.6 slice(start,end) 获取下标范围内元素；
二、jQuery语法：
1、ready方法：
<script type = "text/javascript"> //完整写法：为 document 对象 添加一个 ready 事件方法 //在dom树加载完毕后执行 $(document).ready( function(){ alert("加载完毕！"); }); $( function(){ alert("加载完毕！"); }); //和window.onload区别在于，window.onload要等页面每个资源加载完毕后才执行； </script>
2、基于dom操作：
<script style="text/javascript"> $( function () { //1.1、使用html()方法读取或者设置元素的innerHTML; //设置innerHTML $("#div1").html("<p>hello jquery</p>"); //获取innerHTML var dhStr = $("#div1").html(); console.info(dhStr); //1.2、使用text()方法读取或者设置元素的innerText; //设置innerText $("#div1").text("hello jquery"); //获取innerText var dtStr = $("#div1").text(); console.info(dtStr); //1.3使用attr()方法读取或者设置元素的属性，对于jQuery没有封装的属性（所有浏览器没有差异的属性）用attr进行操作； var imgSrc = $("#img1").attr("src"); //获取图片的src属性值； $("#linkTo").attr("href", "http://www.baidu.com"); //设置 超链接的 href 属性值； console.info(imgSrc); //1.4 使用removeAttr("href")删除属性； $("#linkTo").removeAttr("href"); //1.5 样式操作：操作dom元素的style属性； $("#div1").css("color", "red"); //设置div1的style属性的背景颜色项； var divBg = $("#div1").css("color"); //获取div1的style属性的背景颜色项； console.info(divBg); }); </script>
2.1 dom操作栗子：
a、链式编程：（因为很多jquery 方法直接返回 当前的 jquery对象，所以可以接着 . 出方法！）
1. 不返回 jquery 对象的方法：val(),html(),text(),attr(),返回文本字符串；
2. 返回新的jquery对象的方法：next() nextAll() parent() childern() prev()....
3.剩下基本都是返回当前jquery对象；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>基于dom操作</title> <style type="text/css"> #divDemo { border: 1px solid #0094ff; } </style> <script src="../js/jquery-1.11.0.min.js"></script> <script type="text/javascript"> $(document).ready(function () { //1.根据ID得到一个jQuery对象 var $jqDiv = $("#divDemo"); //2.动态设置div的样式 //$jqDiv.css("border", "1px solid #0094ff") // .css("width","300px") // .css("height","100px"); //3.一次性设置多个样式 //对象的自变量表示法，Json对象 var cssObj = { "border": "1px solid #0094ff", "width": "300px", "height": "100px", "background-color": "red" }; $jqDiv.css(cssObj); //4.设置dom元素的动画 //创建一个按钮 $("<input type='button' value='动画1' />").insertAfter($jqDiv) .click(function () { //$jqDiv.slideUp(3000); //将这个div慢慢的收起来； $jqDiv.fadeOut(3000); //淡入； }); $("<input type='button' value='动画2' />").insertAfter($jqDiv) .click(function () { $jqDiv.fadeIn(3000); //淡出； }); }); </script> </head> <body> <div id="divDemo">hello jquery</div> </body> </html>
3、jQuery对象：
