jQuery入門

時間 2019-12-13

標籤 jquery 入門欄目 JQuery 简体版

原文原文鏈接

簡介

What is jQuery?

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.css

jQuery是一個快輕量豐富的JavaScript庫，主要封裝了四塊內容，分別是：html遍歷操做，事件，動畫和Ajax. 而且使用簡單，豐富和易於擴展。html

官網：www.jQuery.comjquery

www.bootcdn.cn 下載jQueryajax

jQuery的基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="box">weather</div>
<script src="jQuery/js/jquery.js">
</script>
<script>
    console.log($('.box'))    寫選擇器,返回的結果是一個jQuery對象也就是一個僞數組，能夠經過索引直接轉換成js節點對象。
</script>
</body>
</html>



js對象轉jquery對象

var oBox = document.getElementById('box');
console.log($(oBox));

jQuery選擇器編程

1.基本選擇器api

ID選擇器（#）做用：選擇id爲指定的第一個元素數組

類選擇器（.）做用：選擇具備class全部類名的元素app

標籤選擇器（element）做用：選擇標籤名爲指定值的全部元素ide

通配符選擇器（*）做用：選擇器全部元素動畫

2.高級選擇器

後代選擇器（空格表示）選擇全部的後代元素

子代選擇器（>）選擇全部的子代元素

3.屬性選擇器

例如：input[type=text]

4.基本過濾選擇器

:eq(index) index是從0開始的一個數字

:gt(index) 選擇序號大於index的元素

:lt(index) 選擇器小於index的元素

:odd 選擇全部序號爲奇數的元素

:even 選擇全部序號爲偶數的元素

:first 選擇匹配的第一個元素

:last 選擇匹配的最後一個元素

eq的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="box">
<p>weather</p>
<ul>
    <li>
        <p>sunny</p>
    </li>
    <li>
        rainny
    </li>
</ul>
</div>
<script src="jQuery/js/jquery.js"></script>
<script>
$('.box ul li:eq(1)').css({'color':'red','fontSize':20})
</script>
</body>
</html>

篩選方法

find(selector) 查找指定元素的全部後代元素（包括子子孫孫）用法：$('#box').find('p')

children 查找指定元素的子元素（親兒子）

siblings() 查找全部兄弟元素（不包括本身）

parent() 查找父元素

eq(index) 查找指定元素的第index元素，index是索引

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="box">
<p>weather</p>
<ul>
    <li>
        <p>sunny</p>
    </li>
    <li>
        rainny
    </li>
</ul>
</div>
<script src="jQuery/js/jquery.js"></script>
<script>
// $('.box ul li:eq(1)').css({'color':'red','fontSize':20})   經過jquery封裝的css設置樣式
    console.log($('.box').find('p,ul'));        查詢後代
    console.log($('.box').children('p'));       查詢子代
    console.log($('.box').parent());            查詢父元素
    console.log($('.box ul li').eq(1));         eq按照索引查詢
    console.log($('.box').siblings())           查詢兄弟元素，除了本身之外
</script>
</body>
</html>

選項卡js vs jQuery

js基於排他思想實現選項卡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button>熱門</button>
<button>電視影音</button>
<button>電腦</button>
<button>傢俱</button>

<script src="jQuery/js/jquery.js"></script>
<script>
    var btns = document.querySelectorAll('button');
    for (var i = 0; i < btns.length;i++){
        btns[i].onclick = function () {
            for (var j=0;j<btns.length;j++){
            btns[j].style.color = 'black';
        }
            this.style.color = 'red';
        }
    }

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

基於jQuery鏈式編程實現選項卡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button>熱門</button>
<button>電視影音</button>
<button>電腦</button>
<button>傢俱</button>

<script src="jQuery/js/jquery.js"></script>
<script>
 
    $('button').click(function () {
        $(this).css('color','red').siblings().css('color','black')
    })

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

動畫

1.普通動畫

show() 無參數表示讓指定的元素直接顯示出來

hide()

show和hide的實例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
            display: none;
        }
    </style>
</head>
<body>
<button>顯示</button>
<div class="box"></div>
<script src="jQuery/js/jquery.js"></script>
<script>
    $('button').mouseenter(
        function () {
           $('.box').stop.show(2000);
        })
    $('button').mouseleave(
        function () {
           $('.box').stop.hide(2000);
        }
    )
</script>
</body>
</html>
ps:先中止動畫 在開啓動畫



例子：toggle至關於show和hide操做

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
            display: none;
        }
    </style>
</head>
<body>
<button>顯示</button>
<div class="box"></div>
<script src="jQuery/js/jquery.js"></script>
<script>
    
    $('button').click(function () {
        $('.box').stop().toggle(2000)
    })
</script>
</body>
</html>

ps:toggle裏面能夠加參數，表示動畫執行以後執行其餘的。

2.捲簾門效果

slideDown() 下拉

slideUp() 上卷

slideToggle()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
            display: none;
        }
    </style>
</head>
<body>
<button>顯示</button>
<div class="box"></div>
<script src="jQuery/js/jquery.js"></script>
<script>
    $('button').mouseenter(
        function () {
           $('.box').stop().slideDown(2000);
        })
    $('button').mouseleave(
        function () {
           $('.box').stop().slideUp(2000);
        }
    )

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

3.淡入淡出

fadeIn（）讓元素淡淡的進入視線

fadeOut() 讓元素漸漸淡出視線

fadeToggle() 改變透明度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
            display: none;
        }
    </style>
</head>
<body>
<button>顯示</button>
<div class="box"></div>
<script src="jQuery/js/jquery.js"></script>
<script>
    $('button').mouseenter(
        function () {
           $('.box').stop().fadeIn(2000);
        })
    $('button').mouseleave(
        function () {
           $('.box').stop().fadeOut(2000);
        }
    )
   
</script>
</body>
</html>

常見事件

click 鼠標單擊事件

dblclick 雙擊事件

mousedown()/up() 鼠標按下彈起事件

mousemove() 鼠標移動事件

mouseover()/out() 鼠標移入移除事件

mouseenter()/leave()鼠標進入離開事件

focus()/blur() 鼠標聚焦失焦事件

keydown()/up 鍵盤按鍵按下/彈起觸發

表單事件

change() 表單元素髮生改變觸發事件

select() 文本元素髮生時觸發事件

submit()

jQuery對值的操做

html() innerHTML實現，對文本和標籤進行渲染

text() innerText實現，只對文本進行渲染

val() value的實現，只對標籤中有的value屬性有效，好比input等

html設置值和獲取值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
            display: none;
        }
    </style>
</head>
<body>
<button>顯示</button>
<div class="box"></div>
<script src="jQuery/js/jquery.js"></script>
<script>
    var name = '百度一下';
    $('button').mouseenter(
        function () {
           $('.box').stop().fadeIn(1000,function (){
               $(this).html(`<a href="#">${name}</a>`)
           })
            console.log($(this).html());
        });
    $('button').mouseleave(
        function () {
           $('.box').stop().fadeOut(2000);
        }
    )
 
</script>
</body>
</html>

html標籤屬性操做

attr(key,value) 設置單個屬性值

attr({key1:value,key2:value2}) 對標籤設置多個屬性值

attr(key) 獲取屬性值

removeAttr() 刪除某個屬性

ps: 改操做只對標籤中的屬性操做

屬性 增刪查操做

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
            display: none;
        }
    </style>
</head>
<body>
<button>顯示</button>
<div class="box"></div>
<script src="jQuery/js/jquery.js"></script>
<script>
    console.log($('.box').attr('class'));
    $('.box').attr({id:'box',title:'boxx'});
    setTimeout(function () {
        $('.box').removeAttr('title')
    },4000);


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

對類操做

addClass

removeClass

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .active{
            background-color: green;
        }
    </style>
</head>
<body>
<div class="box"></div>
<script src="jQuery/js/jquery.js"></script>
<script>
    $('.box').mouseenter(function () {
      $(this).addClass('active')
    })

     $('.box').mouseleave(function () {
      $(this).removeClass('active')
    })
</script>
</body>
</html>

DOM操做

父.append(子)

子.appendTo(父) 插入操做，插入到子元素的最後一個父子之間

prepend

prependTo 插入操做，插入到父元素中的第一個元素

兄弟.after(要插入的兄弟)

要插入的兄弟.insertAfter(兄弟)

before

insertBefore

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="box">
    <div class="item">weather</div>
</div>
<script src="jQuery/js/jquery.js"></script>
<script>
    <!--append and appendTo-->
    $('#box').append('<p>hello</p>')
    $('#box').append('<p>hello2</p>')
    $('<a href="#">百度</a>').appendTo('#box')

    
    $('.item').after('<p>123</p>');
    $('.item').before('<p>345</p>');


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

$(select).replaceWith(content); 替換

replaceAll 替換全部

remove() 刪除節點後，事件也會刪除

detach() 刪除節點後，事件會保留

empty() 清空選中的全部子元素

替換和清空的實例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="box">
    <div class="item">weather</div>
</div>

<script src="jQuery/js/jquery.js"></script>
<script>
    <!--append and appendTo-->
 

    $('.item').replaceWith('<span>dsb</span>')
    $('#box').empty()
</script>
</body>
</html>

ajax調用接口數據

接口來自和風天氣

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div></div>
<script src="jQuery/js/jquery.js"></script>
<script>
    $.ajax(
        {url:'https://free-api.heweather.net/s6/weather/now?location=beijing&key=yourkey',
        method:'get',
        success:function(res){
        console.log(res.HeWeather6[0].now.cond_txt);
        var weather = res.HeWeather6[0].now.cond_txt;
        $('div').html(`今天今天情況: ${weather}`)
    },
         error:function (err) {
             console.log(err)
         }
        }
    )

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

1. JQuery UI 入門
2. jQuery入門
3. JQuery 入門
4. Jquery入門
5. jQuery mobile入門
6. jQuery入門（一）
7. JQuery入門
8. jQuery入門、jQuery選擇器、jQuery操做
9. jQuery入門、jQuery選擇器、jQuery操作
10. jQuery快速入門
更多相關文章...
• Memcached入門教程 - NoSQL教程
• Neo4j數據庫入門教程 - NoSQL教程
• YAML 入門教程
• Java Agent入門實戰（一）-Instrumentation介紹與使用

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。