jquery01
什么是jquery？
jquery是js的一个轻量级的库，也可以说是js的框架，帮助我们封装了很多的js的方法，方便我们使用。
想要学习好jquery框架，就要明白以下两个对象：
DOM对象（文档对象模型）:指的是HTML页面的元素(标签)，通过dom对象可以使用js中的一些属性和方法。
jquery对象： 指的是通过jquery创建出来的，一些对象，通过jQuery对象可以使用jQuery Api中的一些方法。
注意：
DOM对象和jQuery对象，是不能相互调用的，列如DOM对象不能使用JQuery的方法，jQuery也不能使用js(javaScript)中的方法和属性！！！！！！！！
所以呀，不要在脑海里，把js和jquery分开
怎样使用jQuery？
1.下载相应的文件库
2.将jQuery的js文件拷贝到web的目录下
3.页面引入js文件(jquery的js)
<script type="text/javascript" src="js/jquery.min.js" /></script>
4.页面中载入jQuery
jQuery的入口的格式： (下面三个也叫做 等效代码 ，三个功能都是一样的)
格式一：
$(function(){ //常用
alert();
})
格式二:
JQuery(function(){
alert();
})
格式三:
window.JQuery(function(){
alert();
})
$符号 等价于jQeury，$其实就是jquery库中定义的一个全局变量，用于表示jQuery这个对象。
页面中启动jQeury，当页面中所有的元素都加载完成后，才会执行启动jQuery的代码，也就是说在$(function(){})里面写
代码时，页面的所有的其他元素都已经出现了
DOM 转换jQuery对象
使用$(DOM对象)方式，可以DOM对象转换成JQuery对象 doucment.getxxx返回的就是dom对象
jQuery对象的val()函数，等同于DOM对象的value属性
一般情况下，在命名jQuery对象时，为了与DOM对象进行区分，习惯性的以$开头
eg:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="/js/jquery.min.js" /></script>
<script type="text/javascript">
$(function(){
var v_dom = document.getElementById("name"); //得到的是dom对象
//alert(v_dom.value)
//将DOM对象转换成jQuery
var v_jquery = $(v_dom); //李银河
//alert(v_jquery.value) //结果为 underfine 因为Jquery对象不能使用DOM中的属性value
alert(v_jquery.val) //李银河
})
</script>
</head>
<body>
<input type="text" value="李银河" id ="name">
</body>
</html>
jQuery 转换DOM对象
根据id获取jQuery对象和获得dom对象的格式：
var v_jquery=$("#name"); // 得到的就是jquery对象
var v_document.getElementById("name"); //得到的就是DOM对象
j query获取对象的时候，其实是一个数组，数组的长度取决于jquery获取页面元素的个数，
这些数组中存放的元素是dom对象
v_dom=v_jquery[0] //将jquery对象转换乘DOM对象
jquery对象里面其实是一个数组，数组里装的全是dom对象！！！！！！！！！！！！！！！
$("标签") 将获取到所有指定标签的jquery对象。当然是多个对象，即为数组
由于jquery对象为数组，所以具有返回的长度的属性length
val $a = $("标签");
alert($a.length+"多少个标签");
$("#id标签").click(function(){ //为id的标签触发一个函数
$($a[0]).css("background","green"); //改变第一个标签的背景颜色
});
jQuery提供了非常丰富的选择器
什么是选择器：选择器就是获取页面元素的一种语法（工具），jQuery提供了丰富的元素选择器，
可以方便快捷的获取页面中的元素对象
选择器的类型：
基本:
#id
<div id="myDiv"> //html代码
$("#myDiv") //jQuery代码
element
.class
.
selector1,selector2,selectorN
层级
简单:
:first
:last
:even 基数
:odd 偶数
<tr><td>嗨</td><tr> //html代码 0
<tr><td>你好</td><tr> //html代码 1
<tr><td>哈哈</td><tr> //html代码 2
$("tr:odd") //匹配所有索引值为奇数的元素，从0开始
:eq(index) 是不是等于
:lt() 是不是小于
:gt() 是不是大于
内容
可见性
属性 (重点)
[attribute] 匹配包含给定属性的元素
子元素
表单
表单对象属性
注意:
id是不能重复的，如果页面中有多个id相同那么jQuery只会获取第一次出现的这个id作为jquery对象
.class
获取出来的jQuery是一个数组，如果直接使用jQuery会把数组中的第一个元素作为jQuery的对象使用
<head>
<title>Insert title here</title>
<script type="text/javascript" src="/js/jquery.min.js" /></script>
<script type="text/javascript">
$(function(){
alert($(".name").length) //2
//获取出来的jQuery是一个数组，如果直接使用jQuery会把数组中的第一个元素作为jQuery的对象使用
alert($(".name").val()) //张三
//如果想获取李四的话，需要根据索引获取到指定元素的位置的dom对象后，再转换成jquery对象，进行使用
alert($($(".name")[1]).val()) //李四
})
</script>
</head>
<body>
<input type="text" class="name" value="张三"><br>
<input type="text" class="name" value="李四">
</body>
选择器的类型之属性选择器------[attribute]
eg:
<script type="text/javascript">
$(function(){
alert($("[value]").length) //4 获取所有的value属性的元素
alert($(".name[value]").length) //获取所有class为name并且拥有的value属性页面的属性为3个
})
</script>
<body>
<div class="name">
<input type="text" class="name" value="李四">
</div>
<input type="text" class="name" value="王五">
<input type="text" class="name" value="赵六">
<a value="aa">连接</a>
</body>
jQuery——val属性/val(value)属性
val是对表单元素的数据进行获取
eg:
可以获取文本框，按钮，复选框，下拉列表，单选按钮等等.....
val() 获取
val(value) 赋值，修改val的内容 eg: $("#name").val("李四")
jQuery——html()
html(value)
text()
text(value)
html() 获取这个页面中所有的html代码
text() 获取这个元素的文本内容，不包含页面中的html代码
html(value) 设置一段html的代码到这里面，不带html的标签，(因为这是html编译后的内容)
text() 设置一段代码文本，带html的标签(因为它对html的代码不编译)
注意：
html编译前，有标签和文本。
html编译后，是没有标签，只有文本。
jQuery的属性-------addClass/removeClass
点击之后，div的颜色设置成了背景颜色
eg:
<style type="text/css">
.div1{background-color:red}
<style>
<script type="text/javascript" src="/js/jquery.min.js" /></script>
<script type="text/javascript">
$(function(){
alert("添加一个class到div")
$("#div1").addClass("div1")
alert("移除一个class")
$("div1").removeClass("div1")
})
</script>
</head>
<body>
<div id="div1">
这是div1
</div>
</body>
jQuery的属性-------attr
attr() 方法设置或返回被选元素的属性和值。
当该方法用于返回属性值，则返回第一个匹配元素的值。
当该方法用于设置属性值，则为匹配元素设置一个或多个属性/值对。
$(selector).attr(attribute) //返回属性的值：
$(selector).attr(attribute,value) //设置属性和值：
$(selector).attr(attribute,function(index,currentvalue)) //使用函数设置属性和值
$(selector).attr({attribute:value, attribute:value,...}) //设置多个属性和值：
参数: 描述:
attribute 规定属性的名称。
value 规定属性的值。
function(index,currentvalue) 规定要返回属性值到集合的函数
index - 接受集合中元素的 index 位置。
currentvalue - 接受被选元素的当前属性值。
eg:
$("button").click(function(){
$("img").attr("width","500");
});
jQuery的属性----------bind() 方法 向元素添加事件处理程序
$(selector).bind(event,data,function,map)
bind() 方法向被选元素添加一个或多个事件处理程序，以及当事件发生时运行的函数。
eg:
$("p").bind("click",function(){
alert("这个段落被点击了。");
});
