Web开发（五）jQuery

jQuery是什么

<1> jQuery是由John Resig创建，至今已吸引了来自世界各地的众多 javascript高手加入其team。

<2> jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE!

<3> 它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器

<4> jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。

<5> jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。

jQuery对象

jQuery 对象就是通过jQuery包装DOM对象后产生的对象。jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $(“#test”).html();

$("#test").html()    
//意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法 

// 这段代码等同于用DOM实现代码：
document.getElementById(" test ").innerHTML; 

//虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错

//约定：如果获取的是 jQuery 对象, 那么要在变量前面加上$. 

var $variable = jQuery 对象
var variable = DOM 对象

$variable[0]：jquery对象转为dom对象      $("#msg").html(); $("#msg")[0].innerHTML

jquery的基础语法：$(selector).action()

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

选择器

基本选择器

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

层级选择器

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

基本筛选器

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

属性选择器

$('[id="div1"]')   $('["alex="sb"][id]')

表单选择器

$("[type='text']")----->$(":text")         注意只适用于input标签  : $("input:checked")

练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jq选择器</title>
</head>
<body>
    <div class="header">this is in header</div>
    <div class="contenter">
        <p>this is in contenter p</p>
        <div class="left">
            <p id="left_p">left p</p>
        </div>
        <div class="medium">
            <p id="medium_p">medium p</p>
            <input type="text">
        </div>
        <div class="right">
            <p>right p</p>
        </div>

    </div>
    <div class="footer">this is in footer</div>

</body>
<script src="jquery-3.2.1.js"></script>
<script>


    // 基本选择器
    // $('*').css('color','red') //通配选择器
    // $('#left_p').css('color','red') //id选择器
    // $('.contenter').css('color','red') //类选择器
    // $('p').css('color','red') //元素选择器
    // $('.header, .footer').css('color','red') //并集选择器

    // 层级选择器
    // $('.contenter p').css('color','red') //后代元素选择器
    // $('.contenter>p').css('color','red') //子元素选择器
    // $('.left+div').css('color','red')//后一个兄弟元素选择器
    // $('.left~div').css('color','red') //后所有兄弟元素选择器

    //基本筛选器
    // $('div:first').css('color','red')
    // $('div:last').css('color','red')
    // $('div:eq(-1)').css('color','red')
    // $('div:even').css('color','red')
    // $('div:gt(4)').css('color','red')

    //属性选择器
    // $('[id="left_p"]').css('color','red')
    // $('[id]').css('color','red')
    // $('[id*="t"]').css('color','red')

    //表单选择器
    // $('[type="text"]').css('width','500px')
    // $(':text').css('width','500px')
    
</script>
</html>

View Code

实例之左侧菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>左侧菜单</title>
    <style>
        .menu{
            width: 200px;
            height: 600px;
            background-color: #bbffaa;
            float: left;
        }
        .title{
            color: red;
        }
        .item{
            padding-left: 15px;
        }
        .content{
            width: 1200px;
            height: 800px;
            background-color: fuchsia;
            float: left;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <div class="menu">
        <div >
            <div class="title">导航网站</div>
            <div class="item ">
                <p>导航一</p>
                <p>导航二</p>
                <p>导航三</p>
            </div>
        </div>
        <div>
            <div class="title">电影网站</div>
            <div class="item hide">
                <p>电影一</p>
                <p>电影二</p>
                <p>电影三</p>
            </div>
        </div>
        <div>
            <div class="title">小说网站</div>
            <div class="item hide">
                <p>小说一</p>
                <p>小说二</p>
                <p>小说三</p>
            </div>
        </div>
    </div>
    <div class="content"></div>
</body>
<script src="jquery-3.2.1.js"></script>
<script>
    $('.menu .title').click(
        function () {
            $(this).next().removeClass('hide');
            $(this).parent().siblings().children('.item').addClass('hide')
        }
    )
</script>
</html>

View Code

实例之tab切换

筛选器

过滤筛选器

$("li").eq(2)  $("li").first()  $("ul li").hasclass("test")

查找筛选器

$("div").children(".test")     $("div").find(".test")  
                               
 $(".test").next()    $(".test").nextAll()    $(".test").nextUntil() 
                           
 $("div").prev()  $("div").prevAll()  $("div").prevUntil()   
                        
 $(".test").parent()  $(".test").parents()  $(".test").parentUntil() 

 $("div").siblings()

练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>筛选器</title>
</head>
<body>
    <ul class="affair">
        <li class="eat">吃饭</li>
        <ol >
            <li>蛋白质</li>
            <li >膳食纤维</li>
            <li class="suger">糖类</li>
        </ol>
        <li class="learn">学习</li>
        <li>睡觉</li>
        <li>娱乐</li>
    </ul>

</body>
<script src="jquery-3.2.1.js"></script>
<script>
    //过滤筛选器
    // $('li').eq(1).css('color','red')
    // $('li').first().css('color','red')

    //查找筛选器
    // $('ul').children('li').css('color','red') //children只选择子元素
    // $('ul').find('li').css('color','red') //find可以选择后代所有

    // $('.eat').next().css('color','red')
    // $('.eat').nextAll().css('color','red')
    // $('.eat').nextUntil('.learn').css('color','red') //不包括两端

    // $('.learn').prev().css('color','red')
    // $('.learn').prevAll().css('color','red')
    // $('.learn').prevUntil('.eat').css('color','red')

    // $('.suger').parent().css('color','red')
    // $('.suger').parents().css('color','red')
    // $('.suger').parentsUntil('.affair').css('color','red')  //不包括.affair

    $('.suger').siblings().css('color','red') //选择所有兄弟，不包括自己
</script>
</html>

View Code

操作元素

属性操作

--------------------------属性
$("").attr();
$("").removeAttr();
$("").prop();
$("").removeProp();
--------------------------CSS类
$("").addClass(class|fn)
$("").removeClass([class|fn])
--------------------------HTML代码/文本/值
$("").html([val|fn])
$("").text([val|fn])
$("").val([val|fn|arr])
---------------------------
$("").css("color","red")

注意

<input id="chk1" type="checkbox" />是否可见
<input id="chk2" type="checkbox" checked="checked" />是否可见



<script>

//对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
//对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
//像checkbox，radio和select这样的元素，选中属性对应“checked”和“selected”，这些也属于固有属性，因此
//需要使用prop方法去操作才能获得正确的结果。


//    $("#chk1").attr("checked")
//    undefined
//    $("#chk1").prop("checked")
//    false

//  ---------手动选中的时候attr()获得到没有意义的undefined-----------
//    $("#chk1").attr("checked")
//    undefined
//    $("#chk1").prop("checked")
//    true

    console.log($("#chk1").prop("checked"));//false
    console.log($("#chk2").prop("checked"));//true
    console.log($("#chk1").attr("checked"));//undefined
    console.log($("#chk2").attr("checked"));//checked
</script>

attr和prop