早期自学jQuery-一入门
本节目录：
----------①安装使用
----------②语法
----------③文档就绪函数
----------④选择器
一、安装使用（特别注意jQuery应当位于<head>标签中）
一般通过两种方法添加jQuery：
①jquery.com下载jQuery库；
②从cdn中载入jQuery库。例如：从微软载入
这是谷歌：
<head> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">
</script>
</head>
二、语法
通过jQuery选取HTML元素，并对它执行操作actions。选取（查询，jQuery）
基础语法：
$(selector).action();
$美元符号定义jQuery；
(selector)查询找打HTML元素；
action();对元素执行的操作。
举例：
$(this).hide() ---隐藏当前元素
$("div").hide() ---隐藏所有div标签元素
$(".class").hide() ---隐藏所有class="class"的元素
$("#id").hide() ---隐藏所有id="id"的元素
三、文档就绪函数
为了防止文档加载完之前就执行jQuery函数
因为文档未加载完执行代码可能会出错：
试图隐藏一个不存在的元素。即首先执行jQuery隐藏某个元素但该元素仍未加载；
获得未完全加载的图像大小
准备就绪函数
函数方法：
$(document).ready(function(){
//符合语句，声明jQuery，获取document文档。执行ready准备完毕时的代码
//函数写在括号中
} )
四、选择器
jQuery选择器分为三类选择器
①元素选择器
$("p")选取<p>元素
$(this)获取当前元素
$("ul li:first")获取每个ul的第一个li元素
$("div#q .a")选取id为q的div元素里所有class为a的元素
$("div.dot")获取所有class=dot的div元素
举例：
利用this选择器隐藏button元素
<head> <meta charset="utf-8"> <title>无标题文档</title> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $(this).hide(); }); }); </script> </head> <body> <button>点我</button> </body>
点击之前
，点击之后
按钮消失被隐藏
②属性选择器(属性写在[]中)
$("[href]")选择所有属性带有href的元素
$("[href='aa']")选择所有属性带有href的值等于"aa"的元素
$("[href!='bb']")选择所有属性带有href的值不等于"bb"的元素
$("[href$='.jpg']")选择所有属性带有href的值以".jpg"结尾的元素
举例：
点击src属性以.tmp结尾的元素，隐藏所有div元素
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"> </script> <script> $(document).ready(function(){ $("[src$='.tmp']").click(function(){ $("div").hide(); }) }); </script> </head> <body> <div>第一行</div> <img src="Y)IFIC8_FPB_3Y26CFDZCTC.tmp" /> <div>第二行</div> </body>
运行页面
点击tmp图片
所有div元素被隐藏了
③CSS样式选择器
$("p").css("background-color","red")为所有p元素的背景色改为红色
改变多个样式时
$("p").css({"propertyname":"value","propertyname","value"})
propertyname属性名称
举例：
点击div元素时对所有div元素添加红色背景
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"> </script> <script> $(document).ready(function(){ $("div").click(function(){ $("div").css("background","red"); }); }); </script> </head> <body> <div>第一行</div> <div>第二行</div> </body>
点之前的样式
点击之后的样式
