jQuery加載、選擇器、選擇集轉移、樣式操作、click事件、索引值、選項卡

jQuery加載

首先要從外部引入，然后在新建一個script寫樣式

 <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
     在這里寫樣式，不能直接在上面寫，否則無效
</script>

如果

alert($);//彈出function (a,b){return new n.fn.init(a,b)}

表示JQuery已經引進來了，這是它的一個構造函數

jQuery語法

JS的寫法

window.onload = function(){
        var oDiv = document.getElementById('div');
        alert(oDiv.innerHTML);//這是一個div元素
    }

jQuery的完整寫法
比上面JS寫法先彈出，因為window.onload是把頁面元素加載、渲染完才彈出，而ready()是把所有頁面的節點加載完之后就彈出了，不用等渲染了

$(document).ready(function(){
        var $div = $('#div');
        alert('jQuery:' + $div.html());//jQuery:這是一個div元素
    })

簡寫方式

$(function(){
        var $div = $('#div');//CSS樣式怎么寫，這里就怎么寫
        //html()方法相當于原生JS的innerHTML
        alert($div.html() + 'jQuery');
    })

jQuery選擇器

jquery用法思想一
選擇某個網頁元素，然后對它進行某種操作

  • jquery選擇器
    jquery選擇器可以快速地選擇元素，選擇規則和css樣式相同，使用length屬性判斷是否選擇成功。

$(document) //選擇整個文檔對象
$('li') //選擇所有的li元素
$('#myId') //選擇id為myId的網頁元素
$('.myClass') // 選擇class為myClass的元素
$('input[name=first]') // 選擇name屬性等于first的input元素
$('#ul1 li span') //選擇id為為ul1元素下的所有li下的span元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery選擇器</title>
    <style type="text/css">
        #div1{
            color: red;
        }
        .box{
            color: green;
        }
        .list li{
            margin-bottom: 10px;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            //選擇元素的規則和css樣式相同
            $('#div1').css({color: 'pink'});
            $('.box').css({fontSize: '30px'});
            $('.list li').css({
                background: 'green',
                color: '#fff',
                fontSize: '20px',
                marginBottom: '10px'
            });
        })
    </script>
</head>
<body>
    <div id="div1">這是一個div元素</div>
    <div class="box">這是第二個div元素</div>
    <ul class="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>
</body>
</html>
  • 對選擇集進行修飾過濾(類似CSS偽類)

$('#ul1 li:first') //選擇id為ul1元素下的第一個li
$('#ul1 li:odd') //選擇id為ul1元素下的li的奇數行
$('#ul1 li:eq(2)') //選擇id為ul1元素下的第3個li
$('#ul1 li:gt(2)') // 選擇id為ul1元素下的前三個之后的li
$('#myForm :input') // 選擇表單中的input元素
$('div:visible') //選擇可見的div元素

  • 對選擇集進行函數過濾

$('div').has('p'); // 選擇包含p元素的div元素
$('div').not('.myClass'); //選擇class不等于myClass的div元素
$('div').filter('.myClass'); //選擇class等于myClass的div元素
$('div').first(); //選擇第1個div元素
$('div').eq(5); //選擇第6個div元素

  • 選擇集轉移

$('div').prev('p'); //選擇div元素前面的第一個p元素
$('div').next('p'); //選擇div元素后面的第一個p元素
$('div').closest('form'); //選擇離div最近的那個form父元素
$('div').parent(); //選擇div的父元素
$('div').children(); //選擇div的所有子元素
$('div').siblings(); //選擇div的同級元素
$('div').find('.myClass'); //選擇div內的class等于myClass的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>選擇集轉移</title>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            //prev()是同級的上一個元素，prevAll()是同級的上面所有的元素
            //next()是同級的下一個元素，nextAll()是同級的下面所有的元素

            //修改#div1的下一個元素的樣式
            $('#div1').next().css({color: 'red'});

            //修改#div1的下面所有p標簽設置樣式
            $('#div1').nextAll('p').css({color: 'red'});

            //選擇上一級的父元素
            /*$('#span01').parent().css({
                width:'100px',
                height:'100px',
                background:'gold'
            })*/

            //獲取祖級用$('#span02').parent().parent()不可取，可用closest('div')獲取離span02最近的div
            //closest可以選擇離自己最近的元素，元素可以是父級，也可以是子集
            $('#span01').closest('div').css({
                width:'200px',
                height:'200px',
                background:'pink'
            })

            /*
            $('.list li')與$('.list').children()的區別：
                原始的選擇集不一樣
                $('.list li')不能通過end()回到父級
                $('.list').children()可以通過end()回到父級
            */
            $('.list').children().css({
                background:'gold',
                height:'30px',
                marginBottom:'10px'
            }).end().css({
                background:'green'
            })

            //eq(2)是選擇索引等于2的第三個li，siblings()表示除第三個之外的其它兄弟li
            $('.list2 li:eq(2)').css({background:'gold'}).siblings().css({background:'green'});

            //find()是選擇div內的class等于link1的元素
            $('#div2').find('.link1').css({color:'red'});
        })
    </script>
</head>
<body>
    <div id="div1">這是一個div元素</div>
    <div>這是第二個div元素</div>
    <p>這是一個p元素</p>

    <div>
        <p>
            <a href="#">騰訊網</a>
            <span id="span01">span元素</span>
        </p>
    </div>

    <ul class="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>

    <ul class="list2">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>

    <div id="div2">
        <p>
            <a href="#" class="link1">騰訊網</a>
        </p>
    </div>
</body>
</html>

jquery樣式操作

jquery用法思想二
同一個函數完成取值和賦值

操作行間樣式

  • 獲取div的樣式

$("div").css("width");
$("div").css("color");

  • 設置div的樣式

$("div").css("width","30px");
$("div").css("height","30px");
$("div").css({fontSize:"30px",color:"red"});
特別注意
選擇器獲取的多個元素，獲取信息獲取的是第一個，比如：$("div").css("width")，獲取的是第一個div的width。

  • 操作樣式類名

$("#div1").addClass("divClass2") //為id為div1的對象追加樣式divClass2
$("#div1").removeClass("divClass") //移除id為div1的對象的class名為divClass的樣式
$("#div1").removeClass("divClass divClass2") //移除多個樣式
$("#div1").toggleClass("anotherClass") //重復切換anotherClass樣式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery樣式操作</title>
    <style type="text/css">
        .div2{
            color: red;
        }
        .big{
            font-size: 30px;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            /*jQuery用同一個函數即可以取值、也可以賦值*/
            //讀取樣式
            alert($('#div1').css('fontSize'));//16px
            //設置（寫入）樣式
            $('#div1').css({background:'gold'});

            //增加行間樣式
            $('#div1').addClass('big');
            //減少行間樣式，多個樣式用空格分開
            $('#div1').removeClass('div2 big');
        })
    </script>
</head>
<body>
    <div id="div1" class="div2">這是一個div元素</div>
</body>
</html>

綁定click事件

給元素綁定click事件，可以用如下方法：

$('#btn1').click(function(){
// 內部的this指的是原生對象

// 使用jquery對象用 $(this)

})

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>click事件</title>
    <style type="text/css">
        .box{
            width: 200px;
            height: 200px;
            background-color: gold;
        }
        .sty{
            background-color: green;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            // 給按鈕綁定click事件
            $('#btn').click(function(){
                //重復切換sty樣式
                $('.box').toggleClass('sty');
            })
        })
    </script>
</head>
<body>
    <input type="button" value="切換" id="btn">
    <div class="box"></div>
</body>
</html>

jquery屬性操作

1、html() 取出或設置html內容

  • 取出html內容

var htm =('#div1').html();

  • 設置html內容

$('#div1').html('<span>添加文字</span>');

2、text() 取出或設置text內容

  • 取出文本內容

var $htm = $('#div1').text();

  • 設置文本內容

$('#div1').text('<span>添加文字</span>');

3、attr() 取出或設置某個屬性的值

  • 取出圖片的地址

var $src = $('#img1').attr('src');

  • 設置圖片的地址和alt屬性

$('#img1').attr({ src: "test.jpg", alt: "Test Image" });

jQuery索引值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery索引值</title>
    <style type="text/css">
        .list li{
            height: 30px;
            margin-bottom: 10px;
            background-color: gold;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $('.list li').click(function(){
                // alert(this.innerHTML);//彈出標簽中的內容
                alert($(this).index());//彈出下標
            })
        })
    </script>
</head>
<body>
    <ul class="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>
</body>
</html>

jQuery做選項卡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery做選項卡</title>
    <style type="text/css">
        .btns{
            width: 500px;
            height: 50px;
        }
        /*選項卡的樣式*/
        .btns input{
            width: 100px;
            height: 50px;
            background-color: #ddd;/*默認灰色*/
            color: #666;
            border: 0px;
        }
        /*被選中的選項卡的樣式*/
        .btns input.cur{
            background-color: gold;
        }
        /*內容區的樣式*/
        .contents div{
            width: 500px;
            height: 300px;
            background-color: gold;
            display: none;/*默認隱藏*/
            line-height: 300px;
            text-align: center;
        }
        /*被選中的內容區的樣式*/
        .contents div.active{
            display: block;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $('#btns input').click(function() {
                //失去焦點，避免出現默認的藍框
                $(this).blur();
                //this是原生的對象
                // alert(this);//彈出[object HTMLInputElement]，說明this就是當前點擊的input元素

                //jQuery的this對象使用時要用$()包起來，這樣就可以調用jQuery的方法了
                //給當前元素添加選中樣式，為兄弟元素移除選中樣式
                $(this).addClass('cur').siblings().removeClass('cur');

                //$(this).index()獲取當前按鈕所在層級范圍的索引值
                //顯示對應索引的內容區，隱藏其它兄弟內容區
                $('#contents div').eq($(this).index()).addClass('active').siblings().removeClass('active');
            });
        })
    </script>
</head>
<body>
    <div class="btns" id="btns">
        <input type="button" value="tab01" class="cur">
        <input type="button" value="tab02">
        <input type="button" value="tab03">
    </div>
    <div class="contents" id="contents">
        <div class="active">tab文字內容一</div>
        <div>tab文字內容二</div>
        <div>tab文字內容三</div>
    </div>
</body>
</html>
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • jquery介紹 jQuery是目前使用最廣泛的javascript函數庫。據統計，全世界排名前100萬的網站，有...
    1263536889閱讀 366評論 0贊 1
  • jquery介紹 ： jQuery是目前使用最廣泛的javascript函數庫，jquery是一個函數庫，一個js...
    鬼會畫符閱讀 691評論 0贊 0
  • jquery介紹 ： jQuery是目前使用最廣泛的javascript函數庫，jquery是一個函數庫，一個js...
    末版車閱讀 376評論 0贊 0
  • jquery介紹 ： jQuery是目前使用最廣泛的javascript函數庫，jquery是一個函數庫，一個js...
    dream_seeker閱讀 197評論 0贊 0
  • 最近看《莎士比亞全集7》，有一些翻譯讓我很抓狂，繼“姐兒”，“娘娘”，“愛卿”之后，今天就連“賤內”也出來了。一個...
    藍色小越閱讀 111評論 0贊 0