一、
1糊渊、在jQuery中，可以直接使用$符號慧脱，或者使用jQuery變量名渺绒，它倆完全一致
console.log(jQuery === $); // true
2、jQuery本身是函數(shù)菱鸥，擁有自己的屬性和方法
console.log($);//function ( selector, context ) {…
3宗兼、在ready方法中去執(zhí)行正式的操作，等DOM加載完畢后去執(zhí)行
$(document).ready(function () {
console.log('文檔加載完畢');
});
簡寫為：
$(function () {
console.log('文檔加載完畢');
}
3氮采、將JQ對象與DOM對象轉(zhuǎn)換
// 獲取元素
var h2JQ = $('.title');
console.log(h2JQ);
// 將JQ對象轉(zhuǎn)為DOM對象
var h2DOM = h2JQ.get(0);
// console.log(h2JQ[0]);
// 將DOM元素轉(zhuǎn)為JQ元素
console.log($(h2DOM));
4殷绍、 使用$獲取元素
// var h2 = $('h2');
// // 綁定事件
// h2.on('click', function () {
// // 修改內(nèi)容
// h2.html('$');
// });
// $('h2').on('click', function () {
// $(this).html('$');
// });
二、選擇器
// 通過id查找元素
// $('#div2').css('color', 'blue');
// 通過class
// $('.div1').css('color', 'red');
// 通過標(biāo)簽名
// $('span').css('color', 'yellow');
// 群組選擇器
// $('span, p').css('background-color', 'pink');
// 后代選擇器
// $('div span').css('font-size', '2em');
// 如果符合選擇器的元素有多個扳抽，則可以全部選出篡帕，并且設(shè)置樣式的時候，可以同時給數(shù)組內(nèi)容所有元素添加
// $('div').css('border', '1px dashed blue');
// 直接子級選擇器
// $('.container > span').css('border', '1px dashed red');
// first
//$('li:first').css('color', 'blue');
// last
// $('li:last').css('color', 'red');
// :first-child
// $('li:first-child').css('color', 'blue');
// :last-child
// $('li:last-child').css('color', 'red');
// 如果使用:fist或者:last贸呢，則沒有父級標(biāo)簽
// 如果使用:first-child或者:last-child镰烧，則從子集的區(qū)域內(nèi)查找
// eq()
// $('li:eq(7)').css('background-color', 'yellow');
// nth-child()
//$('li:nth-child(3)').css('background-color', 'yellow');
// :eq和:first類似，沒有父級標(biāo)簽,不區(qū)分位置楞陷，并且下標(biāo)從0開始
// :nth-child和:first-child類型怔鳖，區(qū)分位置,從子集的區(qū)域內(nèi)查找，下標(biāo)從1開始
// :not()用于排除某些元素固蛾，如果是多個结执，直接在not()后面的小括號中使用群組選擇器
// $('.wrapper > *:not(p, h3)').css('background-color', 'cyan');
// 代表奇數(shù)元素，根據(jù)下標(biāo)艾凯，從0開始
// $('li:odd').css('background-color', 'blue');
// $('li:even').css('background-color', 'blue');
// 代表奇數(shù)元素献幔，根據(jù)下標(biāo)，從1開始
// $('li:nth-child(odd)').css('background-color', 'blue');
// $('li:nth-child(even)').css('background-color', 'blue');
// 通過屬性選擇器獲取元素
// $('p[title]').html('我是通過屬性選擇器修改后的內(nèi)容');
// 表單對于的選擇器
// $(':input').css('background-color', 'blue');
// 可以直接編寫input的type的值去選取元素
// $(':text').css('background-color', 'blue');
// $(':password').css('background-color', 'blue');
// $(':checkbox').css('background-color', 'blue');
// 選取默認(rèn)選中的元素
// $(':checked').css('background-color', 'red');
// $('h2').css('color', 'blue').on('click', function () {
// alert('h2');
// $(this).slideUp(2000);
// }).css('background-color', 'yellow');
三趾诗、DOM操作
1蜡感、 append
appendTo
prepend
prependTo
after
insertAfter
before
insertBefore
remove
clone
empty
replaceWith
replaceAll
// 原生JS
// var header = document.createElement('div')
// header.className = 'header';
// document.querySelector('.container').appendChild(header);
$(function () {
// 創(chuàng)建標(biāo)簽
// var header = $('<div class="header"></div>');
// append() 拼接元素
// $('.container').append(header);
// appendTo()
// header.appendTo($('.container'));
// 可以直接把容器的選擇器寫成參數(shù)蹬蚁，而不添加$()
// header.appendTo('.container');
// $('<div class="header"></div>').appendTo('.container').append('<h1>標(biāo)題</h1>');
// 使用jq創(chuàng)建結(jié)構(gòu)的時候，可以同時創(chuàng)建多個標(biāo)簽
// $('<div class="header"><h1>我是標(biāo)題</h1></div>').appendTo('.container');
// $('<div class="header">' +
// '<h1>我是標(biāo)題</h1>' +
// '</div>').appendTo('.container');
// 如果創(chuàng)建的標(biāo)簽結(jié)構(gòu)比較復(fù)雜郑兴，代碼比較多犀斋。
// 還折成一行就會造成代碼可讀性降低
// 可以使用ES6的模板字符串解決這個問題
// 模板字符串使用 `` 代表結(jié)構(gòu)，所有內(nèi)部的內(nèi)容情连，都是字符串的內(nèi)容叽粹，可以換行寫
// 模板字符串內(nèi)部如果需要使用變量的話，直接使用${}却舀，在內(nèi)部編寫就可以解析
// var str = '我是內(nèi)容';
// $(`<div>
// <div>
// <div>${ str }</div>
// </div>
// </div>`).appendTo('body');
// $('<h1>h1</h1>').appendTo('.container');
// $('<h2>h2</h2>').appendTo('.container');
// 使用after()和before進(jìn)行兄弟元素的拼接
// $('h2').before('<hr />');
// $('h1').after('<hr />')
// 和append 虫几、 appendTo不同的在于叫 insertAfter / insertBefore，進(jìn)行將前面的元素拼接到后面的元素上下
// $('<hr />').insertAfter('h1');
// $('<hr />').insertBefore('h2');
//與append相反禁筏，在元素里的最前面插入
// $('<hr />').prependTo('.container');
// $('.container').prepend('<hr />');
// append
// appendTo
// prepend
// prependTo
// after
// insertAfter
// before
// insertBefore
// 插入一個標(biāo)簽
// $('<h2>標(biāo)題</h2>').appendTo('.container');
// $('<h2>標(biāo)題</h2>').appendTo('.container');
// $('<h2>標(biāo)題</h2>').appendTo('.container');
// $('<h2>標(biāo)題</h2>').appendTo('.container');
// 使用h1標(biāo)題替換掉h2標(biāo)題
// $('h2:eq(1)').replaceWith('<h1>標(biāo)題</h1>');
// $('<h1>標(biāo)題</h1>').replaceAll('h2:eq(1)');
// 使用 replaceWith 或者 replaceAll 可以進(jìn)行標(biāo)簽的替換
// 移除元素本身
$('<h1>我是被移除的元素</h1>').appendTo('.container').remove();
// 清空元素內(nèi)容
$(`<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>`).appendTo('.container').empty();
// 如果使用jq同時創(chuàng)建了多層的標(biāo)簽結(jié)構(gòu)持钉，則返回值代表最外層
// 復(fù)制
$('.container').clone().appendTo('body');
});
2、
$(function () {
// 創(chuàng)建標(biāo)簽并拼接
var div = $(`<div>
<h2>我是h2標(biāo)題</h2>
<h3>我是h3標(biāo)題</h3>
</div>`).appendTo('.container');
// 使用html()方法篱昔，獲取全部內(nèi)容
// console.log(div.html());
// 使用text()方法每强，獲取文本內(nèi)容
// console.log(div.text());
// 如果html()方法有參數(shù)，則修改內(nèi)容
// div.html('<h1>我是h1</h1>');
// text()有參數(shù)的情況和html()類似
// div.text('我是修改后的文字');
// 注意: 在JQ中州刽，不是所有地方都能使用鏈?zhǔn)秸Z法空执。當(dāng)某個方法具有自定特定的放回值的情況，則不能使用鏈?zhǔn)秸Z法
// div.html().css('background-color', 'red');
// val()方法是為了給表單元素的value屬性使用穗椅。有參則設(shè)置辨绊，無參則取值
// $(':input').val('1831468462');
// console.log($(':input').val());
// 添加class
// $('.container').addClass('c1 c2');
// 移除class
// $('.container').removeClass('c1');
// 切換class
// 如果當(dāng)前存在，則移除匹表，否則添加
// 更多的情況用在動畫的切換
// $('.container').toggleClass('active');
// 添加a標(biāo)簽
// var a = $('<a></a>').appendTo('.container');
// 設(shè)置內(nèi)容
// a.html('百度一下');
// 添加屬性
// a.attr('href', 'http://www.baidu.com');
// 添加class
// a.addClass('link');
// $('<a></a>').appendTo('.container').html('百度一下').attr('href', 'http://www.baidu.com').addClass('link');
$('<a></a>').html('百度一下').attr('href', 'http://www.baidu.com').addClass('link').appendTo('.container');
// 如果attr方法门坷，只有一個參數(shù)，為屬性名袍镀，則獲取對應(yīng)的屬性值
$('.link').attr('href');
// 如果attr方法默蚌，有兩個參數(shù)，分別為名稱值苇羡，為修改或添加屬性值
$('.link').attr('href', 'http://blog.lidaze.com');
// 如果attr方法有一個參數(shù)绸吸，并且為對象，則可以同時添加或修改多個屬性與其對應(yīng)的值
$('.link').attr({
href: 'http://book.lidaze.com',
title: '我是a標(biāo)簽'
});
// 移除
$('.link').removeAttr('title');
// css()方法和attr()方法使用幾乎一樣
// css()賦值標(biāo)簽的樣式
$('.link').css('color');
$('.link').css('color', 'yellow');
$('.link').css({
color: 'green',
'font-size': '30px'
});
});
