什么是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("这个段落被点击了。"); });
转载于:https://www.cnblogs.com/PinkPink/p/8385416.html
