JQuery2

時間 2020-05-21

原文原文鏈接

1. 元素操做

1.1 text

//text() :獲取匹配到的標籤中的全部文本文字
// text(val) :更改文本文本
console.log($('div:eq(0)').text());

$('div:eq(0)').text('天氣真好')
            
// 注：text中的標籤不會有效果，當作普通字符
$('div:eq(0)').text('<h1>清空後</h1>');

1.2 html

//html() ：獲取匹配到的第一個標籤中的全部html內容
// html(val)：修改匹配到的全部標籤中的全部html內容

$('div').html('大雨')
            
// 注：html中標籤會被正確解析
$('div').html('<h1>海棠</h1>')

1.3 val

// val() :獲取值
// val(str)： 修改value的值
$('#iunput1').val('簡單');

1.4 class

// 添加class屬性  addClass('str')
            
// 移除class屬性 removeClass('str')
            
// 添加或刪除class屬性 toggleClass('str')
//若是本來有 執行刪除，本來沒有執行添加

$('#d1').addClass('div1');
$('#d2').removeClass('div3');
$('#d1').toggleClass('div3');
$('#d2').toggleClass('div3');

1.5 css

// css(name):返回匹配到的標籤的css樣式中name的值
// css(name,value):爲匹配到的標籤設置一個css樣式
// css({name1:value1, name1:value1..}) 多個樣式

$('#d1').css('background','beige');
$('#d1').css({'height':'300px', 'width':'100px', 'background':'yellow'})

1.6 attr

attr與addClass的區別：若是class屬性存在，attr會替代，而addClass會增長一個class屬性 class能夠有多個屬性值。

//attr(name) : 返回匹配到的標籤的屬性中name的值
//attr(name, value)  爲匹配到的標籤添加一個屬性
//attr({name1:value1, name1:value1..}) ： 爲匹配到的標籤添加多個屬性值

// 獲取input的id屬性的值
alert($('#i1').attr('id'));
            
// 添加type屬性
$('#i1').attr('type', 'password');

2. 父子兄弟元素

2.1 獲取父元素

// 一、獲取當前元素的直接父元素
var $d5 = $('#p1').parent();

// 二、獲取當前元素的全部祖先元素
var $parArr = $('#p1').parents();

//三、獲取當前元素的全部祖先元素而且這些祖先元素均爲指定內容
var $divArr = $('#p1').parents('div');
var $divArr = $('#p1').parents('#d2');


//四、獲取當前元素的全部祖先元素 直到元素前，不包含該元素 
var $untilArr = $('#p1').parentsUntil('#d2');

2.2 獲取子元素

// 一、獲取當前元素的直接子元素
var $ch1 = $('#d2').children();
console.log($ch1); // d3  d6

// 二、獲取當前元素的直接子元素 而且子元素爲符合條件的元素
var $ch2 = $('#d2').children('div#d6');
console.log($ch2); // d6

// 三、獲取當前元素的全部後代節點 find('*')
var $allCh = $('#d2').find('*');
console.log($allCh); // d6 d3 d4 d5  p1

// 四、獲取當前元素的全部符合條件的後代節點 find('條件')
var $allDiv = $('#d2').find('div');
console.log($allDiv); // d6 d3 d4 d5

2.3 兄弟元素

// 一、獲取當前元素的同級元素
var $sibArr = $('h3').siblings();

// 二、獲取當前元素的全部同級元素，而且符合條件
var $pArr = $('h3').siblings('p');

// 3 、 next(); 獲取當前元素後面的下一個同級元素
var $next = $('h3').next();
console.log($next); // h4
// 四、
var $allNext = $('h3').nextAll();
console.log($allNext); // h4 5 6 p div
// 五、nextUnitl('h6')
var $allNextUn = $('h3').nextUntil('h6');
console.log($allNextUn);  // h4 h5

// prev() :向前查找
// prevAll()

2.4 過濾元素

<div id="d1">
    <p id="p1" class="p1">1</p>
    <p id="p2" class="p2">2</p>
    <p id="p3" class="p1">3</p>
    <p id="p4" class="p2">4</p>
</div>

<script type="text/javascript">
    $(function () {
        // 根據指定條件篩選查找
        // 一、first()
        console.log($('div p').first()); // p1
        // 二、 last()
        console.log($('div p').last());  // p4
        
        // 三、eq(index)
        
        // 四、filter('條件')
        console.log($('div p').filter('.p1')); // p1 p3
        
        // 五、not('條件')
        console.log($('div p').not('.p1'));  // p2 p4 
        
    })
</script>

3. 元素事件

3.1 加載文檔

// 文檔加載完畢後執行
$(document).ready(function(){
    
})

$(function(){
    
})

3.2 事件處理

<body>
    <div id="d1">點擊</div>
    <div id="d2">
        <p>春天來了</p>
        <p>燕子說</p>
    </div>
    <script type="text/javascript">
        // 一、爲標籤添加事件 不能移除
        $('#d1').click(function(){
            //alert('愛來不來');
            // 給d2添加一個新的標籤
            $('#d2').append('<p>新來的</p>');
        })
        
        
        // 動態添加的標籤事件不能使用
        /*$('div p').click(function(){
            // this: 當前p對象
             // $(this).text()
            alert(this.innerText);
        })*/
        
        
        // 二、bind 綁定事件
        // bind('事件執行的方式','事件執行的函數')
        // 經過動態添加的標籤不能使用
        $('div p').bind('click', function(){
            alert($(this).text());
        })
        
        // 移除事件 unbind
        $('div p').unbind('click');
        
        // 三、delegate 代理事件 (動態添加的可用)
        // 父標籤.delegate(真正的執行者, 執行方式, 執行函數)
        //事件代理：利用事件冒泡的方式：將父元素的事件傳遞給子元素執行
        //使用範圍：同一父元素下的相同的子元素都要執行相同的操做
        // 使用條件：必須是冒泡事件
        // click dbclick key mouse 
        // 建議：DOM層不要太深
        $('#d2').delegate('p','click',function(){
            alert($(this).text());
        })
        
        // 移除 undelegate
        $('#d2').undelegate('p', 'click')
        
        // 四、on 添加事件 (動態添加的可用)
        // 父標籤.delegate(執行方式, 真正執行者, 執行函數)
        // bind click delegate都是經過on實現的
        //建議：DOM層不要太深
        // 若是須要給動態添加的標籤添加事件，推薦使用on的方式
        $('#d2').on('click','p',function(){
            alert($(this).text());
        })
        
        // 移除 off
        $('#d2').off('click', 'p');
    </script>
</body>

3.3 一次性事件

<script type="text/javascript">
    $(function () {
        $('div').one('click', function(){
            alert('我只出現一次')
        })
        
    })
</script>

3.4 鼠標移入或移出

<script type="text/javascript">
    $(function(){
        // hover(inFunc, outFunc)
        //當只有一個參數，鼠標進入或離開都會執行
        
        
        $('div').hover(function(){
            console.log('進入')
        }, function(){
            console.log('離開')
        })
    })    
</script>

3.5 事件對象

<script type="text/javascript">
    // e:事件對象
    // 事件對象包含事件相關的參數
    $('button').click(function(e){
        console.log(e);
        console.log(e.pageX);
        console.log(e.pageY);
    })
</script>

3.6 阻止冒泡及默認事件

<body style='height:1000px'>
    <div id='d1' style="width: 200px; height: 200px; background: pink;"></div>
    <input type="text" id="i1" />
    <a href="http://www.baidu.com" id="a1">非法網站</a>、
    
    <script type="text/javascript">
        $(function(){
            // 點擊body範圍 body變成綠色
            $('body').click(function(){
                $(this).css('background','green');
            })
        })
        
        // 點擊div 只有div 變green
        $('#d1').click(function(e){
            $(this).css('background','green');
            // 阻止事件冒泡
            e.stopPropagation();
            
        })
        
        // 點擊input body 不變green
        $('#i1').click(function(e){
            e.stopPropagation();
        })
        
        // 點擊 a body 不變green 彈出提示框 點擊取消按鈕 不訪問
        $('#a1').click(function(e){
            e.stopPropagation();
            var result = confirm('是否要訪問')
            if(result == false){
                // 取消默認事件
                // e.preventDefault();
                //jQuery 中簡寫 返回false 至關於執行e.stopPropagation 及e.preventDefault()
                return false;
            }
        })
    </script>
</body>

4. 動態操做元素

4.1 建立標籤

<script type="text/javascript">
    $(function(){
        // 一、建立元素
        // $('<元素名稱></元素名稱>')
        var $p1 = $('<p></p>')
        // 添加到父視圖上
        $('body').append($p1);
        
        // 二、建立帶有文本文字的標籤元素
        var $p2 = $('<p>6666</p>')
        $('body').append($p2);
        
        // 三、建立帶有屬性的標籤元素
        var $p3 = $("<p style='color:blue'>7777</p>")
        $('body').append($p3);
    })
</script>

4.2 添加元素節點1

<script type="text/javascript">
    $(function () {
        
        //在元素內部添加新的元素
        // 一、append
        // 語法結構：父元素.append(新標籤)
        // 將新元素添加到父元素全部子元素的後面
        var $p1 = $('<p>週三</p>')
        $('#d1').append($p1);
        
        // 二、appendTo
        // 語法結構：父元素.appendTo(新標籤)
        // 將新元素添加到父元素全部子元素的後面
        var $p2 = $('<p>週四</p>')
        $p2.appendTo('#d1');
        
        
        // 三、prepend
        // 語法結構：父元素.prepend(新標籤)
        // 將新元素添加到父元素全部子元素的前面
        var $p3 = $('<p>週二</p>')
        $('#d1').prepend($p3);
        
        // 四、prependTo
        // 語法結構：父元素.prependTo(新標籤)
        // 將新元素添加到父元素全部子元素的後面
        var $p4 = $('<p>週一</p>')
        $p4.prependTo('#d1');
        
    
    })
</script>

4.3 添加元素方式2

<script type="text/javascript">
    // 一、after
    // 舊元素.after(新元素)
    $p1 = $('<p>777</p>')
    // console.log($('div'))
    // console.log($('div:eq(0)'))
    $('div').after($p1);
    
    // 二、insertAfter
    // 新元素.insertAfter(舊元素)
    $p2 = $('<p>888</p>')
    $p2.insertAfter($('div'));
    
    
    
    //3 before
    // 舊元素.before(新元素)
    $p3 = $('<p>666</p>')
    $('div').before($p3);
    
    // 四、insertBefore
    // 新元素.insertBefore(舊元素)
    $p4 = $('<p>555</p>')
    $p4.insertBefore($('div'));
</script>

4.4 刪除元素

<script type="text/javascript">
    $(function(){
        // JQuery 刪除元素的操做
        // 一、remove()
        // 二、detach()
        // 三、empty()
        $('div p').click(function(){
            alert($(this).text());
        })
    })
    
    // 一、remove(): 刪除元素
    // 刪除元素，可是會把刪除的元素保持下來，但不會把元素綁定的事件保存下來
    /*var $pp = $('div:eq(0) p').remove();
    // 添加到div上
    $('div:eq(0)').append($pp);*/
    
    
    
    
    // 二、detach(): 刪除元素
    // 刪除元素，可是會把刪除的元素保持下來，會把元素綁定的事件保存下來
    var $p3 = $('div p').detach();
    // 添加到div上
    $('div:eq(0)').append($p3);
    
    
    // 三、empty(): 清空子元素
    // 只清空子元素，本身自己不會刪除
    $('div:eq(0)').empty();
    
    
</script>

4.5 複製元素

<script type="text/javascript">
    $(function(){
        // 複製元素
        // clone():複製元素的操做
        // clone(boolean)：false：只複製自己，不復制事件，默認false
        // true ：複製對象自己及事件
        $('p').click(function(){
            // 複製自己，並將複製的對象添加到父元素、
            var $p1 = $(this).clone(true);
            
            $('div').append($p1);
            
        })
    })
</script>

4.6 替換元素

<script type="text/javascript">
    $(function(){
        // 替換元素
        // replaceWith(新的元素)
        
        // $('#d1').replaceWith('<h1>早</h1>')
        //$('div').replaceWith('<h2>原生</h2>')
        
        
        // 新元素.replaceAll(舊元素)
        $('<h4>周樹人</h4>').replaceAll($('#d2'))
    })
</script>

4.7 動態添加父子節點

<script type="text/javascript">
    // 添加父節點 wrap(父節點)
    $('button:eq(0)').click(function(){
        // 給a標籤添加一個div父標籤
        $('a').wrap('<div></div>')
    })
    // 刪除父節點
    $('button:eq(1)').click(function(){
        $('a').unwrap()
    })
    
    // 總體添加父節點
    $('button:eq(2)').click(function(){
        $('a').wrapAll("<div></div>")
    })
    
    // 添加子節點
    $('button:eq(3)').click(function(){
        $('a').wrapInner('<b></b>')
    })
</script>

JQuery3javascript

相關標籤/搜索

jquery2

jquery2.x

JQuery

每日一句

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