jQuery的主要使用方法


 
         

 

 

 

一、在html中添加jquery,可以使用cdn加載jquery

  1、網址:https://www.bootcdn.cn/jquery/

  2、推薦使用3.4左右版本的,建議使用min.js后綴的,min后綴是壓縮過的,體積比較小

 

 

//注冊窗口注冊是如果輸入內容為空則提示內容為空
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<form action="">
    <p><label for="i1">username:
        <input type="text" id="i1" name="username">
        <span class="errors"></span>
    </label></p>
    <p><label for="i2">password
        <input type="password" id="i2" name="password">
        <span class="errors"></span>
    </label></p>
    <input type="submit" value="注冊" id="d1">
</form>
<script>
    // 獲取按鈕標簽
    var $b1Ele=$("#d1");
    // 給按鈕標簽綁定事件
    $b1Ele.click(function () {
        var $userName=$('#i1');
        var $passWord=$('#i2');
    //判斷用戶輸入框是否為空
        if ($userName.val().length==0){
            $('.errors').first().text('用戶不能為空')
        }
        if ($passWord.val().length==0){
            $('.errors').last().text('棉麻不能為空')
        }
        // 點擊注冊按鈕不提交信息刷新頁面
        return false;
    })
</script>
</body>
</html>

  

//設置屬性,根據.attr(‘屬性名’)獲取對應的值,當輸入一個值的時候是獲取對應的值,兩個值的是都是添加值
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<p id="d1">20歲超過30歲,40歲,50歲</p>
<p>衣錦還鄉</p>
<p>技多不壓身</p>
</body>
</html>

$('#d1');
k.fn.init [p#d1]
$("#d1");
k.fn.init [p#d1]
$("#d1").attr('id');
"d1"
$("#d1").attr('username','yzn');
k.fn.init [p#d1]
$("#d1");
k.fn.init [p#d1]0: p#d1length: 1__proto__: Object(0)
$("#d1").attr('username');
"yzn"
$("#d1").attr({'password':'123','test':'test1'});
k.fn.init [p#d1]
//移除設置好的設置好的標簽

$("#d1").attr('username');
"yzn"
$("#d1").attr({'password':'123','test':'test1'});
k.fn.init [p#d1]

刪除已經添加好的標簽

$('#d1').removeAttr('test');

使用prop4獲取類似於checked的標簽屬性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<p id="d1">20歲超越30歲,40歲,50歲的人</p>
<p>衣錦還鄉</p>
<p>技多不壓身</p>
<input type="checkbox" name="hobby" id="i1" checked>讀書
<input type="checkbox" name="hobby" id="i2">寫字
<input type="checkbox" name="hobby" id="i3">吹牛逼
</body>
</html>
//根據返回值獲取checked的標簽屬性,返回true或false

  

添加新的標簽,插入數據

var pEel=document.createElement('p');
undefined
pEel.innerText='我一定要超越前人';
"我一定要超越前人"
var $divEle=$('div');
undefined
$divEle.append(pEel);

//在div標簽里面最底部添加一個p標簽

 添加新的標簽

var pEel=document.createElement('p');
undefined
pEel.innerText='我一定要超越前人';
"我一定要超越前人"
var $divEle=$('div');
undefined
$(pEel).appendTo($divEle);

  

添加標簽到指定div標簽內部頭

var pEle=document.createElement('p');
undefined
pEle.innerText='謙虛';
"謙虛"
var $divEle=$('div');
undefined
$divEle.prepend(pEle);

  

新建標簽放在指定標簽的前面:before

var pEel=document.createElement('p');
undefined
pEel.innerText='淡定,切勿浮躁!!!';
"淡定,切勿浮躁!!!"
var $divEle=$('div');
undefined
$divEle.before(pEel);

 

 

新建標簽替換創建好的標簽

var pEel=document.createElement('p');
undefined
pEel.innerText='堅持就是勝利,堅持就是勝利';
"堅持就是勝利,堅持就是勝利"
var $divEle=$('div');
undefined
$divEle.replaceWith(pEel);

 

 克隆新的功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <style>
        button{
            background-color: pink;
        }
    </style>
</head>
<body>
<button>出籠報道,天下無敵</button>
<script>
    $('button').on('click',function () {
        $(this).clone(true).insertAfter(this);
    })
</script>
</body>
</html>

鼠標懸停觸發事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>懸浮</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<p>歡迎光臨</p>
<script>
    $('p').hover(
        function () {
            alert('how much?')
        },
        function () {
            alert('歡迎下次還來')
        }
    )
</script>
</body>
</html>

獲取用戶在input框中輸入的實時內容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>獲取用戶輸入的信息</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<input type="text">
<script>
    $('input').on('input',function () {
        console.log(this.value)
    })
</script>
</body>
</html>

取消標簽自帶的事件(input點擊按鈕會出現頁面刷新)

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>取消標簽自帶的事件</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<from action="">
    <input type="submit">
</from>
<script>
    $('input').click(function (e) {
        alert(123);
        // 阻止默認事件的發生
        e.preventDefault()
    })

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

事件冒泡(鼠標點擊在設置好的標簽內容上觸發綁定事件)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>時間冒泡</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div>div
    <p>div下的p
        <span>div下的p下的span</span>
    </p>
</div>
<script>
    $('div').click(function () {
        alert('div')
    });
    $('p').click(function (a) {
        alert('p')
        a.stopPropagation()
    });
    $('span').click(function (e) {
        alert('span');
    });
</script>
</body>
</html>

事件冒泡(點擊按鈕,觸發對應事件)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件委托</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<button>我是金牌技師,很搞定為你服務</button>
<script>
    $('body').on('click','button',function () {
        alert(123)
    })
</script>
</body>
</html>

 設置圖片前台展示動態效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圖片動態效果</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<img src="http://hbimg.b0.upaiyun.com/828e72e2855b51a005732f4e007c58c92417a61e1bcb1-61VzNc_fw658" alt="">
</body>
</html>

//圖片虛化收縮左上角
 $('img').hide(3000);
//圖片虛化從左上角展示出來
 $('img').show(3000);
//=========================
//圖片收縮到左上角

  $('img').slideDown(5000)

 //圖片從左上角展示出來
  $('img').slideUp(5000)

  //圖片原地漸變顯示出來

  $('img').fadeIn(5000)

  //圖片原地漸變隱藏
  $('img').fadeOut(5000)

  //圖片原地變淡,
  $('img').fadeTo(5000,0.4)

 

 

 

 eachx循環

標簽可以當做數據存儲庫

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<p></p>
</body>
</html>

//往p標簽中添加數據
$('p').data('username','json');
//查看數據,一個值是查看數據,兩個值是新增數據
$('p').data('username');

 

 在html代碼中查看不到新增的數據的

 

 

Bootstrap:是一個前端框架

  使用前提:到如bootstrap需要先導入jquery,對jquery有依賴

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM