1. jQuery 中， $(document).ready()是什么意思？
$(document).ready()方法：為防止文檔在完全加載之前運行Jquery代碼,若在文檔未完全加載前就運行函數,操作可能失敗.必須在文檔加載完后執行操作,可使用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的區別是：前置只包括文檔元素的加載，后者是所有資源的加載; onload 要等所有資源加載，包括 圖片、CSS、JS、Iframe;另一個事件，不等所以，ready比onload先執行
2.$node.html()和$node.text()的區別?
$node.html()，返回所選擇元素內的html內容，包含html標簽和文本內容
$node.text()，返回所選擇元素內的文本內容，不包含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>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()將多個對象合并到一起，可以傳入多個參數。$.extend([deep,] target,…)[deep,]為布爾值默認情況不是深拷貝，可設置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
})//當用戶給定參數時覆蓋默認的參數值(用法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
QQ截圖20170322152116.jpg
用法二：拷貝2次同名屬性覆蓋
QQ截圖20170322152151.jpg
用法三：當用戶給定參數時覆蓋默認的參數值
QQ截圖20170322152510.jpg
用法四：深拷貝，淺拷貝
QQ截圖20170322152911.jpg
用法五：在原形上新增屬性；
QQ截圖20170322153210.jpg
4. jQuery 的鏈式調用是什么？
鏈式調用：使用jQuery方法時，對象方法返回的是對象本身，可以調用對此對象的其他jQuery方法，實現連續調用多個方法
例如：$(this).siblings().removeClacc('active').addClass('newname')
5. jQuery 中 data 函數的作用
jQuery.data( element, key, value )
1.element:要存儲數據的DOM對象；
2.key:存儲的數據名；
3.value:新數據值；
jQuery.data() 方法允許我們在DOM元素上附加任意類型的數據,避免了循環引用的內存泄漏風險。如果 DOM 元素是通過 jQuery 方法刪除的或者當用戶離開頁面時，jQuery 同時也會移除添加在上面的數據。我們可以在一個元素上設置不同的值，并獲取這些值：
jQuery.data(document.body, 'foo', 52);
jQuery.data(document.body, 'bar', 'test');
注意：個方法目前并不提供在XML文檔上跨平臺設置，作為Internet Explorer不允許在XML文檔中通過自定義屬性附加數據
<!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內
$('.span1').text($.data(div,'message').user)//獲取div內的屬性值放入span內
$('.span2').text($.data(div,'message').age)
</script>
</body>
</html>
QQ截圖20170322161827.jpg
<!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>
QQ截圖20170322172017.jpg
6.寫出以下功能對應的 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 內部最開頭添加元素$node
$('.ct').prepend($node)
在$ct 內部最末尾添加元素$node
$('.ct').append($node)
刪除$node
$node.remove()
把$ct里內容清空
$('.ct').empty();
在$ct 里設置 html <div class="btn"></div>
$('.ct').html('<div class="btn"></div>')
獲取、設置$node 的寬度、高度(分別不包括內邊距、包括內邊距、包括邊框、包括外邊距)
無參數獲得寬度，高度
有參數設置寬度，高度
$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 到根節點水平、垂直偏移距離
$node.offset();
$node.offset({ top: 10, left: 30 })//可以設置位置
修改$node 的樣式，字體顏色設置紅色，字體大小設置14px
$node.css({'color':'red','font-szie':'14px'})
遍歷節點，把每個節點里面的文本內容重復一遍
$node.each(function(){
console.log($(this).text())
})
從$ct 里查找 class 為 .item的子元素
$ct.find('.item')
獲取$ct 里面的所有孩子
$ct.children();
$ct.contents();
//.contents()和.children()方法類似，只不過前者包括文本節點和注釋節點，以及jQuery對象中產生的HTML元素。請注意，雖然這種方式可以傳遞文本節點和注釋節點給一個jQuery集合，但是大多數操作不會支持他們。
對于$node，向上找到 class 為'.ct'的父親，在從該父親找到'.panel'的孩子
$node.parents('.ct').find('.panel')
獲取選擇元素的數量
$node.length;
$node.size()//1.8開始被廢棄
獲取當前元素在兄弟中的排行
$(this).index();
7. 用jQuery實現以下操作
1.當點擊$btn 時，讓 $btn 的背景色變為紅色再變為藍色
2.當窗口滾動時，獲取垂直滾動距離
3.當鼠標放置到$div 上，把$div 背景色改為紅色，移出鼠標背景色變為白色
4.當鼠標激活 input 輸入框時讓輸入框邊框變為藍色，當輸入框內容改變時把輸入框里的文字小寫變為大寫，當輸入框失去焦點時去掉邊框藍色，控制臺展示輸入框里的文字
5.當選擇 select 后，獲取用戶選擇的內容
<!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 的背景色變為紅色再變為藍色</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 背景色改為紅色，移出鼠標背景色變為白色</h3>
<div class="box3"></div>
</div>
</br>
</br>
<div id="div4">
<h3>4.當鼠標激活 input 輸入框時讓輸入框邊框變為藍色，當輸入框內容改變時把輸入框里的文字小寫變為大寫，當輸入框失去焦點時去掉邊框藍色，控制臺展示輸入框里的文字</h3>
<input class="txt" type="text" placeholder="請輸入英文字母">
</div>
</br>
</br>
<div id="div5">
<h3>5.當選擇 select 后，獲取用戶選擇的內容</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>用戶選擇的內容是:<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>
20170322_201808.gif
8.用 jQuery ajax 實現如下效果。`當點擊加載更多會加載數據展示到頁面
<!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;//每次后端給一頁數據 一頁數據加載2個新聞
$('.load-more').on('click',function(){
$.get('/getNews',{page:pageIndex}).done(function(ret){
if(ret.status === 0){//與后端約定status===0時數據發送成功
pageIndex++;
appendHtml(ret.data)//ret.data獲取后端retNews
}else{
alert('獲取新聞出錯')
}
}).fail(function(){
alert('系統異常')
})
})
function appendHtml(news){
if(news.length === 0){
$('.load-more').remove();
$('.container').append('<p>沒有更多了</p>')//數據全部加載完后
}
var html ='';//接受到數據后拼接html
$.each(news,function(){
html +='<li class="item">';
html +=' <a href="'+this.link+'">';
html += '<div class="thumb"> </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:'韓媒：韓國旅行社停止銷售中國旅游產品 銷量銳減',
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:'朝中社：美國“反恐戰”是前所未聞的國家恐怖行為',
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:'俄媒：學生超越老師 中國造艦已遙遙領先俄羅斯',
brif:'薩德對韓國人民生活的影響-9'
},
]
var pageIndex = req.query.page;
var len = 2;
var retNews = news.slice(pageIndex*len,pageIndex*len+len)//獲取數據第一次0 2 /第二次 2 4 /....
res.send({
status:0,
data:retNews
})
})
20170322_204000.gif
版權歸饑人谷 楠柒 所有 如有轉載請附上地址
