2019-06-10 学习日记 day31 JQ

JQ

jQuery是一个快速，简洁的javascript框架，是继Prototype之后有一个优秀的javascript代码块（或javascript框架）

jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装javascript常用的功能代码，提供一种简便的javascript设计模式，优化HTML文档的操作，时间处理，动画设计和Ajax交互

jQuert的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口，具有高效灵活的css选择器，并且可对css选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jquery兼容各种主流浏览器

如：IE 6.0+ FF 1..5+ Safari 2.0+

Jquery的作用

　　将页面的js代码和HTML页面代码进行分离

JQ和JS之间的转换

　　JQ对象，只能调用JQ的属性和方法

　　JS对象只能调用JS的属性和方法

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript" src="../../js/jquery-1.11.0.js"></script>
        <script>
            
        
        function changeJs(){
            var div =document.getElementById("div1");
            //div.innerHTML = "成功了";
            $(div).html("2");
        }
        $(function(){
            $("#btn2").click(function(){
                var div =$("#div1");
                var jsdiv = div.get(0);
                jsdiv.innerHTML = "1";
            })
        })
        </script>
    </head>
    <body>
        <input type="button" value="js" onclick="changeJs()"/>
        <input type="button" value="js" id="btn2"/>
        <div id="div1">111111111111111</div>
    </body>
</html>

案例

JQuery选择器

让我们能够更加精确找到我们要操作的元素

基本选择器

　　ID选择器

　　类选择器

　　元素选择器 -标签名称

　　通配符选择器　-*　

　　选择器，选择器

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="../../css/style.css" />
        <script type="text/javascript" src="../../js/jquery-1.11.0.js"></script>
        <script>
            $(function(){
            //ID选择器
            $("#btn1").click(function(){
                $("#two").css("background-color","red");
            })    
            //类选择器
            $("#btn2").click(function(){
                $(".mini").css("background-color","palegreen");
            })
            //标签选择器
            $("#btn3").click(function(){
                $("div").css("background-color","palegreen");
            })
            
            $("#btn4").click(function(){
                $(".mini,span").css("background-color","palegreen");
            })
            })
        </script>
    </head>
    <body>
        <input type="button" value="找出id为two的元素" id="btn1"/>
        <input type="button" value="找出id为two的元素" id="btn2"/>
        <input type="button" value="div"" id="btn3"/>
        <input type="button" value="选择器1和2" id="btn4"/>
        <br />
        <div id="one">
            <div class="mini">1-1</div>
        </div>
        <div id="two">
            <div class="mini">2-1</div>
            <div class="mini">2-2</div>
        </div>
        <div id="three">
            <div class="mini">3-1</div>
            <div class="mini">3-2</div>
            <div class="mini">3-3</div>
        </div>
        <span id="three">
            span
        </span>
        
    </body>
</html>

案例

层选择器

　　子元素选择器：选择器1 > 选择器2

　　后代选择器：选择器1

　　相邻选择器：选择器1+选择器2 ：相邻的一个

　　找出所有选择器：选择器1 ~ 选择器2：找出所有的选择器

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="../../css/style.css" />
        <script type="text/javascript" src="../../js/jquery-1.11.0.js"></script>
        <script>
            $(function(){
            
            $("#btn1").click(function(){
                $("body > div").css("background-color","red");
            })    
            
            $("#btn2").click(function(){
                $("body div").css("background-color","red");
            })    
            
            $("#btn3").click(function(){
                $("#one+#two").css("background-color","red");
            })    
            $("#btn4").click(function(){
                $("#one~div").css("background-color","red");
            })
            })
        </script>
    </head>
    <body>
        <input type="button" value="子元素选择器" id="btn1"/>
        <input type="button" value="后代选择器" id="btn2"/>
        <input type="button" value="相邻的标签" id="btn3"/>
        <input type="button" value="找出所有" id="btn4"/>
        <br />
        <div id="one">
            <div class="mini">1-1</div>
        </div>
        <div id="two">
            <div class="mini">2-1</div>
            <div class="mini">2-2</div>
        </div>
        <div id="three">
            <div class="mini">3-1</div>
            <div class="mini">3-2</div>
            <div class="mini">3-3</div>
        </div>
        <span id="three">
            span
        </span>
        
    </body>
</html>

案例

JQ的遍历

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript" src="../../js/jquery-1.11.0.js"></script>
        <script>
            var city=["珠海市","中山市","江门市","佛山市"];
            
            /* $(city).each(function(i,n){
                console.log(i +"==="+n)
            }) */
            $.each(city,function(i,n){
                alert(i+"=="+n)
            })
        </script>
    </head>
    <body>
    </body>
</html>

案例

<script>

            var city=["珠海市","中山市","江门市","佛山市"];
            
            /* $(city).each(function(i,n){
                console.log(i +"==="+n)
            }) */
            /* $.each(city,function(i,n){
                alert(i+"=="+n)
            }) */
            function callback11(i,n){
                console.log("123: "+i +n);
            }
            
            function bianli(arr,callback11){
                for (var i = 0; i < arr.length; i++) {
                    var item = arr[i];
                    callback11(i,item)
                }
            }
            bianli(city,callback11);
        </script>

JQ的遍历原理

：lt（）小于

：gt（）大于

：eq（）等于

：input 找出所有输入项

过滤器

：selected

常用函数

　　prop（）properties

　　如果传入一个参数，就是获取

　　prop（图片路径）

　　设置图片路径

　　attr：操作一些自定义的属性 <>

　　prop：通常是用来操作元素固有属性的，建议使用prop来操作属性

　　css（）：修饰css样式

　　addClass（）添加一个class样式

　　removeClass（）移除

　　blur（）绑定失去焦点

　　focus（）绑定获取焦点事件

　　click：单击

　　dbclick：双击

　　change

　　append：给自己添加属性

　　appendTo：将自己添加到属性

　　prepend：在职子节点最前面添加子节点

　　after：在自己后面添加一个属性

　　before：在自己前面添加一个属性

　　$（"数组对象"）.each（function（index，data））

　　$.each(arr,function(index,data))