jquery转换js

刚离职，一直忙于弄简历，整理面试题。今天得空吧前几天学习复习的jq基础知识整理一下，长时间不用还真的忘记了。所有在深入学习中也不要忘记复习之前的知识。做巩固，老话说的好打好根基才能盖好房。基础知识过后，下面还有联系题，注意看

分享一个jquery好手册：http://www.css88.com/jqapi-1.9/

小知识点

2、$("") 获取元素 （包括标签名，类名，id名）

3、事件源 . 方法（function(){}）

//jq版
    $(document).ready(function(){
        //获取元素
        var jqBut=$("button");//更具标签名获取元素
        var jqDiv=$("div");
        //绑定事件
        jqBut.click(function(){
            //驱动事件
            jqDiv.show(1000); //显示盒子
            jqDiv.html("中秋快乐")//设置文字
        })
    });

 

jQuery特点

1、链式编程

jqDiv.show(3000).html(ss)
相当于 
jq.show(3000)
jq.html(内容)

 

jq入口问题

js 也有入口， window.onload === ￥（document）.ready();为了防止页面为加载完就执行

 

1、jq可多个入口函数

2、js只能有一个，多次会覆盖

3、$实际上表示一个函数 $()调用函数

4、jquery ===$ 相等

  //jq入口函数 1、当页面加载完毕的时候，图片没有加载，执行这个函数
        $(document).ready(function(){
            alert(1)
        });
        //jq入口函数2、当页面加载完毕的时候，图片没有加载，执行这个函数
        $(function(){
            alert(1)
        })
         //jq入口函数 1、当页面加载完毕的时候，图片也加载完，执行这个函数
         $(window).ready(function(){
            alert(1)
        })

 

jq和js 改变样式对比

1、jq对象是一个数组，包含原生jsDOM对象

2、原声js对象是一个原生对象

 //js改变多个样式
div.style.cssText="width:100px; height:100px; background:black; margin-bottom:20px;";
 //jq改变多个样式，是josg数组方式
jqdiv.css({"width":100,"height":100,"background":"red","margin-bottom":20});

 

jq对象转换为js对象

     A）jq对象名（索引值）

     b）jq对象名.get[ 索引值 ]

<script src="jquery-1.11.1.js"></script>
    <script>
        //入口函数
        jQuery(document).ready(function () {
            //如果想要那种方式设置属性或方法，必须转换成该种类型。
            //1.js对象转换成jquery对象。     $(js对象);
            var box = document.getElementById("box");
            var cbox = document.getElementsByClassName("box");
            var div = document.getElementsByTagName("div");
            
            //js转换成jq
            box = $(box);
            cbox = $(cbox);
            div = $(div);
            
            //转换成了jquery对象，皮上面有功能可以直接调用。
            div.css({"width": 100, "height": 100, "border": "1px solid red"});
            box.css("background", "red");
            cbox.css("background", "yellow");
            //jquery对象是一个数组。数组中包含着原生JS中的DOM对象。
            var jqbox = $("#box");
            var jqCbox = $(".box");
            var jqdiv = $("div");
            //2.jquery对象转换成js对象。     1.jquery对象[索引值]   2.jquery对象.get(索引值)
            //jquery对象转换成js对象
            jqdiv[0].style.backgroundColor = "black";
            jqdiv.get(4).style.backgroundColor = "pink";
        });
    </script>

 

案例

隔行变色

 <script src="js/jquery-1.11.1.min.js"></script>
    <script>
        //jq函数入口 除了图片，页面加载后立即执行
        jQuery(function(){
            //获取元素
            var jqli=$("li");
            //for遍历所有li
            for(var i=0; i<jqli.length; i++){
                //判断条件
                if(i%2===0){
                    //jq对象转化成js对象
                    jqli[i].style.background="red";
                }else{
                    jqli.get(i).style.background="yellow"
                }
            }
        })
    </script>

 

开关灯案例

 <script src="js/jquery-1.11.1.min.js"></script>
    <script>
        //函数入口
        jQuery(document).ready(function(){
            //获取函数
            var butArr=document.getElementsByTagName("input");
            var bd=$("body");
            //绑定事件 js对象 转换成 jquery对象
            $(butArr[0]).click(function(){
                //jquery对象转化成js
                bd[0].style.background="white";
            });
            $(butArr[1]).click(function(){
                //jquery对象转化成js
                bd[0].style.background="black";
            });
        })
    </script>