jQuery加載济锄、選擇器、選擇集轉(zhuǎn)移岩喷、樣式操作偷霉、click事件死讹、索引值愧旦、選項(xiàng)卡

jQuery加載

首先要從外部引入琼蚯，然后在新建一個(gè)script寫樣式

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

如果

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

表示JQuery已經(jīng)引進(jìn)來(lái)了峦睡，這是它的一個(gè)構(gòu)造函數(shù)

jQuery語(yǔ)法

JS的寫法

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

jQuery的完整寫法
比上面JS寫法先彈出翎苫，因?yàn)閣indow.onload是把頁(yè)面元素加載、渲染完才彈出榨了，而ready()是把所有頁(yè)面的節(jié)點(diǎn)加載完之后就彈出了煎谍，不用等渲染了

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

簡(jiǎn)寫方式

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

jQuery選擇器

jquery用法思想一
選擇某個(gè)網(wǎng)頁(yè)元素龙屉，然后對(duì)它進(jìn)行某種操作

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

$(document) //選擇整個(gè)文檔對(duì)象
$('li') //選擇所有的li元素
$('#myId') //選擇id為myId的網(wǎng)頁(yè)元素
$('.myClass') // 選擇class為myClass的元素
$('input[name=first]') // 選擇name屬性等于first的input元素
$('#ul1 li span') //選擇id為為ul1元素下的所有l(wèi)i下的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(){
            //選擇元素的規(guī)則和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">這是一個(gè)div元素</div>
    <div class="box">這是第二個(gè)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>

對(duì)選擇集進(jìn)行修飾過(guò)濾(類似CSS偽類)

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

對(duì)選擇集進(jìn)行函數(shù)過(guò)濾

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

選擇集轉(zhuǎn)移

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

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

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

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

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

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

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

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

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

    <div>
        <p>
            <a href="#">騰訊網(wǎng)</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">騰訊網(wǎng)</a>
        </p>
    </div>
</body>
</html>

jquery樣式操作

jquery用法思想二
同一個(gè)函數(shù)完成取值和賦值

操作行間樣式

獲取div的樣式

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

設(shè)置div的樣式

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

操作樣式類名

$("#div1").addClass("divClass2") //為id為div1的對(duì)象追加樣式divClass2
$("#div1").removeClass("divClass") //移除id為div1的對(duì)象的class名為divClass的樣式
$("#div1").removeClass("divClass divClass2") //移除多個(gè)樣式
$("#div1").toggleClass("anotherClass") //重復(fù)切換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用同一個(gè)函數(shù)即可以取值、也可以賦值*/
            //讀取樣式
            alert($('#div1').css('fontSize'));//16px
            //設(shè)置（寫入）樣式
            $('#div1').css({background:'gold'});

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

綁定click事件

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

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

// 使用jquery對(duì)象用 $(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(){
                //重復(fù)切換sty樣式
                $('.box').toggleClass('sty');
            })
        })
    </script>
</head>
<body>
    <input type="button" value="切換" id="btn">
    <div class="box"></div>
</body>
</html>

jquery屬性操作

1、html() 取出或設(shè)置html內(nèi)容

取出html內(nèi)容

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

設(shè)置html內(nèi)容

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

2嵌屎、text() 取出或設(shè)置text內(nèi)容

取出文本內(nèi)容

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

設(shè)置文本內(nèi)容

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

3推正、attr() 取出或設(shè)置某個(gè)屬性的值

取出圖片的地址

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

設(shè)置圖片的地址和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);//彈出標(biāo)簽中的內(nèi)容
                alert($(this).index());//彈出下標(biāo)
            })
        })
    </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做選項(xiàng)卡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery做選項(xiàng)卡</title>
    <style type="text/css">
        .btns{
            width: 500px;
            height: 50px;
        }
        /*選項(xiàng)卡的樣式*/
        .btns input{
            width: 100px;
            height: 50px;
            background-color: #ddd;/*默認(rèn)灰色*/
            color: #666;
            border: 0px;
        }
        /*被選中的選項(xiàng)卡的樣式*/
        .btns input.cur{
            background-color: gold;
        }
        /*內(nèi)容區(qū)的樣式*/
        .contents div{
            width: 500px;
            height: 300px;
            background-color: gold;
            display: none;/*默認(rèn)隱藏*/
            line-height: 300px;
            text-align: center;
        }
        /*被選中的內(nèi)容區(qū)的樣式*/
        .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() {
                //失去焦點(diǎn)，避免出現(xiàn)默認(rèn)的藍(lán)框
                $(this).blur();
                //this是原生的對(duì)象
                // alert(this);//彈出[object HTMLInputElement]宝惰，說(shuō)明this就是當(dāng)前點(diǎn)擊的input元素

                //jQuery的this對(duì)象使用時(shí)要用$()包起來(lái)植榕，這樣就可以調(diào)用jQuery的方法了
                //給當(dāng)前元素添加選中樣式，為兄弟元素移除選中樣式
                $(this).addClass('cur').siblings().removeClass('cur');

                //$(this).index()獲取當(dāng)前按鈕所在層級(jí)范圍的索引值
                //顯示對(duì)應(yīng)索引的內(nèi)容區(qū)尼夺，隱藏其它兄弟內(nèi)容區(qū)
                $('#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文字內(nèi)容一</div>
        <div>tab文字內(nèi)容二</div>
        <div>tab文字內(nèi)容三</div>
    </div>
</body>
</html>

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末尊残，一起剝皮案震驚了整個(gè)濱河市，隨后出現(xiàn)的幾起案子淤堵，更是在濱河造成了極大的恐慌寝衫，老刑警劉巖，帶你破解...
沈念sama閱讀 221,576評(píng)論 6贊 515
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件粘勒，死亡現(xiàn)場(chǎng)離奇詭異竞端，居然都是意外死亡，警方通過(guò)查閱死者的電腦和手機(jī)庙睡，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 94,515評(píng)論 3贊 399
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門事富，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)，“玉大人乘陪，你說(shuō)我怎么就攤上這事统台。” “怎么了啡邑？”我有些...
開封第一講書人閱讀 168,017評(píng)論 0贊 360
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵贱勃，是天一觀的道長(zhǎng)。經(jīng)常有香客問(wèn)我，道長(zhǎng)贵扰，這世上最難降的妖魔是什么仇穗？我笑而不...
開封第一講書人閱讀 59,626評(píng)論 1贊 296
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮戚绕，結(jié)果婚禮上纹坐，老公的妹妹穿的比我還像新娘。我一直安慰自己舞丛，他們只是感情好耘子，可當(dāng)我...
茶點(diǎn)故事閱讀 68,625評(píng)論 6贊 397
惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
文/花漫我一把揭開白布。她就那樣靜靜地躺著球切，像睡著了一般谷誓。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上吨凑，一...
開封第一講書人閱讀 52,255評(píng)論 1贊 308
城市分裂傳說(shuō)
那天捍歪，我揣著相機(jī)與錄音，去河邊找鬼鸵钝。笑死费封，一個(gè)胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的蒋伦。我是一名探鬼主播弓摘，決...
沈念sama閱讀 40,825評(píng)論 3贊 421
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼痕届！你這毒婦竟也來(lái)了韧献？” 一聲冷哼從身側(cè)響起，我...
開封第一講書人閱讀 39,729評(píng)論 0贊 276
萬(wàn)榮殺人案實(shí)錄
序言：老撾萬(wàn)榮一對(duì)情侶失蹤研叫，失蹤者是張志新（化名）和其女友劉穎锤窑，沒(méi)想到半個(gè)月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體嚷炉，經(jīng)...
沈念sama閱讀 46,271評(píng)論 1贊 320
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡渊啰，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 38,363評(píng)論 3贊 340
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了申屹。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片绘证。...
茶點(diǎn)故事閱讀 40,498評(píng)論 1贊 352
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡，死狀恐怖哗讥，靈堂內(nèi)的尸體忽然破棺而出嚷那，到底是詐尸還是另有隱情，我是刑警寧澤杆煞，帶...
沈念sama閱讀 36,183評(píng)論 5贊 350
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布魏宽，位于F島的核電站腐泻，受9級(jí)特大地震影響，放射性物質(zhì)發(fā)生泄漏队询。R本人自食惡果不足惜派桩，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 41,867評(píng)論 3贊 333
男人毒藥：我在死后第九天來(lái)索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望蚌斩。院中可真熱鬧窄坦，春花似錦、人聲如沸凳寺。這莊子的主人今日做“春日...
開封第一講書人閱讀 32,338評(píng)論 0贊 24
一樁弒父案彤侍，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽(yáng)肠缨。三九已至，卻和暖如春盏阶，著一層夾襖步出監(jiān)牢的瞬間晒奕，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 33,458評(píng)論 1贊 272
情欲美人皮
我被黑心中介騙來(lái)泰國(guó)打工名斟，沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留脑慧，地道東北人。一個(gè)月前我還...
沈念sama閱讀 48,906評(píng)論 3贊 376
代替公主和親
正文我出身青樓砰盐，卻偏偏與公主長(zhǎng)得像闷袒，于是被迫代替她去往敵國(guó)和親。傳聞我的和親對(duì)象是個(gè)殘疾皇子岩梳，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 45,507評(píng)論 2贊 359

jQuery加載、選擇器、選擇集轉(zhuǎn)移、樣式操作、click事件截汪、索引值、選項(xiàng)卡