1. jQuery 中, $(document).ready()是什么意思均蜜?
$(document).ready()方法:為防止文檔在完全加載之前運行Jquery代碼,若在文檔未完全加載前就運行函數(shù),操作可能失敗.必須在文檔加載完后執(zhí)行操作,可使用ready事件,作用相當于把js寫到body末尾.(可簡寫為$(function(){})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>clone-index-ready</title>
<script>
window.onload =function(){//js代碼放入head
console.log(1);
var box = document.querySelector('.box')
console.log(box)
}
$(document).ready(function(){
//jquery寫在前面但<script src="jquery-3.2.0.min.js"></script>也必需放在前面
// or $(function(){
})
})
</script>
</head>
ready和onload的區(qū)別是:前置只包括文檔元素的加載宪拥,后者是所有資源的加載; onload 要等所有資源加載外傅,包括 圖片薄声、CSS锡垄、JS岛心、Iframe;另一個事件来破,不等所以,ready比onload先執(zhí)行
2.$node.html()和$node.text()的區(qū)別?
$node.html()忘古,返回所選擇元素內(nèi)的html內(nèi)容徘禁,包含html標簽和文本內(nèi)容
$node.text(),返回所選擇元素內(nèi)的文本內(nèi)容髓堪,不包含html標簽送朱,只包含文本內(nèi)容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>html-text</title>
</head>
<body>
<p id="test">這是段落中的<b>粗體</b>文本。</p>
<script src="jquery-3.2.0.min.js"></script>
<script>
console.log( $('#test').html() ); // 這是段落中的<b>粗體</b>文本干旁。
console.log( $('#test').text() ); // 這是段落中的粗體文本
console.log( $('#test').html('<span>hello</span>' )); // 這是段落中的<b>粗體</b>文本驶沼。被替換成hello
console.log( $('#test').text('<span>hello</span>' )); //這是段落中的<b>粗體</b>文本。<span>hello</span>
</script>
</body>
</html>
3.$.extend 的作用和用法?
作用 :$.extend()將多個對象合并到一起争群,可以傳入多個參數(shù)回怜。$.extend([deep,] target,…)[deep,]為布爾值默認情況不是深拷貝,可設(shè)置true為深拷貝
用法:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>extend</title>
<style>
ul,li{
margin: 0px;
padding:0px;
list-style: none;
}
</style>
</head>
<body>
<script src="jquery-3.2.0.min.js"></script>
<script>
var obj ={};
var obj1 = {
name:'zyn',
sex:'man'
};
var obj2 ={
name:'jl',
age:39
}
// $.extend(obj,obj1)//把obj1拷貝到obj (用法1)
$.extend(obj,obj1,obj2) //拷貝2次同名屬性覆蓋(用法2)
function getMessage(obj){
var opts ={};
var defalut ={
name:'zyn',
sex:'male',
age:30换薄,
friend:'abc'
};
$.extend(opts,defalut,obj)
// or var opts = $extend({},obj1,obj2)
console.log(opts)
}
getMessage({
name:'jl',
sex:'fmale',
age:19
})//當用戶給定參數(shù)時覆蓋默認的參數(shù)值(用法3)
var obj0 ={};
var obj3 = {
name:'zyn',
sex:'man',
friends:[1,2,3]
};
//$.extend(obj0,obj3);//淺拷貝(用法4)
$.extend(true,obj0,obj3)//深拷貝
$.fn.extend(obj2)//在原形上新增屬性玉雾;or $.extend($.fn,obj2)(用法5)
</script>
</body>
</html>
用法一:把obj1拷貝到obj
用法二:拷貝2次同名屬性覆蓋
用法三:當用戶給定參數(shù)時覆蓋默認的參數(shù)值
用法四:深拷貝,淺拷貝
用法五:在原形上新增屬性轻要;
4. jQuery 的鏈式調(diào)用是什么复旬?
鏈式調(diào)用:使用jQuery方法時,對象方法返回的是對象本身冲泥,可以調(diào)用對此對象的其他jQuery方法赢底,實現(xiàn)連續(xù)調(diào)用多個方法
例如:$(this).siblings().removeClacc('active').addClass('newname')
5. jQuery 中 data 函數(shù)的作用
jQuery.data( element, key, value )
1.element:要存儲數(shù)據(jù)的DOM對象;
2.key:存儲的數(shù)據(jù)名;
3.value:新數(shù)據(jù)值幸冻;
jQuery.data() 方法允許我們在DOM元素上附加任意類型的數(shù)據(jù),避免了循環(huán)引用的內(nèi)存泄漏風險。如果 DOM 元素是通過 jQuery 方法刪除的或者當用戶離開頁面時咳焚,jQuery 同時也會移除添加在上面的數(shù)據(jù)洽损。我們可以在一個元素上設(shè)置不同的值,并獲取這些值:
jQuery.data(document.body, 'foo', 52);
jQuery.data(document.body, 'bar', 'test');
注意:個方法目前并不提供在XML文檔上跨平臺設(shè)置革半,作為Internet Explorer不允許在XML文檔中通過自定義屬性附加數(shù)據(jù)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Data</title>
<style>
div{
color:green;
}
span{
color:red;
}
</style>
</head>
<body>
<div>
hi I am name is
<span class="span1"></span>
and age
<span class="span2"></span>
</div>
<script src="jquery-3.2.0.min.js"></script>
<script>
var div = $('div')[0]//DOM對象
$.data(div,'message',{user:'zyn',age:19});//把屬性名為message的屬性user,age存在Div內(nèi)
$('.span1').text($.data(div,'message').user)//獲取div內(nèi)的屬性值放入span內(nèi)
$('.span2').text($.data(div,'message').age)
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Data</title>
</head>
<body>
<div class="div1" data-role="page" data-last-value="10" data-hidden="true"></div>
<script src="jquery-3.2.0.min.js"></script>
<script>
console.log($('.div1').data("role"))
console.log($('.div1').data("lastValue"))
console.log($('.div1').data("hidden"))
</script>
</body>
</html>
6.寫出以下功能對應(yīng)的 jQuery 方法:
給元素 $node 添加 class active碑定,給元素 $noed 刪除 class active
$node.addClass('active')
$node.removeClass('active')
展示元素$node, 隱藏元素$node
$node.hide()//隱藏
$node.show()//顯示
獲取元素$node 的 屬性: id、src又官、title延刘, 修改以上屬性
$node.attr('id')//獲取
$node.attr('id','btn1')//修改id為btn1
$node.attr('src')//獲取
$node.attr('src','zyn.com')//修改src為zyn.com
$node.attr('title')//獲取
$node.attr('title','jquery-attr')//修改title為jqery-attr
給$node 添加自定義屬性data-src
$node.attr('data-src','qq.com')
在$ct 內(nèi)部最開頭添加元素$node
$('.ct').prepend($node)
在$ct 內(nèi)部最末尾添加元素$node
$('.ct').append($node)
刪除$node
$node.remove()
把$ct里內(nèi)容清空
$('.ct').empty();
在$ct 里設(shè)置 html <div class="btn"></div>
$('.ct').html('<div class="btn"></div>')
獲取、設(shè)置$node 的寬度六敬、高度(分別不包括內(nèi)邊距碘赖、包括內(nèi)邊距、包括邊框外构、包括外邊距)
無參數(shù)獲得寬度普泡,高度
有參數(shù)設(shè)置寬度,高度
$node.width(); // width
$node.height(); // height
$node.innerWidth(); // width+ padding
$node.innerHeight(); // height+ padding
$node.outerWidth(); // width+ padding + border
$node.outerHeight(); // height + padding + border
$node.outWidth(true); // width + padding + border + margin
$node.outHeight(true); // height + padding + border + margin
獲取窗口滾動條垂直滾動距離
$(window).scrollTop()
獲取$node 到根節(jié)點水平审编、垂直偏移距離
$node.offset();
$node.offset({ top: 10, left: 30 })//可以設(shè)置位置
修改$node 的樣式撼班,字體顏色設(shè)置紅色,字體大小設(shè)置14px
$node.css({'color':'red','font-szie':'14px'})
遍歷節(jié)點垒酬,把每個節(jié)點里面的文本內(nèi)容重復(fù)一遍
$node.each(function(){
console.log($(this).text())
})
從$ct 里查找 class 為 .item的子元素
$ct.find('.item')
獲取$ct 里面的所有孩子
$ct.children();
$ct.contents();
//.contents()和.children()方法類似砰嘁,只不過前者包括文本節(jié)點和注釋節(jié)點,以及jQuery對象中產(chǎn)生的HTML元素勘究。請注意矮湘,雖然這種方式可以傳遞文本節(jié)點和注釋節(jié)點給一個jQuery集合,但是大多數(shù)操作不會支持他們乱顾。
對于$node板祝,向上找到 class 為'.ct'的父親,在從該父親找到'.panel'的孩子
$node.parents('.ct').find('.panel')
獲取選擇元素的數(shù)量
$node.length;
$node.size()//1.8開始被廢棄
獲取當前元素在兄弟中的排行
$(this).index();
7. 用jQuery實現(xiàn)以下操作
1.當點擊$btn 時走净,讓 $btn 的背景色變?yōu)榧t色再變?yōu)樗{色
2.當窗口滾動時券时,獲取垂直滾動距離
3.當鼠標放置到$div 上,把$div 背景色改為紅色伏伯,移出鼠標背景色變?yōu)榘咨?4.當鼠標激活 input 輸入框時讓輸入框邊框變?yōu)樗{色橘洞,當輸入框內(nèi)容改變時把輸入框里的文字小寫變?yōu)榇髮懀斴斎肟蚴ソ裹c時去掉邊框藍色说搅,控制臺展示輸入框里的文字
5.當選擇 select 后炸枣,獲取用戶選擇的內(nèi)容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>task1</title>
<style>
.bg{
background:red;
}
#div3 .box3{
border: 1px solid #ccc;
width: 150px;
height: 150px;
}
</style>
</head>
<body>
<div id="div1">
<h3>1.當點擊$btn 時,讓 $btn 的背景色變?yōu)榧t色再變?yōu)樗{色</h3>
<button class="btn">點擊變換顏色</button>
</div>
</br>
</br>
<div id="div2">
<h3>2.當窗口滾動時,獲取垂直滾動距離</h3>
<div class="box2">
<p>div垂直的滾動距離為:<span>0px</span></p>
</div>
</div>
</br>
</br>
<div id="div3">
<h3>3.當鼠標放置到$div 上适肠,把$div 背景色改為紅色霍衫,移出鼠標背景色變?yōu)榘咨?lt;/h3>
<div class="box3"></div>
</div>
</br>
</br>
<div id="div4">
<h3>4.當鼠標激活 input 輸入框時讓輸入框邊框變?yōu)樗{色,當輸入框內(nèi)容改變時把輸入框里的文字小寫變?yōu)榇髮懞钛斴斎肟蚴ソ裹c時去掉邊框藍色敦跌,控制臺展示輸入框里的文字</h3>
<input class="txt" type="text" placeholder="請輸入英文字母">
</div>
</br>
</br>
<div id="div5">
<h3>5.當選擇 select 后,獲取用戶選擇的內(nèi)容</h3>
<select name="happy" class="good" >
<option value="0" selectd>請選擇</option>
<option value="1">舞蹈</option>
<option value="2">瑜伽</option>
<option value="3">音樂</option>
<option value="4">旅行</option>
</select>
<p>用戶選擇的內(nèi)容是:<span></span></p>
</div>
</br>
</br>
<script src="jquery-3.2.0.min.js"></script>
<script>
var $btn = $('.btn')
$btn.on('click',function(){
$(this).css({background:'red'})
setTimeout(function(){
$('.btn').css({background:'blue'})
},1000)
})
$(window).on('scroll',function(){
$('.box2 span').text(($(this).scrollTop()));
})
var $div3 = $('.box3')
$div3.on('mouseenter',function(){
$div3.addClass('bg')
})
$div3.on('mouseleave',function(){
$div3.removeClass('bg')
})
var $input = $('.txt')
$input.on('focus',function(){//focus獲取焦點事件
$input.css({border:'1px solid blue'})
})
$input.on('keyup',function(){
$(this).val(function(index,val){
return val.toUpperCase()
})
})
$("input").on("blur",function(){//blur失去焦點事件
$(this).css("border","");
if($(this).val()!=""){
console.log($(this).val());
}
});
$("#div5 span").text($(".good option:selected").text());
$("#div5 .good").on("change",function(){
$("#div5 span").text($(".good option:selected").text());
});
</script>
</body>
</html>
8.用 jQuery ajax 實現(xiàn)如下效果逛揩。`當點擊加載更多會加載數(shù)據(jù)展示到頁面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>新聞實例</title>
<style>
html,body,h2,p,ul,li{
margin:0px;
padding:0px;
list-style: none;
}
a{
color:#333;
text-decoration:none;
}
.container{
width:600px;
margin:0 auto;
}
.item{
margin-top:20px;
}
.item:after{
content:'';
display: block;
clear:both;
}
.item .thumb img{
width:50px;
height: 50px;
}
.item .thumb{
float:left;
}
.item h2{
margin-left:60px;
font-size:14px;
}
.item p{
margin-left:60px;
font-size:14px;
margin-top:10px;
color:#ccc;
}
.load-more{
margin-top:20px;
}
</style>
</head>
<body>
<div class="container">
<ul class="news">
<li>
<a>
<div>
<img src="" alt="">
</div>
<h2></h2>
<p></p>
</a>
</li>
</ul>
<button class="load-more">加載更多</button>
</div>
<script src="jquery-3.2.0.min.js"></script>
<script>
var pageIndex =0;//每次后端給一頁數(shù)據(jù) 一頁數(shù)據(jù)加載2個新聞
$('.load-more').on('click',function(){
$.get('/getNews',{page:pageIndex}).done(function(ret){
if(ret.status === 0){//與后端約定status===0時數(shù)據(jù)發(fā)送成功
pageIndex++;
appendHtml(ret.data)//ret.data獲取后端retNews
}else{
alert('獲取新聞出錯')
}
}).fail(function(){
alert('系統(tǒng)異常')
})
})
function appendHtml(news){
if(news.length === 0){
$('.load-more').remove();
$('.container').append('<p>沒有更多了</p>')//數(shù)據(jù)全部加載完后
}
var html ='';//接受到數(shù)據(jù)后拼接html
$.each(news,function(){
html +='<li class="item">';
html +=' <a href="'+this.link+'">';
html += '<div class="thumb"> ![]('+ this.img +')</div>';
html +='<h2>'+this.title+'</h2>';
html +=' <p>'+this.brif+'</P>';
html +='</a></li>';
})
$('.news').append(html);
}
</script>
</body>
</html>
//后端
app.get('/getNews',function(req,res){
var news = [
{
link:'http://mil.qq.com/mil_index.htm',
img:'http://inews.gtimg.com/newsapp_ls/0/1289576514_150120/0',
title:'韓媒:韓國旅行社停止銷售中國旅游產(chǎn)品 銷量銳減',
brif:'薩德對韓國人民生活的影響-1'
},
{
link:'http://news.qq.com/l/milite/jqlw/listjunqingliaowang2012.htm',
img:'http://inews.gtimg.com/newsapp_ls/0/1290217879_150120/0',
title:'陸克文:特朗普時期柠傍,臺灣問題不再是中美臺面上問題',
brif:'薩德對韓國人民生活的影響-2'
},
{
link:'http://news.qq.com/l/milite/milgn/list2010122872223.htm',
img:'http://inews.gtimg.com/newsapp_ls/0/1290161671_150120/0',
title:'樂天免稅店銷售額銳減25% 韓國免稅店開拓東南亞市場',
brif:'薩德對韓國人民生活的影響-3'
},
{
link:'http://news.qq.com/l/milite/zhoubiansaomiao/list2012095132256.htm',
img:'http://inews.gtimg.com/newsapp_ls/0/1290216074_150120/0',
title:'朝中社:美國“反恐戰(zhàn)”是前所未聞的國家恐怖行為',
brif:'薩德對韓國人民生活的影響-4'
},
{
link:'http://news.qq.com/l/milite/milhqj/list2010122872321.htm',
img:'http://inews.gtimg.com/newsapp_ls/0/1289499164_150120/0',
title:'美前防長:對朝鮮動武風險太大,還是談判吧',
brif:'薩德對韓國人民生活的影響-5'
},
{
link:'http://news.qq.com/l/milite/milhqj/list2010122872321.htm',
img:'http://inews.gtimg.com/newsapp_ls/0/1290217031_150120/0',
title:'央視揭秘遼寧艦首次遠航 露臉的仨人啥來頭辩稽?',
brif:'薩德對韓國人民生活的影響-6'
},
{
link:'http://news.qq.com/l/milite/junbei/list2012095132410.htm',
img:'http://inews.gtimg.com/newsapp_ls/0/1289499766_150120/0',
title:'媒體:留給和平解決朝核問題的時間或許所剩無多',
brif:'薩德對韓國人民生活的影響-7'
},
{
link:'http://v.qq.com/cover/j/j02y37wjjgnxdel.html?vid=q0016flpc3k',
img:'http://inews.gtimg.com/newsapp_ls/0/1289332905_150120/0',
title:'德女防長回懟特朗普欠軍費言論:我們不欠北約的錢',
brif:'薩德對韓國人民生活的影響-8'
},
{
link:'http://news.qq.com/l/milite/gaoqingtuku/listgaoqingtuku2012.htm',
img:'http://inews.gtimg.com/newsapp_ls/0/1289495870_150120/0',
title:'俄媒:學(xué)生超越老師 中國造艦已遙遙領(lǐng)先俄羅斯',
brif:'薩德對韓國人民生活的影響-9'
},
]
var pageIndex = req.query.page;
var len = 2;
var retNews = news.slice(pageIndex*len,pageIndex*len+len)//獲取數(shù)據(jù)第一次0 2 /第二次 2 4 /....
res.send({
status:0,
data:retNews
})
})
版權(quán)歸饑人谷 楠柒 所有 如有轉(zhuǎn)載請附上地址