技術標籤：jqueryjavascript

jquery介紹

jQuery 是一個高效、精簡併且功能豐富的 JavaScript 工具庫，極大的簡化JavaScript程式設計。

包含的功能有：HTML元素的選取和操作、CSS操作、HTML事件函式、JS特效和動畫、DOM遍歷和修改、Ajax

引用方式：直接下載
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>

可以從 CDN 中載入 jQuery, 如從 Google 中載入 jQuery

這個是百度的cdn
<
 
head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
</head>

jQuery基本語法
通過 jQuery，您可以選取（查詢，query） HTML 元素，並對它們執行"操作"（actions）。

美元符號定義 jQuery
選擇符（selector）"查詢"和"查詢" HTML 元素
jQuery 的 action() 執行對元素的操作
例項：
$(this).hide(
 
) - 隱藏當前元素
$("p").hide() - 隱藏所有 <p> 元素
$("p.test").hide() - 隱藏所有 class="test" 的 <p> 元素
$("#test").hide() - 隱藏 id="test" 的元素

jQuery載入

$(document).ready(function(){
var $div = $('#div');
alert('jquery彈出:'+$div);
});
// 可以簡寫為
$(function(){
var
 
 $div = $('#div');
alert('jquery彈出:'+$div);
});

選擇器詳解

選擇器

JQ選擇器規則與CSS樣式相同：
$("#id") // id
$("
.class") // 類
$(“li”) // 所有li元素
$("#ul1 li span") // ul下的li下的span元素
$(“input[name=first]”) // name屬性為first的input元素

過濾選擇器

$(‘div’).has(‘p’); // 選擇包含p元素的div元素
$(‘div’).not(’.myclass’); //選擇class不等於myclass的div元素
$(‘div’).filter(’.myclass’);//選擇class等於myclass的div元素
$(‘div’).eq(5); //索引->0開始；選擇第6個div元素

選擇集轉移

$(‘div’).prev(); // 選擇div元素前面緊挨的同輩元素
$(‘div’).preAll(); // 選擇div元素之前所有的同輩元素
$(‘div’).next(); // 選擇div元素之後緊挨的同輩元素
$(‘div’).nextAll(); // 選擇div元素之後所有的同輩元素
$(‘div’).parent();// 選擇div的父元素
$(‘div’).children(); // 選擇div所有的子元素
$(‘div’).siblings(); // 選擇div的同級元素
$(‘div’).find(’.myclass’);//選擇div內的class等於myclass的元素

判斷是否用到了選擇器

jquery有容錯機制所以即使沒有找到元素,也不會出錯,
可以用length屬性來判斷是否找到了元素。length=0->沒
選擇到。length大於0->選擇到了

屬性

$(“div”).css(“color”); // 獲取div樣式
$(“div”).css({“fontSize”:“color”:“red”}); // 設定div樣式
$("#div").html(); // js中innerHTML()
$("#div").val(); // js中value()
$("#div").prop(“src”); // 取出某個屬性的值(自有屬性)
$("#div").prop({src:“test.jpg”}); // 設定某個屬性的值
$("#div").attr(); // js中attribute()–>(自定義屬性)

操作樣式類名

$("#div1").addClass(“divClass2”) ; // 為id為div1物件追加樣式divClass2
$("#div1").removeClass(“divClass”); // 為id=div1移除divClass樣式
$("#div1").removeClass(“divClass divClass2”) ;//移除多個樣式
$("#div1").toggleClass(“anotherClass”) ; //重複切換anotherClass樣式

jQuery事件

事件

blur() // 元素失去焦點
focus() // 元素獲得焦點
click() // 滑鼠單擊
mouseover() // 滑鼠進入(進入子元素也觸發)
mouseout() // 滑鼠離開(離開子元素也觸發)
mouseenter() // 滑鼠進入(進入子元素不觸發)
mouseleave() // 滑鼠離開(離開子元素不觸發)
hover() // 同時為mouseenter和mouseleave事件指定處理函式
ready() // DOM載入完成
resize() // 瀏覽器視窗的大小發生變化
scroll() // 滾動條的位置發生變化
submit() // 使用者遞交表單

jQuery的特殊效果

fadeOut() // 淡出
fadeToggle() // 切換淡入淡出
hide() // 隱藏元素
show() // 顯示元素
toggle() // 切換元素的可見狀態
slideDown() // 向下展開
slideUp() // 向上捲起
slideToggle() // 依次展開或者捲起某個元素

jQuery動畫

animate動畫

$('.box').animate({'height':'400px'}, 1000,function(){
					$('box').animate({'width':'400px'});
});