jq_基础

最新推荐文章于 2021-06-04 23:15:05 发布

原创最新推荐文章于 2021-06-04 23:15:05 发布 · 682 阅读

2 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

23 篇文章

订阅专栏

jquery判断元素是否隐藏的多种方法
 JQ中文网API
JQUI API

$ 等于 jQuery

$ 等于 jQuery
$(function(){}) 等于 $(document).ready(function(){})
表示整个文档加载完成后再执行相应的函数。
$(function(){
选择器 > 表示子元素
 $('#nav>ul>li').mouseover(function(){
 children 只获取子元素，不获取孙元素
 $(this).children('ul').show()
 })
  $('#nav>ul>li').mouseout(function(){
   $(this).children('ul').hide()
   })
 })

简介

JQ : jQuery 的简称
JS : Javascript的简称
JQ是基于JS封装的一个强大的插件
插件 ： 由程序员进行代码的封装流出方法名，
供使用者直接进行调用，并实现复杂功能

注意：(重点)
JQ与JS不能混用， 
什么是混用？
也就是JQ的属性或方法不能调用JS的属性和方法，
但是可以共存
如果你想用JQ获取的标签调用JS的属性和方法，
需要先把JQ对象转化为JS对象，才能调用JS属性和方法

jQuery对象与DOM对象之间的转换方法

jQuery对象转成DOM对象： 
(1)jQuery对象是一个数据对象，可以通过[index]的方法，
来得到相应的DOM对象。 
如：var $v =$("#v") ; //jQuery对象 
var v=$v[0]; //DOM对象 
(2)jQuery本身提供，通过.get(index)方法，得到相应的DOM对象 
如：var $v=$("#v"); //jQuery对象 
var v=$v.get(0); //DOM对象 

DOM对象转成jQuery对象: 
只需要用$()把DOM对象包装起来
var v=document.getElementById("v"); //DOM对象 
var $v=$(v); //jQuery对象

$() 选择器

$() 选择器 -> 获取指定的一个或者多个标签
$() 它也是JQ最强大的功能

html() JQ的这个方法等同于我们JS里的innerHTML
var a = $("#myDiv").html("wang");

点击添加红色DIV

<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-2.2.3.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<script type="text/javascript">
    $(document).on("click", function() {
        var myD = $("<div></div>"); //创建标签，调前是JQ的对象
        //在这里修改CSS样式
        myD.css({ 
            width : Math.random() * (300- 100 + 1) + 100,
            height : Math.random() * (300- 100 + 1) + 100,
            background : randColor(),
            display : "inline-block",
        });
        $("body").append(myD);
    });

    function randColor() {
        var r = Math.floor(Math.random() * (255 - 0 + 1) + 0);
        var g = Math.floor(Math.random() * (255 - 0 + 1) + 0);
        var b = Math.floor(Math.random() * (255 - 0 + 1) + 0);
        return "rgb(" + r + "," + g + "," + b + ")";
    }
</script>
</body>

遍历获取标签数组

<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-2.2.3.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>

<p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>8</p> <p>9</p> <p>10</p>
<script type="text/javascript">
//odd 偶数  even  奇数
     $("p:odd").css({
        "background" : "red",
    })

     $("p").each(function(ind){
        if(ind % 2 == 0){
            //把JS对象转化为JQ对象 **********重要
            //$（）括起来
            $(this).css({
                "background" : "red",
            })
        }else{
            $(this).css({
                "background" : "blue",
            })
        }
     })

    for(var i = 0; i < $("p").length; i++){
        if(i % 2 == 0){
            $("p").eq(i).css({
                "background" : randColor(),
            })
        }
    }
    function randColor() {
        var r = Math.floor(Math.random() * (255 - 0 + 1) + 0);
        var g = Math.floor(Math.random() * (255 - 0 + 1) + 0);
        var b = Math.floor(Math.random() * (255 - 0 + 1) + 0);
        return "rgb(" + r + "," + g + "," + b + ")";
    }
</script>
</body>

JQUI 效果参考API

//$("img").eq(i).toggle("blind", {direction : arr[rand]});
//$( "img" ).eq(i).toggle( "bounce", { times: 3 }, "slow" );
//$("img").eq(i).toggle("clip", {direction : arr[rand]});
//$("img").eq(i).toggle("drop", {direction : arr[rand]});
//$("img").eq(i).effect("bounce", "300", "slow" );
//$("img").eq(i).effect("explode", {pieces : 81} );
//$("img").eq(i).effect("fade" );
//$("img").eq(i).toggle("fold");
//$("img").eq(i).hide( "up", { direction: arr[rand] }, "slow" );
//$("img").eq(i).toggle("highlight" );  //好看
//$("img").eq(i).toggle("puff"); //放大
//$("img").eq(i).toggle("pulsate", {pulse : 10} ); //跳動 
//$("img").eq(i).toggle("scale", {direction : "vertical"});//縮小
//$("img").eq(i).toggle("shake", {times : 5});
//$("img").eq(i).toggle("slide", {direction : arr[rand]} );

JQ创建元素

 var htmlstr = "";
htmlstr += '<div class="audioHeight"><div class="send"><div class="btn-audio">' +
'<img src="../../img/audio.png" class="img_audio" />' +
'<span class="audioTime">' + "12:30" + '</span>' +
'<audio id="" class="voice"><source src="'+ audiourl + '" type="audio/mpeg" /></audio>' +
'</div></div></div>';
$(".myDiv").append(htmlstr);

//$() 是JQuery的缩写
//$() 其实就是JS封装的方法，里面利用各种复杂的判断和遍历，
//找到用户传来的选择器指定的标签

ready方法

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("div").html("asdf");
    })
</script>
</head>
<body>
<p>我是标签</p>
<!--<img src="J147-67-大幅风景1.jpg"/>-->
<div id="myDiv">我是DIV</div>
<script type="text/javascript">
    $(document).ready(function(){
        console.log("蹦！！！");
    })
    window.onload =function(){
        console.log("window");
    }
    ---------------------------------------------------
    window.onload 
    DOM以及页面上所有资源（图片音乐）加载完毕后触发， 只能有一个
    $(document).ready  
    当DOM(标签)绘制完成，不必等待资源加载完成后触发， 可以写多个

    以后尽量把JQ代码写在ready方法里，
    如果要利用JQ操作图片/音频资源时，
    需要在最外层套上window.onload()
</script>

ready vs window.onload

1.执行时间 

        window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。 
        $(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。 

2.编写个数不同 

         window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个 
         $(document).ready()可以同时编写多个，并且都可以得到执行 

3.简化写法 

         window.onload没有简化写法 
         $(document).ready(function(){})可以简写成$(function(){});
ex:
document.ready = function(callback) {
                ///兼容FF,Google
                if(document.addEventListener) {
                    document.addEventListener('DOMContentLoaded', function() {
                        document.removeEventListener('DOMContentLoaded', arguments.callee, false);
                        callback();
                    }, false)
                }
                //兼容IE
                else if(document.attachEvent) {
                    document.attachEvent('onreadystatechange', function() {
                        if(document.readyState == "complete") {
                            document.detachEvent("onreadystatechange", arguments.callee);
                            callback();
                        }
                    })
                } else if(document.lastChild == document.body) {
                    callback();
                }
            }

            window.onload = function() {
                alert('onload');

            };

            document.ready(function() {
                alert('ready');

            });

on 和 one 的区别

$(document).one("click", function(){//执行一次
    console.log("one");
})
$(document).ready(function(){
    $(document).on("click", function(){//执行多次
        console.log("on");
    });
})

//绑定，注册，监听事件|（都是一个意思）
//解绑，移除，取消事件

匿名函数

function myFn(){
    console.log("正常的函数");
}

//匿名函数（没有函数名字）
function(){
    console.log("11111111111....");
}
//例子：比如 setInterval里的function,
//或者addEventListener注册的事件中触发的方法等等，都是匿名函数

JQ全选反选

<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<title></title>
</head>
<body>
<ul>
    <li><input type="checkbox" />1</li>
    <li><input type="checkbox" />2</li>
    <li><input type="checkbox" />3</li>
</ul>
<button id="all">全选</button>
<button id="no">反选</button>
<script type="text/javascript">

    $("#all").on("click", function(){
        $("ul>li>input").prop("checked", true);
    })

    $("#no").on("click", function(){

     $("ul>li>input").each(function(){
        $(this).prop("checked", !$(this).prop("checked"));
         })

    })
</script>
</body>

JQ添加删除标签

<head>
<meta charset="UTF-8">
<title></title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<input type="button" name="add" id="add" value="添加" />
<script type="text/javascript">
    var i = 0;
    var myUl = $("<ul></ul>");
    $("body").append(myUl);
    $("#add").on("click", function(){
        var myLi = $("<li>我是li：</li>"); 
        var myA = $("<a href='###'>删除</a>");
        myA.on("click", function(){
            $(this).parent().remove();
        })
        i++;
        myLi.append(i + " ");               
        myLi.append(myA);
        myUl.append(myLi);
        $("body").append(myLi);
    })
</script>
</body>

回调函数

<script type="text/javascript">
//三部曲：1.写function（）{}   2.在目标函数添加形参fn  3.在恰当的时机调用
    function ldx(num1, num2, fn){//2.在目标函数添加形参fn
        fn(num1 + num2);//3.在恰当的时机调用
    }
    ldx(5, 10, function(resultNum){//1.写function（）{}
        console.log((resultNum));
    })
    //回调函数 ：把一个函数 扔到一个函数里 得到返回值
    //使用场景：

    //1.当你发现在function内return结果，无法return到想要获取的地方
    //（可能是因为function里嵌套了一个function等），这个时候就用回调函数

    //2.当你满足某个条件的时候，需要触发另一段代码，就可以使用回调函数
    //回调函数其实就是把整个function(){}传过去，然后在恰当的时候，进行调用

    var str = [];
    $.ajax({
        url : "http://www.littlewindy.com/poetry.php?name=yueyanglouji&route=yueyanglouji.mp3",
        type : "get",
        data : {}, 
        success : function(res){
            str = res;
            getS(str);  //1.准备一个方法  2.在恰当时机调用
            //在这里 return 到 success
        }
    })
    function getS(r){
        console.log(r);
    }

</script>

回调函数练习

<script type="text/javascript">
    //无参，回调函数
    function theFn(f){
        f();
    }
    theFn(function(){
        console.log(123);
    })
    //有参，回调函数
    function theHn(d){
        d("哈哈");
    }
    theHn(function(getStr){
        console.log(getStr);
    })
    //相当于 d("哈哈"); 调用 function函数 并赋予形参  哈哈
    var d = function(getStr){
        console.log(getStr);
    }

    //定义一个函数，用于计算两个函数的上，然后利用回调函数  把结果带出来并打印
        function cel(num1, num2, fn){
            fn(num1 / num2);
        }
        cel(8, 5, function(resultNum){
            console.log(resultNum);
        })

</script>

变量提升

<script type="text/javascript">
var a = 10;
function fn(){
    console.log(a); //undefine
    a = 50;
    console.log(a);
    var  a = 100;
    console.log(a);
}
fn();
//变量提升：
//在函数内部，声明的所有东西，在运行时，都会把所有的声明提到function里的 最上面
//上面fn方法在运行时，应该是这个样子的
/*
 function fn(){
    var a;
    console.log(a); //undefine
    a = 50;
    console.log(a);//50
    a = 100;
    console.log(a);//100
}
 * */

//函数提升：

//正常来说，我们代码是按照从上到下一行行运行的准则，
//那么下面的代码应该是错误，因为你先使用，再声明，顺序不对

//但是因为JS有个特性叫做函数提升，会把所有的函数声明在运行时，
//提升到代码的最上面，所以你可以先用这个方法，再声明

b();
function b(){
    console.log(123);
}
</script>

递归函数

<script type="text/javascript">
    function myS(){
        console.log("www");
        myS();
    }
    myS();
    //递归就是在函数内部，调用一个跟本函数功能一模一样的一段代码  
    //调用自己

    //利用递归求1-5的和
    var i = 0; 
    var sum = 0;
    function myS(){
        sum += i;
        i++;
        if(i <= 5){//注意：留出口
            myS();
        }else{
            console.log(sum);
        }
    }
    myS();

    function tS(num){
        if(num == 0){
            return num;
        }else{
            return num + tS(--num);
        }
        console.log(tS(5));
    }
</script>

JQ轮播图

<style>
    * {
        margin: 0;
        padding: 0;
    }
    #warp {
        margin: 0 auto;
        width: 970px;
        height: 410px;
        position: relative;
        overflow: hidden;
    }
    #middle {

        height: 410px;
        position: absolute;
        left: 0;
    }
    #middle>img {
        float: left;
    }
</style>
</head>

<body>
<div id="warp">
    <div id="middle">
        <img src="img/t1.jpg" alt="" />
        <img src="img/t2.jpg" alt="" />
        <img src="img/t3.jpg" alt="" />
        <img src="img/t4.jpg" alt="" />
        <img src="img/t5.jpg" alt="" />
        <img src="img/t1.jpg" alt="" />
    </div>
</div>
<script type="text/javascript">
    $("#middle").css({
        width : $("#middle>img").length * $("#middle>img").eq(0).width(),
    })
    var index = 0;
    setInterval(function(){
        index++;
        $("#middle").animate({
            left : -index * $("#middle>img").eq(0).width()
        },1000, function(){//此回调函数：当animate动画完成后，触发
            if(index >= 5){
                index = 0;
                $("#middle").css({
                    left : 0
                })
            }
        })
    },2000)
</script>

jq_ajax

 $.ajax({
        type: "POST",
        url: "../01/php/3post.php",
        data:{
            name:"John",
            address:"Boston",
            sex:"男"
        },
        success: function(msg){
            alert( "Data Saved: " + msg );
        },
        error:function(e){
            console.log(e.statusText);
        }
    });

移入事件

$(document).ready(function(){
  $("#p1").on("mouseenter", function(){
    alert('您的鼠标移到了 id="p1" 的元素上!');
  });
});
=========================================
$(document).ready(function(){
  $("#p1").mouseenter(function(){
    alert('您的鼠标移到了 id="p1" 的元素上!');
  });
});

slideToggle防止多次点击

只有对不在执行动画效果的元素执行一个动画特效
<button id="run">Run</button><div></div>
$("#run").click(function(){
  $("div:not(:animated)").animate({ left: "+=20" }, 1000);
});