jQuery概述 js與jQuery 獲取的對象 jQuery獲取的是jquery對象,js獲取的是js對象(dom對象),dom對象不能調用jquery的方法,jquery對象也不能調用dom對象的方法 dom對象轉換為jQuery對象:$(dom對象) 層級選擇器 子代選擇器 $("ul>li" ...
js與jQuery
獲取的對象
jQuery獲取的是jquery對象,js獲取的是js對象(dom對象),dom對象不能調用jquery的方法,jquery對象也不能調用dom對象的方法
dom對象轉換為jQuery對象:$(dom對象)
層級選擇器
子代選擇器 $("ul>li") 使用>號,獲取兒子層級的元素,註意:並不會獲取孫子層的元素後代選擇器 $("ul li") 使用空格,代表後代選擇器,獲取ul下的所有的li元素,包括孫子輩
jQuery解決的問題
將原生的單個化操作，批量操作
將原生的複雜的查詢方式，簡單化
將原生逐步操作的方式，鏈式操作
將原生操作複雜的邏輯，提供簡單的介面
隊列控制：
為瞭解決原生的js的不足,隊列也可以解決回調地獄
控制非同步代碼的執行順序
把要執行的每一步放在數組[1,2,3,4,5],一步一步執行
入隊..出隊
三種隊列
-
animate(最高級別)
$("div").animate({width:400},1000) -
fx
queue dequeue -
自定義隊列
finish 直接結束,來到最後一個狀態
stop 結束當前隊列的狀態,進行下一個狀態
插件機制：
插件:能夠讓功能進行擴展的一個術語,讓一個對象的功能進行擴展
-
jQuery.fn.extend(object)
多庫共存：
項目的開發方式
本質：
JavaScript框架
宗旨：
write Less do More
作用：
優化js操作、dom操作、頁面交互、事件、ajax、動效
特性：
隱式迴圈，鏈式調用
jQuery核心函數：
jQuery ( )=$ ( )
-
undefinde
返回空的jquery對象
-
選擇器,返回jQuery對象
jQuery(".box") -
函數，給document 添加 ready事件
這個函數在 頁面載入完成後執行
jQuery(function(){
})
jQuery("document").reaady(function(){
})
jQuery().ready(function(){
}) //作用一樣 -
傳入dom對象，返回jQuery對象
jQuery(function(){
let box=document.querySelector(".box");
jQuery(box);
}) -
傳入字元串 ,創建新節點 "<div></div>"
$(function(){
$("<div><span>this is span</span></div>").appendTo($(".box"))
})
jQuery對象常用方法：
-
選擇器
-
.css ("樣式屬性","樣式值") .css ( { } )
$(function(){
$(".box").css({
backgroundColor:"blue",
borderRadius:50%
})
})
-
篩選器 :first :not(selector) :even
:header=>匹配如 h1, h2, h3之類的標題元素
:eq(index)=>匹配一個給定索引值的元素
:gt(index)=>匹配所有大於給定索引值的元素
:animated=>選擇正在運動的元素
$(function(){
$(".box:first").css("background-color","red")
})
-
-
篩選的方法：
-
.eq (index) 返回對應下標的jQuery對象
-
.get (index) 返回對應下標的原生對象
-
.first( )
-
.last( )
-
.hasClass("類名") 判斷jQuery數組中是否有一個類名為***對象 返回true、false
$(function(){
$(".son").hasClass("son2")
}) -
.filter([選擇器]，[元素]，[，function]) 篩選出符合條件的對象
$(function(){
$(".son").filter("son2")
})
$(function(){
$(".son").filter(function(item){
$(this).attr("class")=="box2"
})
}) -
.is("選擇器") 判斷是否為某個標簽
-
.map (fn) 遍歷對象 生成一個新的數組
-
.has ("選擇器") 返回一個選中的jQuery對象
$(function(){
$(".box").has("span").css("background","red")
}) -
.not ("選擇器") 從jQuery數組中刪除選中的元素
$(function(){
$(".box").not(".box2")
}) -
.slice (start,[end]) 截取指定位置的jQuery的對象 傳入的是下標
$(function(){
$(".box").slice(5)；
}) -
.each (fn) 遍歷jQuery數組，index在前、item在後
$(function(){
$(".box").each(function(index,item){
console.log(item)
})；
}) -
.index ( ) 返回jQuery對象在數組中的下標
-
-
操作屬性的方法：
-
attr ( )
-
removeAttr ( )
-
prop ( )
-
removeProp ( )
-
-
操作類名的方法
-
addClass ( )
-
removeClass ( )
-
toggleClass ( )
$(function(){
$(".box").addClass("box2")
})
-
-
操作內容的方法：
-
.text ( )
-
.html ( ) 可以識別<>
-
.val ( )
-
-
jQuery對象元素的位置信息
-
.offset ( ) 返回一個位置信息的對象 相對於瀏覽器的位置
{top:**,left:**} -
.position ( ) 返回一個位置信息的對象 相對於定位的祖先元素的位置
{top:**,left:**} -
.scrollTop ( )
-
.scrollLeft ( )
-
-
常用方法
.toArray ( ) 將jQuery對象轉換為原生對象
-
事件對象：
e.offsetX
e.offsetY
e.pageX
e.pageY
e.Target
e.currentTarget ==this
e.stopPropagation 阻止事件流
e.preventDefault 阻止預設事件
-
事件
$("div").click(function () {
$("div").css("color","red")
})
one（）
on（）
trigger（） 自動觸發事件
triggerHandler 自動觸發事件，並且清除瀏覽器預設行為
hover(fn,fn)
ajax:
ajax要解決的問題
-
頁面無刷新操作數據
-
按需獲取數據的問題
-
讓b/s架構的軟體，能像c/s架構的軟體操作流暢
ajax（async javascript and xml）
利用javascript非同步操作數據
new XMLHttpRequest()
function ajax(params){
if (typeof params!=='object'){
console.error('參數類型不對');
return
}
if (!params.url){
console.error('請輸入url')；
return
}
//參數初始化
var url=url
var type=params.type||"get"
var datatype=params.dataType||"text"
//處理數據
var data=params.data||""
if (typeof data=='object'){
var str=""
for(var i in data){
str+=i+"="+data[i]+"&"
}
data=str.slice(0,-1)
}
//判斷獲取方式
var ajax=new XMLHttpRequest()
ajax.onload=function(){
}
if (type=='get'){
ajax.open("get","/ajax?name=zhang")
ajax.send()
}
else if (type=="post"){
ajax.open("post","/ajax")
ajax.setRequestHeader("content-type","application/x-www-form-urlencoded")
ajax.send("name=zhangsan")
}
}
ajax({
url:'/', 必須有
type:'get', 可有可無
dataType:'text', 可有可無
data:{name:"zhangsan"}, 可有可無
success:function(data){ 可有可無
upDate(data)
},
})
#天氣頁面獲取數據
$(".btn").click(function(){
$.ajax({
url:"https://www.toutiao.com/stream/widget/local_weather/data/?city=太原",
dataType:"json",
success:function(data){
upDate(data)
},
error:function(){
console.log("no")
}
})
}).trigger("click")
function upDate(data){
$(".box").text(data.data.weather.aqi)
console.dir(data.data.weather)
$(".box2").text(data.data.weather.city_name)
$(".box3").text(data.data.weather.dat_condition
)
}
xml
html、svg是xml衍生出來的
html也叫模板，數據也叫模型
svg=>矢量圖
ajax獲取數據
建立:1.xml
建立:2.html
//表格
<script>
window.onload=function(){
var ajax=new XMLHttpRequest()
var tbody=document.querySelector("tbody")
ajax.onload=function(){
console.log(ajax.response)
con=ajax.responseXML
stu=con.getElementsByTagName("stu")
var str=''
for (i=0;i<stu.length;i++){
var name=con.getElementsByTagName("name")[i].innerHTML
var age=con.getElementsByTagName("age")[i].innerHTML
var se $("ul>li") x=con.getElementsByTagName("sex")[i].innerHTML
str=str+'<tr><td>'+name+'</td><td>'+age+'</td><td>'+sex+'</td></tr>'
}
tbody.innerHTML=str
}
ajax.open("get","aa.xml")
ajax.send()
}
<script>
ajax.response 返迴文本,預設為文本格式
ajax.responseXML 返迴文檔，document格式
ajax.responseType 指定返回格式 可以加："Text" "bold" "document" "json"
ajax傳遞數據
uri 統一資源標示符（Uniform Resource Identifier）
url 統一資源標示符（Uniform Resource Locator）
url（一個資源在互聯網中的唯一標示）是uri的一種
/add?id={{item.id}} ？後面是數據獲取 false 同步 true 非同步（預設為非同步）
-
get方式
ajax.open("get","/ajax?name=zhang")
ajax.send() -
post方式
ajax.open('post','/',true,user,passwd)
第一個參數指定獲取格式，第二個制定路徑（從哪獲取），第三個制定同步或非同步（true=>非同步、預設為非同步false=>同步），第四個是用戶名，最後一個是密碼
