jquery是一個(gè)開源葡秒,輕量的javascript腳本庫(kù)
jquery效果可用js實(shí)現(xiàn)
jquery
1.下載jquery文件
2.引用jquery ? <script src="js/jquery-3.4.1.min.js"></script>
3.入口函數(shù)(必須的)保證頁(yè)面正常加載
/*入口函數(shù)*/
一種/* $(function(){
console.log("dssd");
}) */
兩種/* $(document).ready(function(){
console.log("dfsfds");
}) */
***********************************
獲取元素
$(“選擇器”)
***********************************
jQuery對(duì)象和DOM對(duì)象轉(zhuǎn)換
***********************************
DOM對(duì)象變?yōu)閖Query對(duì)象
var div1=document.getElementById("div1");
$(div1)
***********************************
jQuery對(duì)象變?yōu)镈OM對(duì)象
$("div").get(0)
$("div")[0]
***********************************
jQuery對(duì)頁(yè)面節(jié)點(diǎn)的操作
(1)設(shè)置節(jié)點(diǎn)樣式
$("div").css("color","red");//一個(gè)樣式
$("div").css({"color":"red","background-color":"green"});//多個(gè)樣式
***********************************
(2)設(shè)置節(jié)點(diǎn)內(nèi)容
/* $("div").text("fsfdsafa"); */
/* $("div").html("fsfasdf"); */
***********************************
(3)設(shè)置或獲取節(jié)點(diǎn)屬性
attr(“屬性名稱”狐树,“屬性值”)設(shè)置屬性
attr(“屬性名稱”)獲取該屬性的值
addClass(“類名”) 添加類
removeclass(“類名”) 刪除類
hasclass(“類名”) 判斷接待你是否有該類
***********************************
(4)獲取表單的值
val() 獲取文本框的值
***********************************
DOM樹的遍歷
children(“選擇器”)查找所有子節(jié)點(diǎn)(無(wú)參數(shù))/查找特定子節(jié)點(diǎn)(有參數(shù))
siblings(“選擇器”) 查找所有的兄弟(無(wú)參數(shù))/查找特點(diǎn)的兄弟
prev()/ next()上一個(gè)兄弟/下一個(gè)兄弟
parent()查找父節(jié)點(diǎn)
find(“選擇器”)查找所有子節(jié)點(diǎn)中符合的節(jié)點(diǎn)
***********************************
創(chuàng)建節(jié)點(diǎn)
var $node=$("<p>nihao</p>");
***********************************
插入節(jié)點(diǎn)
/*子節(jié)點(diǎn)*/
//$("div").append($node);//作為最后一個(gè)子節(jié)點(diǎn)插入
//$("div").prepend($node);//作為第一個(gè)節(jié)點(diǎn)插入
/*兄弟節(jié)點(diǎn)*/
//$("p").after($node);//添加下一個(gè)節(jié)點(diǎn)
//$("p").before($node);//添加上一個(gè)節(jié)點(diǎn)
***********************************
刪除節(jié)點(diǎn)
//$("p").remove();//刪除所有被選中節(jié)點(diǎn),包括文本和子節(jié)點(diǎn)
$("p").empty();//刪除本身和子節(jié)點(diǎn)
***********************************
動(dòng)畫
顯示隱藏 show(speed序厉,callback) hide(speed扣囊,callback)//寬高同時(shí)縮小
或者 slideDown(speed绘盟,callback) slideUp(speed表伦,callback) //只改變高度
或者fadeIn(speed迄沫,callback) fadeOut(speed,callback)//改變透明度
兩個(gè)參數(shù) callback speed
callback回調(diào)函數(shù) speed速度
***********************************
自定義動(dòng)畫 animate({json格式的樣式}攒巍,時(shí)間嗽仪,回調(diào)函數(shù))