JQuer学习笔记

最新推荐文章于 2024-01-20 21:49:50 发布

蜗牛yzx

最新推荐文章于 2024-01-20 21:49:50 发布

阅读量119

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/weixin_45212025/article/details/105399945

版权

JQuery

1、概念

一个JavaScript的框架，可以简化JS的开发。

JavaScript的框架：本质上就是一些js文件，封装了js的原生代码而已，需要使用时进行调用即可

2、快速入门

1、下载JQuery

目前jQuery有三个大版本：
1.x：兼容ie678,使用最为广泛的，官方只做BUG维护，
功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日)

2.x：不兼容ie678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用 2.x，最终版本：2.2.4 (2016年5月20日)

3.x：不兼容ie678，只支持最新的浏览器。除非特殊要求，一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本。

jquery-xxx.js 和 jquery-xxx.min.js的区别
jquery-xxx.js：有符合规范的缩进、注释，方便程序员阅读，但体积较大，用于查看原码
jquery-xxx.min.js：无缩进无注释，不方便阅读，但是体积小，用于开发中使用
2、导入JQuery的js文件到项目的js目录下

3、使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简易的自定义js框架</title>
    <script src="js/jquery-1.8.3.min.js"></script>
</head>
<body>
    <div id="div1">div11111</div>
    <div id="div2">div22222</div>
    <div id="div3">div33333</div>
<script>
    //1、使用JQuery获取标签对象
    //注意：JQuery获取标签对象的方法，传入的是css选择器格式
    var div1 = $("#div1");
    var div2 = $("#div2");
    var div3 = $("#div3");

    //获取标签内容，使用的是html()方法
    alert(div1.html());
    alert(div2.html());
    alert(div3.html());

    function get(id) {
        return document.getElementById(id);
    }
</script>
</body>
</html>

3、和JS的区别和转换

1、jq对象在操作时，更加方便

2、jq和js的对象方法不通用

3、转换：

1、jq->js：jq对象[索引] 或 jq对象.get获取对象

2、js->jq：$(js对象)

4、选择器:筛选具有相似特征的元素(标签)

1、基本语法学习：

1、事件绑定

2、入口函数

3、样式控制

<script>
    //入口函数
    $(function () {
        //绑定事件
        var kick = $("#kick");
        kick.click(function () {
            alert(567);
        });
        //样式控制，两种写法
        //kick.css("font-size","30px");
        kick.css("fontSize","30px")
    })
    
    /*
    $(function()) 与 window.onload 的区别
    $(function())可以设置多次，而window.onload只能设置一次
    若多次设置window.onload，新的window.onload会覆盖之前的window.onload
     */
</script>

2、五种选择器

1、基本选择器

<script type="text/javascript">
   $(function () {
      //<input type="button" value="保存"  class="mini" name="ok"  class="mini"
      //<input type="button" value="改变 id 为 one 的元素的背景色为 红色"  id="b1"/>
      $("#b1").click(function () {
         $("#one").css("backgroundColor","red"); //id选择器
      });
      //<input type="button" value=" 改变元素名为 <div> 的所有元素的背景色为 红色"  id="b2"/>
      $("#b2").click(function () {
         $("div").css("backgroundColor","red"); //标签选择器
      });
      //<input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 红色"  id="b3"/>
      $("#b3").click(function () {
         $(".mini").css("backgroundColor","red"); //类选择器
      });
      //<input type="button" value=" 改变所有的<span>元素和 id 为 two 的元素的背景色为红色"  id="b4"/>
      $("#b4").click(function () {
         $("span,#two").css("backgroundColor","red"); //并集选择器
      });
   })
</script>

2、层级选择器

<script type="text/javascript">
   $(function () {
      //<input type="button" value="保存"  class="mini" name="ok"  class="mini" />
      //<input type="button" value=" 改变 <body> 内所有 <div> 的背景色为红色"  id="b1"/>
      $("#b1").click(function () {
         $("body div").css("backgroundColor","pink"); //后代选择器
      });
      //<input type="button" value=" 改变 <body> 内子 <div> 的背景色为 红色"  id="b2"/>
      $("#b2").click(function () {
         $("body > div").css("backgroundColor","pink"); //子选择器
      });
   });
</script>

3、属性选择器

<script type="text/javascript">
    $(function () {
        //<input type="button" value="保存"  class="mini" name="ok"  class="mini" />
        //<input type="button" value=" 含有属性title 的div元素背景色为红色"  id="b1"/>
        $("#b1").click(function () {
            $("div[title]").css("backgroundColor","yellow"); //属性名称选择器
        });
        //<input type="button" value=" 属性title值等于test的div元素背景色为红色"  id="b2"/>
        $("#b2").click(function () {
            $("div[title = 'test']").css("backgroundColor","yellow"); //属性选择器
        });
        //<input type="button" value=" 属性title值不等于test的div元素(没有属性title的也将被选中)背景色为红色"  id="b3"/>
        $("#b3").click(function () {
            $("div[title != 'test']").css("backgroundColor","yellow"); //属性选择器
        });
        //<input type="button" value=" 属性title值 以te开始 的div元素背景色为红色"  id="b4"/>
        $("#b4").click(function () {
            $("div[title ^= 'te']").css("backgroundColor","yellow"); //^=属性为以指定开头的选择器
        });
        //<input type="button" value=" 属性title值 以est结束 的div元素背景色为红色"  id="b5"/>
        $("#b5").click(function () {
            $("div[title $= 'est']").css("backgroundColor","yellow"); //$=属性为以指定结尾的选择器
        });
        //<input type="button" value="属性title值 含有es的div元素背景色为红色"  id="b6"/>
        $("#b6").click(function () {
            $("div[title *= 'es']").css("backgroundColor","yellow"); //*=属性为包含指定的选择器
        });
        //<input type="button" value="选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素背景色为红色"  id="b7"/>
        $("#b7").click(function () {
            $("div[id][title*='es']").css("backgroundColor","yellow"); //复合选择器
        });
    });
</script>

4、过滤选择器

<script type="text/javascript">
   $(function () {
      //<input type="button" value="保存"  class="mini" name="ok"  class="mini" />
      //<input type="button" value=" 改变第一个 div 元素的背景色为 红色"  id="b1"/>
      $("#b1").click(function () {
         $("div:first").css("backgroundColor","green");
      });
      //<input type="button" value=" 改变最后一个 div 元素的背景色为 红色"  id="b2"/>
      $("#b2").click(function () {
         $("div:last").css("backgroundColor","green");
      });
      //<input type="button" value=" 改变class不为 one 的所有 div 元素的背景色为 红色"  id="b3"/>
      $("#b3").click(function () {
         $("div:not(.one)").css("backgroundColor","green");
      });
      //<input type="button" value=" 改变索引值为偶数的 div 元素的背景色为 红色"  id="b4"/>
      $("#b4").click(function () {
         $("div:even").css("backgroundColor","green");
      });
      //<input type="button" value=" 改变索引值为奇数的 div 元素的背景色为 红色"  id="b5"/>
      $("#b5").click(function () {
         $("div:odd").css("backgroundColor","green");
      });
      //<input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 红色"  id="b6"/>
      $("#b6").click(function () {
         $("div:gt(3)").css("backgroundColor","green");
      });
      //<input type="button" value=" 改变索引值为等于 3 的 div 元素的背景色为 红色"  id="b7"/>
      $("#b7").click(function () {
         $("div:eq(3)").css("backgroundColor","green");
      });
      //<input type="button" value=" 改变索引值为小于 3 的 div 元素的背景色为 红色"  id="b8"/>
      $("#b8").click(function () {
         $("div:lt(3)").css("backgroundColor","green");
      });
      //<input type="button" value=" 改变所有的标题元素的背景色为 红色"  id="b9"/>
      $("#b9").click(function () {
         $(":header").css("backgroundColor","green");
      });
   });
</script>

5、表单过滤选择器

<script type="text/javascript">
    $(function () {
        //<input type="button" value="保存" class="mini" name="ok" class="mini"/>
        //<input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值" id="b1"/>
        $("#b1").click(function () {
            $("input[type='text']:enabled").val("Hello");
        });
        //<input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内不可用 <input> 元素的值" id="b2"/>
        $("#b2").click(function () {
            $("input[type='text']:disabled").val("World");
        });
        //<input type="button" value=" 利用 jQuery 对象的 length 属性获取复选框选中的个数" id="b3"/>
        $("#b3").click(function () {
           alert($("input[type='checkbox']:checked").length);
        });
        //<input type="button" value=" 利用 jQuery 对象的 length 属性获取下拉框选中的个数" id="b4"/>
        $("#b4").click(function () {
            alert($("select option:selected").length); //注意，选中的不是select而是select下的option，所以要嵌套使用子选择器
        });
    });
</script>

5、DOM操作

1、内容操作

<script>
    $(function () {
        // 获取myinput 的value值
        var myinput = $("#myinput").val();
        alert(myinput);
        // 获取mydiv的标签体内容
        var mydiv_html = $("#mydiv").html();
        alert(mydiv_html);
        // // 获取mydiv文本内容
        var mydiv_text = $("#mydiv").text();
        alert(mydiv_text);
    });
</script>

2、属性操作

1、通用属性操作

attr()/removeAttr() prop()/removeProp()

<script type="text/javascript">
   $(function () {
      //获取北京节点的name属性值
      var bj1 = $("#bj").attr("name");
      //alert(bj1);
      //设置北京节点的name属性的值为dabeijing
      $("#bj").attr("name","dabeijing");
      var bj2 = $("#bj").attr("name");
      //alert(bj2);
      //新增北京节点的discription属性 属性值是didu
      $("#bj").attr("discription","didu");
      var bj3 = $("#bj").attr("discription");
      //alert(bj3);
      //删除北京节点的name属性并检验name属性是否存在
      $("#bj").removeAttr("name");
      //获得hobby的的选中状态
      var flag = $("#hobby").prop("checked"); //false
      alert(flag);
      var flag2 = $("#hobby").attr("checked"); //undefined
      alert(flag2);
      
      /*
      prop和attr作用基本一致，但是有区别
      建议在操作标签固有属性时使用prop，在操作自定义标签时，使用attr
      如最后一题，checked是checkbox的固有属性，使用prop可以正常获取
      而使用attr则会无法获取
       */
   });
</script>

2、class属性操作

addClass()/removeClass()/toggleClass()

toggleClass(“Class属性值”)：动态判断目标对象上是否存在Class属性值等于该属性值，存在则删除，不存在则创建

<script type="text/javascript">
   $(function () {
      //<input type="button" value="采用属性增加样式(改变id=one的样式)"  id="b1"/>
      $("#b1").click(function () {
         $("#one").prop("class","second");
      });
      //<input type="button" value=" addClass"  id="b2"/>
      $("#b2").click(function () {
         $("#one").addClass("second");
      });
      //<input type="button" value="removeClass"  id="b3"/>
      $("#b3").click(function () {
         $("#one").removeClass("second");
      });
      //<input type="button" value=" 切换样式"  id="b4"/>
      $("#b4").click(function () {
         $("#one").toggleClass("second"); //存在删除，不存在添加
      });
      //<input type="button" value=" 通过css()获得id为one背景颜色"  id="b5"/>
      $("#b5").click(function () {
         var color = $("#one").css("backgroundColor");
         alert(color);
      });
      //<input type="button" value=" 通过css()设置id为one背景颜色为绿色"  id="b6"/>
      $("#b6").click(function () {
         var color = $("#one").css("backgroundColor","green");
      });
   });
</script>

3、CRUD操作

<script type="text/javascript">
    $(function () {
        // <input type="button" value="将反恐放置到city的后面"  id="b1"/>
        $("#b1").click(function () {
            $("#city").append($("#fk"));
        });
        // <input type="button" value="将反恐放置到city的最前面"  id="b2"/>
        $("#b2").click(function () {
            $("#city").prepend($("#fk"));
        });
        // <input type="button" value="将反恐插入到天津后面"  id="b3"/>
        $("#b4").click(function () {
            $("#tj").after($("#fk")); //在tj的after插入fk
        });
        // <input type="button" value="将反恐插入到天津前面"  id="b4"/>
        $("#b3").click(function () {
            $("#tj").before($("#fk")); //在tj的before插入fk
        });
    });
</script>

<script type="text/javascript">
   $(function () {
      // <input type="button" value="删除<li id='bj' name='beijing'>北京</li>"  id="b1"/>
      $("#b1").click(function () {
         $("#bj").remove(); //谁调用，删除谁
      });
      // <input type="button" value="删除city所有的li节点   清空元素中的所有后代节点(不包含属性节点)"  id="b2"/>
      $("#b2").click(function () {
         $("#city").empty(); //谁调用，清空谁
      });
   });
</script>

蜗牛yzx

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuer学习笔记

JQuery1、概念一个JavaScript的框架，可以简化JS的开发。 JavaScript的框架：本质上就是一些js文件，封装了js的原生代码而已，需要使用时进行调用即可2、快速入门 1、下载JQuery 目前jQuery有三个大版本： 1.x：兼容ie678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1...
复制链接

扫一扫