html和text的區(qū)別?
☆html用于獲取第一個(gè)匹配元素的HTML內(nèi)容或文本內(nèi)容
? ? ? ? /* html用于設(shè)置所有匹配元素的HTML內(nèi)容或文本內(nèi)容 */
? ? ? ? /* text用于獲取所有匹配元素的文本內(nèi)容 */
? ? ? ? /* text用于設(shè)置所有匹配元素的文本內(nèi)容 */
? ? ? ? console.log( $('div').html() );
? ? ? ? /* text只能打印出文字霜运，不能打印出標(biāo)簽 */
? ? ? ? console.log( $('div').text('<h1>123</h1>') );
獲取表單的值
$('button').click(function(){
? ? ? ? ? ? console.log($('input').val());
? ? ? ? })
基本操作和獲取值
function fn(){
? ? ? ? ? ? if($(this).hasClass('div1')){
? ? ? ? ? ? ? ? $(this).removeClass('div1')
? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? $(this).addClass('div1')
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? $('div').mouseover(function(){
? ? ? ? ? ? fn.call(this)
? ? ? ? })
? ? ? ? $('div').mouseout(function(){
? ? ? ? ? ? fn.call(this)
? ? ? ? })
hover只寫一個(gè)方法，鼠標(biāo)移入和移出都會(huì)執(zhí)行一次?
? ? ? ? $('div').hover(function () {
? ? ? ? ? ? $(this).toggleClass('div1')
? ? ? ? })
? ? ? ? $('div').click(function () {
? ? ? ? ? ? $('input').val($('div').text().trim())
? ? ? ? })
節(jié)點(diǎn)操作1
通過選擇器獲取節(jié)點(diǎn)?
? ? ? ? //console.log($('div'));
把DOM節(jié)點(diǎn)轉(zhuǎn)化成jQuery節(jié)點(diǎn)
? ? ? ? /* let div1=document.getElementsByTagName('div')[0]
? ? ? ? console.log($(div1)); */
使用HTML字符串創(chuàng)建jQuery節(jié)點(diǎn)?
? ? ? ? ?let h1=$('<h1 style="color:red">我愛H1</h1>');
? ? ? ? console.log(h1);
? ? ? ? html傳的是字符串
? ? ? ? $('div').html(h1)
? ? ? ? /* let h1=document.createElement('h1');
? ? ? ? h1.innerText='我愛中國(guó)';
? ? ? ? console.log(h1);
? ? ? ? document.querySelector('div').innerHTML=h1.innerHTML */
節(jié)點(diǎn)操作2
<button class="a1">在內(nèi)部在后面添加</button>
<button class="b1">在內(nèi)部在上面添加</button>
?<button class="aa">向后生成頭像</button>
?<button class="bb">向前生成頭像</button>
$('.b1').click(function(){
$(a).prepend(b) ?表示將b前置插入a中
? ? ? ? ? ? $('ul').prepend('<li>我是li的前端</h1>')
$(b).prependTo($(a)) ?表示將b前置插入a中
? ? ? ? })
? ? ? ? $('.a1').click(function(){
原生只能插入節(jié)點(diǎn)
(a).append(b) 將b插入a中
? ? ? ? ? ? $('ul').append('<li>我是li</li>');
? ? ? ? ? ? //$('<li>我是li</li>').appendTo($('ul'));
? ? ? ? })
元素外部插入同輩節(jié)點(diǎn)
★ after和before都是在自身的后面添加办龄，并不是最后面添加
? ? ? ? $('div').click(function(){
? ? ? ? ? ? //$(a).after(b) ?將b插入a之后
? ? ? ? ? ? $(this).after($('<h1>愛愛愛</h1>'))
? ? ? ? ? ? //$(b).insertAfter(a) ?將b插入a之后
? ? ? ? ? ? $(this).before($('<h1>我我我</h1>'))
? ? ? ? })
/* 點(diǎn)擊按鈕 隨機(jī)生成一個(gè)頭像废酷，插入到div中 */
? ? ? ? let arr=['images/1.jpg','images/2.jpg','images/3.jpg'];
? ? ? ? /* $('.tx').click(function(){
? ? ? ? ? ? var i=Math.floor(Math.random()*(2-0+1)+0);
? ? ? ? ? ? $('div').append('<img src="'+arr[i]+'">')
? ? ? ? ? ? $('div').prepend('<img src="'+arr[i]+'">')
? ? ? ? }) */
? ? ? ? $('.aa').click(function(){
? ? ? ? ? ? fn('向前')
? ? ? ? })
? ? ? ? $('.bb').click(function(){
? ? ? ? ? ? fn('向后')
? ? ? ? })
? ? ? ? function fn(msg){
? ? ? ? ? ? var i=Math.floor(Math.random()*(2-0+1)+0);
? ? ? ? ? ? let img=$('<img src="'+arr[i]+'">');
? ? ? ? ? ? if(msg=='向后'){
? ? ? ? ? ? ? ? $('div').append(img)
? ? ? ? ? ? }
? ? ? ? ? ? if(msg=='向前'){
? ? ? ? ? ? ? ? $('div').prepend(img)
? ? ? ? ? ? }
? ? ? ? }
