JQuery基础

1. 概念：一个javaScript框架，简化js开发。

2. 快速入门：

   1. 步骤：

      1. 下载jQuery

      2. JQuery文件里面，js文件和min.js文件区别：

         1. xxx.js : 开发版本。给程序员看的，有良好的缩紧
         2. xxx.min.js：生产版本。程序中使用，没有缩紧，体积小一下。程序加载更快

      3. 导入文件：导入min.js文件

      4. 使用JQuery：

         var div1 = $("#div1");
         alert(div1.html());
         

3. JQuer对象和JS对象区别与转换

   // 1.通过js方式获取名称叫div的所有html对象var divs = document.getElementsByTagName("div")alert(divs)  // 可以当作数组来使用//   对divs中所有div 让其标签体内容变为"aaa"for(var i = 0; i < divs.length;i++){divs[i].innerHTML = "aaa"}// 2.jq方式获取var $divs = $("div");  // 也可以当作数组使用alert($divs)//   对divs中所有div 让其标签体内容变为"bbb"$divs.html("bbb");
   

   1. 结论：
      1. JQuery对象操作更简单，
      2. JQ和JS对象方法不通用
      3. 两者需要相互转换
   2. JS对象转JQ对象： $(js对象)
   3. JQ对象转JS对象：jq对象[索引] 或者 jq对象.get(索引) 索引是因为$(“div”)获取的是数组

4. 基本语法学习

   1. 事件绑定：

       //	入口函数 jquery操作的事件绑定$("#b1").click(function (){//  给b1添加事件lert("abc")})
      

   2. 入口函数：

      // dom 入口函数window.onload = function (){$("#b1").click(function (){//  给b1添加事件alert("abc")})}//  jquery的入口函数（dom文档加载完成之后执行该函数中的代码）$(function (){$("#b1").click(function (){//  给b1添加事件alert("abc")})})
      /*** window.onload 和 $(function(){})区别* window.onload只能定义一次，因为其本质是一个函数对象，再次定义等于再次赋值，会覆盖之前* $(function())可以定义多次*/
      

   3. 样式：

      $(function (){$("#div1").css("background-color","red")$("#div2").css("backgroundColor","pink")
      })
      

5. 选择器：筛选具有相似特征的元素（标签）

   1. 基本选择器：

      1. 标签选择器（元素选择器）

         1. 语法：$(“html标签名”) 获得所有匹配标签名称的元素

      2. id选择器

         1. 语法：$(“#id的属性值”) 获得与指定id属性值匹配的元素

      3. 类选择器

         1. 语法：$(“.class的属性值”) 获得与指定的class属性值匹配元素

      4. 并集选择器

         1. 语法：$(“选择器1,选择器2”) 获得多个选择器选中的所有元素

         2. //	例子
            $("span,#two").css("background-color","pink")
            

   2. 层级选择器：

      1. 后代选择器（包括所有后代，子元素、孙元素、曾孙元素）
         1. 语法：$(“A B”) 选择A元素内部的所有B元素
      2. 子选择器（仅仅包括子元素，不包括孙元素以及更小的元素）
         1. 语法：$(“A > B”) 选择A元素内部的所有B子元素

   3. 属性选择器

      1. 属性名称选择器

         1. 语法：$(“A[属性名]”) 包含指定属性的选择器

         2. // 	选择有title属性的div元素背景设为粉红
            $("div[title]").css("background-color","pink")
            

      2. 属性选择器

         1. 语法：$(“A[属性名=‘‘值’’]”) 包含指定属性等于指定值的选择器

         2. //	选择有title属性并且值等于test的div背景设置为粉红
            $("div[title = 'test']").css("background-color","pink")//	选择没有title属性或者值不等于test的div元素背景设置为粉红
            $("div[title != 'test'][]").css("background-color","pink")//	选择title属性值以te开始的div元素背景设置为粉红
            $("div[title ^= 'te']").css("background-color","pink")//	选择title属性值以est结束的div元素背景设置为粉红
            $("div[title $= 'est']").css("background-color","pink")//	选择title属性值包含es值的div元素背景设置为粉红
            $("div[title *= 'es']").css("background-color","pink")
            

      3. 复合属性选择器

         1. 语法：$(“A[属性名=‘值’] [ ]…”)包含多个属性条件的选择器

         2. //	选取有属性id，并且属性值title值含有es的div元素背景设置为粉红
            $("div[id][title*='es']").css("background-color","pink")
            

   4. 过滤选择器

      1. 首元素选择器：

         1. 语法：A:first 获得选择的元素中的第一个元素

         2. //	改变第一个div的背景色为粉红
            $("div:first").css("background-color","pink")
            

      2. 尾元素选择器：

         1. 语法：A:last 获得选择的元素中的最后一个

         2. //	改变最后一个div的背景色为粉红
            $("div:last").css("background-color","pink")
            

      3. 非元素选择器：

         1. 语法：A:not（selector）不包括指定内容的元素

         2. //	改变class不为one的div的背景色为粉红
            $("div:not(.one)").css("background-color","pink")
            

      4. 偶数选择器：

         1. 语法：A:even 偶数 ，从0 开始计数

         2. //	改变索引值为偶数的div元素背景色为粉红
            $("div:even").css("background-color","pink")
            

      5. 奇数选择器：

         1. 语法：A:odd 奇数 ，从0开始计数

         2. //	改变索引值为奇数数的div元素背景色为粉红
            $("div:odd").css("background-color","pink")
            

      6. 等于索引选择器：

         1. 语法： A:eq(index) ，指定索引元素

         2. //	改变索引值等于3 的元素背景色为粉红
            $("div:eq(3)").css("background-color","pink")
            

      7. 大于索引选择器：

         1. 语法：A:gt(index)，大于指定索引元素

         2. //	改变索引值等于3 的元素背景色为粉红
            $("div:gt(3)").css("background-color","pink")	
            

      8. 小于索引选择器：

         1. 语法：A:lt(index) , 小于指定索引的元素

         2. //	改变索引值等于3 的元素背景色为粉红
            $("div:lt(3)").css("background-color","pink")
            

      9. 标题选择器：

         1. 语法： :header 获得标题元素，固定写法

         2. //	改变所有标题元素背景色为粉红色
            $(":header").css("background-color","pink")
            

   5. 表单过滤选择器

      1. 可用元素选择器

         1. 语法：enabled 获得可用元素

         2. //	利用JQuery对象的val（）方法改变表单内可用的元素值
            $("input[type=text]:enabled").val("aaa")
            

      2. 不可用元素选择器

         1. 语法：disabled 获得不可用元素

         2. //	利用JQuery对象的val（）方法改变表单内不可用的元素值
            $("input[type=text]:disabled").val("aaa")
            

      3. 选中选择器

         1. 语法：checked 获得单选/复选框选中的元素

         2. //	利用JQuery对象的length()获取复选框选中的个数
            $("input[typr=checkbox]:checked").length()
            

      4. 选中选择器

         1. 语法：selected 获得下拉框选中的元素

         2. //	利用JQuery对象的length()获取下拉框选中的个数
            $("select > option:selected").length
            //	注意：这里不是获取下拉列表的选中个数，而是获取其子元素option的选中个数
            

6. DOM操作

   1. 内容操作：

      1. html( ):获取/设置元素的标签体内容

         1. //	获取
            var html = $("#mydiv").html()
            //	设置
            $("#mydiv").html("aaa")
            

      2. text( ) :获取/设置元素的标签体纯文本内容

         1. //	获取
            var text = $("#mydiv").text()
            //	设置
            $("#mydiv").text("bbb")
            

      3. val( )：获取/设置元素的value属性值

         1. //	获取值
            var value = $("#myinput").val()
            //	设置值
            $("#myinput").val("李四")
            

   2. 属性操作：

      1. 通用属性操作：

         1. attr() : 获取/设置元素的属性

            1. //	获取北京节点的name属性值，
               var name = $("#bj").attr("name")
               //	设置值和新增值
               $("#hz").attr("name","hangzhou")
               

         2. removeAttr()：删除属性

            1. $("hz").removeAttr("name")
               

         3. prop( )：获取/设置元素属性值

            1. var checked = $("#hobby").prop("checked")
               

         4. removeProp( )：删除属性

         5. attr和prop区别：

            1. 如果操作的是元素的固有属性（非自定义属性），则建议使用prop
            2. 如果操作是自定义属性，建议使用attr

      2. 对class类属性操作：

         1. addClass( ) : 添加class属性值

         2. removeClass( ) ：删除class属性值

         3. toggleClass( ) : 切换class属性值

            1. toggleClass(“one”) : 判断如果元素对象上存在class=“one”则将属性值one删除掉。如果元素对象上不存在class等于one则添加。简单说：有就变成没有，没有就变成有。

         4. //	二者等价	，添加类属性
            $("#one").prop("class","second")$("#one").addClass("second")$("#one").removeClass("second")$("#one").toggleClass("second")
            

      3. 增删改查操作：

         1. append():父元素将子元素追加到末尾
            1. 对象1.append(对象2)：将对象2添加到对象1元素内部，并且在末尾
         2. prepend():父元素将子元素追加到开头
            1. 对象1.prepend(对象2)：将对象2添加到对象1元素内部，并且在开头