python之路（17）jquery入门及ajax使用

目录

• 引入jquery库
• 页面载入
• 寻找元素(选择器和筛选器)
• 循环遍历
• 属性操作(attr、prop、css、html)
• 文档处理(插入、替换、删除、复制)
• css操作(css、位置、大小)
• jquery事假绑定和事件委托
• 动画效果
• 扩展方法与插件
• ajax使用

---

引入jquery库

 <script src="jquery-3.1.1.js"></script> 

页面载入

　　在页面加载等html语句加载完了，在加载js代码

    $(document).ready(function () {
        #jquery语句
    })
    
    简写:
    $(function () {
        #jquery语句
    })

寻找元素(选择器和筛选器)

基本选择器

$("*")    $("#id")    $(".class")    $("element")    $(".class p")

层级选择器

$(".outer div")    $(".outer>div")   $(".outer+div")    $(".outer~div")

>  : 按照子代(向内一层)选择　

+  : 紧挨着向下寻找

~  : 不必紧挨着向下寻找

基本筛选器

$("li:first")     $("li:eq(2)")     $("li:even")     $("li:gt(1)")     $("li:lt(1)")

属性选择器

$('[id="div1"]')     $('[chen="18"][id="div1"]')

表单选择器

$("[type='text']")----->$(":text")        注：只适用于input标签 (type可以用:表示)　

筛选器

$("li").first()      $("li").last()         $(".outer").children("p") 找子代       $(".outer").find("p") 找后代
$("li").next()        $("li").nextAll()       $("li").eq(2).nextUntil("#end") 选择第二个到最后
$("li").prev()       $("li").prevAll()       $("li").eq(2).prevUntil("li:eq(0)") 选择第二个到第一个
$(".inner").parent()        $(".inner").parents()        $(".inner").parentsUntil()
$(".inner").siblings()    寻找上下紧挨的标签

 form表单数据获取

//直接获取表单的所有数据
var data = $('#form').serialize()   

 循环遍历

方法一
    arr=[11,22,33]
    $.each(arr,function (x, y) {
        #x是索引下标
        #y是值
    })

方法二
    $("p").each(function () {
        #遍历所有p标签
        $(this)
    })

属性操作(attr、prop、css、html)

    ------------------------属性
    $("").attr()
    $("").prop()
    $("").removeAttr()
    $("").removeProp()
    ------------------------css类
    $("").addClass()
    $("").removeClass()
    ------------------------HTML代码/文本/值
    $("").html()
    $("").text()
    $("").val()
    -------------------------css
    $("").css("color","red")

 $("").attr()  　可以获得属性值，两个参数添加属性，用来使用自定义的属性

 　　注意:在遇到固有属性(本身标签自带的属性 如：input checked属性)就会遇到问题，在checked属性里，用attr获取会有checked和undefined两种状态，如果返回true和false会更加方便判断，因此以引入prop()方法

 $("").prop()    用来使用标签本身固有的属性(判断 input checked属性返回的true和false两种状态，而不是checked和undefined)　

 文档处理(插入、替换、删除、复制)

内部插入
    $("").append(content|fn)            ----------->$("p").append("<p>hello</p>")
    $("").appendTo(content)             ----------->$("p").append("div")
    $("").prepend(content)              ----------->$("p").append("<p>hello</p>")
    $("").prependTo(content|fn)         ----------->$("p").append("div")
    
外部插入
    $("").after(content|fn)             ---------->$("p").after("<p>hello</p>")
    $("").before(content|fn)            ---------->$("p").before("<p>hello</p>")
    $("").insertAfter(content)          ---------->$("p").insertAfter("#foo")
    $("").insertBefore(content)         ---------->$("p").insertBefore("#foo")
    
替换
    $("").replaceWith(content|fn)
    
删除
    $("").empty()
    $("").remove()
    
复制
    $("").clone()

 css操作(css、位置、大小)

css
    $("").css("color","red")
    
位置
    $("").offset(content)
    $("").position()
    $("").scrollTop()
    $("").scrollLeft()
    
大小
    $("").height()             内容
    $("").innerHeight()        内容+padding
    $("").outerHeight()        内容+padding+border
    $("").outerHeight(true)    内容+padding+border+margin
    $("").width()             
    $("").innerWidth()       
    $("").outerWidth()       
    $("").outerWidth(true)   

  $("").position().top  相当于已定位父代的偏移量，如果父带没有定位，默认根据视口

　　$("").scrollTop() 监听滑轮与窗口的距离

　　window.onscroll(function () {
     var cuerrent = $(window).scrollTop()
　　})

jquery事假绑定和事件委托

事件绑定

$("").click(function () {
        
})
    
$("").bind("clink",function () {
        
})

 事件委托 : 标签绑定事件后，即使后面创建新的标签，也会绑定事件

//子标签的事件绑定委托给父标签来做
$("父标签").on("click","子标签",function () {
        
})

动画效果

显示隐藏(参数设置时间)

    $("").show()       $("").hide()       $("").toggle()　　

滑动(参数设置时间)

    $("").slideDown()       $("").slideUp()     $("").slideToggle()　　

淡入淡出(参数设置时间)

    $("").fadeIn()       $("").fadeOut()       $("").fadeToggle()      $("").fadeTo(1000,04)

回调函数　　

    $("").show(1000,function () {
        #这里是动画结束后调用的方法
    })

扩展方法与插件

$.extend(objcet)           #为JQuery添加一个静态方法
$.fn.extend(object)        #为JQuery实例添加一个方法

    // 静态方法
    jQuery.extend({
        min: function (a,b) {return a < b ? a : b },
        max: function (a,b) {return a > b ? a : b },
    });
    console.log($.min(3,4))

    // 实例方法
     $.fn.extend({
         "print" : function () {
             console.log($(this).html())
         }
     });
     $("").print();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>大图轮播</title>
    <script src="jquery-3.1.1.js"></script>
    <style>
        .outer{
            790px;
            height: 340px;
            margin: 80px auto;
            position: relative;
        }

        .img li{
            position: absolute;
            list-style: none;
            top: 0;
            left: 0;
        }
        .num{
            position: absolute;
            bottom: 15px;
            left: 280px;
            list-style: none;
        }

        .num li{
            display: inline-block;
             18px;
            height: 18px;
            border-radius: 50%;
            background-color: white;
            margin-left: 13px;
        }

        .btn{
            position: absolute;
            top:0;
             30px;
            height: 60px;
            background-color: #603cf0;
            color: white;

            text-align: center;
            line-height: 60px;
            font-size: 30px;
            opacity: 0.7;
            margin-top: 130px;
            display: none;
            cursor:pointer;
        }

        .right{
            right: 0;
        }

        .left{
            left: 0;
        }

        .num .active{
            background-color: red;
        }
        .outer:hover .btn{
            display: block;
        }
    </style>

</head>
<body>

    <div class="outer">
        <ul class="img">
            <li><a href=""><img src="img/1.jpg"></a> </li>
            <li><a href=""><img src="img/2.jpg"></a> </li>
            <li><a href=""><img src="img/3.jpg"></a> </li>
            <li><a href=""><img src="img/4.jpg"></a> </li>
            <li><a href=""><img src="img/5.jpg"></a> </li>
            <li><a href=""><img src="img/6.jpg"></a> </li>

        </ul>

        <ul class="num">
            <!--<li class="active"></li>-->
            <!--<li></li>-->
            <!--<li></li>-->
            <!--<li></li>-->
            <!--<li></li>-->
            <!--<li></li>-->
        </ul>

        <div class="left btn"><</div>
        <div class="right btn">></div>
    </div>


    <script>
        //创建jquery自动创建按钮标签
        var $img_num = $(".img li").length;

        for (var i=0;i<$img_num;i++){
             $(".num").append("<li></li>")
        }

        $(".num li").eq(0).addClass("active")
// 手动轮播

        var i = 0;

        $(".num li").mouseover(function () {
            i = $(this).index();
            $(this).addClass("active").siblings().removeClass("active");
            $(".img li").eq(i).fadeIn().siblings().fadeOut();
        })
// 自动轮播

        var c = setInterval(GO_R,1500);

        function GO_R() {
            if (i == $img_num-1) {
                i = -1;
            }
            i++;
            $(".num li").eq(i).addClass("active").siblings().removeClass("active")
            $(".img li").eq(i).fadeIn(1000).siblings().fadeOut(1000)
        }

        function GO_L() {
            if (i == 0) {
                i = $img_num;
            }
            i--;
            $(".num li").eq(i).addClass("active").siblings().removeClass("active")
            $(".img li").eq(i).fadeIn(1000).siblings().fadeOut(1000)
        }

        $(".outer").hover(function () {
            //停留的时候执行
            clearInterval(c)
        },function () {
            //离开的时候执行
            c=setInterval(GO_R,1500)
        })
// button 加定播
        $(".right").bind("click",GO_R)
        $(".left").bind("click",GO_L)

    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<select id="provinces">
    <option value="">请选择省份</option>
    <!--<option value="">河北省</option>-->
    <!--<option value="">河南省</option>-->
    <!--<option value="">北京</option>-->
</select>

<select name="" id="citys">
    <option value="">请选择城市</option>
</select>



<script>


    data={"河北省":["石家庄","廊坊"],"山西":["晋城","大同"],"陕西":["西安","延安"]};
    var pro_ele=document.getElementById("provinces");
    var city_ele=document.getElementById("citys")

    for(var i in data){
        var ele=document.createElement("option");
        ele.innerHTML=i;
        pro_ele.appendChild(ele)
    }

    pro_ele.onchange=function () {
        console.log(this.selectedIndex);
        console.log(this.options[this.selectedIndex])

        var citys=data[this.options[this.selectedIndex].innerHTML];

        city_ele.options.length=1;

        for(var i=0;i<citys.length;i++){
            var ele=document.createElement("option");
             ele.innerHTML=citys[i];
            city_ele.appendChild(ele)
        }

    }



</script>


</body>
</html>

ajax使用

　　使用ajax可以通过不刷新界面的情况下进行后台的数据交互，和页面的更新

　　　　　　　$.ajax({
                url:'',  //url地址
                type: 'GET',  //传递的方式
                data:{}, //发送的数据
                success:function (arg) {
                    //这里是返回的响应
                }
            })

 注：data的value包含数组的时候，要加上 traditional:true 

Ajax试用项目仓库地址：https://gitee.com/addr_devon/ajaxtest-django

Ajax进阶及jsonp跨域请求：https://www.cnblogs.com/shuzhixia/p/11225319.html