JQ語法
各位朋友，很高心你們來到個人博客，今天我將帶領你們學習和回顧一下JQ基本語法，讓咱們的編碼變得簡簡單單，Let's go!!! jquery學習網站javascript
jQuery 語法:
原理：jQuery 語法是爲 HTML 元素的選取編制的，能夠對元素執行某些操做。css
基礎語法是：$(selector).action()html
- 美圓符號定義 jQuery
- 選擇符（selector）「查詢」和「查找」 HTML 元素
- jQuery 的 action() 執行對元素的操做
知道了上面的語法後，咱們就能夠但是編譯的過程了，本次介紹爲面向過程的方法java
1、 文檔就緒函數jquery
$(document).ready(function(){
--- jQuery functions go here ----
});
2、 jQuery 名稱衝突api
var Y=jQuery.noConflict()，幫助您使用本身的名稱（好比 Y）來代替 $ 符號。瀏覽器
3、 jQuery 選擇器 服務器
1. jQuery 元素選擇器app
jQuery 使用 CSS 選擇器來選取 HTML 元素。ide
$("p") 選取 <p> 元素。
$("p.intro") 選取全部 class="intro" 的 <p> 元素。
$("p#demo") 選取全部 id="demo" 的 <p> 元素。
2. jQuery 屬性選擇器
jQuery 使用 XPath 表達式來選擇帶有給定屬性的元素。
$("[href]") 選取全部帶有 href 屬性的元素。
$("[href='#']") 選取全部帶有 href 值等於 "#" 的元素。
$("[href!='#']") 選取全部帶有 href 值不等於 "#" 的元素。
$("[href$='.jpg']") 選取全部 href 值以 ".jpg" 結尾的元素。
3. jQuery CSS 選擇器
4. 更多的選擇器
4、 jQuery 事件
事件綁定：.bind() .delegate() .off() .on() .one() .trigger() 等
鼠標事件：.click() .contextmenu() .dblclick() .hover() .mousedown() .mouseenter() .mouseleave() .mousemove() .mouseout() .mouseover()
//點擊事件-簡寫
$( "p" ).click(function() {
console.log( "You clicked a paragraph!" );
});
//點擊事件
$( "p" ).on( "click", function() {
console.log( "click" );
});
//綁定多個事件
2個事件執行一個函數
$( "input" ).on(
"click change", //
function() {
console.log( "An input was clicked or changed!" );
}
);
2個事件執行各自的函數（事件放在對象裏）
$( "p" ).on({
"click": function() { console.log( "clicked!" ); },
"mouseover": function() { console.log( "hovered!" ); }
});
$( "p" ).off( "click" ); //關閉click事件
2個事件執行各自的函數（事件鏈接在一塊兒）
var foo = function() { console.log( "foo" ); };
var bar = function() { console.log( "bar" ); };
$( "p" ).on( "click", foo ).on( "click", bar );
$( "p" ).off( "click", bar );
// 只第一次點擊有效
$( "p" ).one( "click", firstClick );
// 鼠標懸浮(移入和移出)
$( "p" ).hover(function() {
$( this ).toggleClass( "hover" );
});
事件對象 - Event : event.pageX event.pageY event.preventDefault() event.stopPropagation() event.type event.data event.result
// 阻止a標籤的默認事件
// 點擊a,打印出其內容 -codeone
$( "#list a" ).on( "click", function( event ) {
event.preventDefault();
console.log( $( this ).text() );
});
// 點擊#list下面全部herf帶有http的a標籤，讓其增長一個target的屬性，值爲_blank; -codetwo
$( "#list" ).on( "click", "a[href^='http']", function( event ) {
event.preventDefault();
$( this ).attr( "target", "_blank" );
});
$( "#list" ).on( "click", "a", function( event ) {
event.preventDefault();
var elem = $( this );
if ( elem.is( "[href^='http']" ) ) {
elem.attr( "target", "_blank" );
}
});
// 文檔加載後，無需點擊，a自動執行上述點擊後的函數 -codethree
$( "a" ).trigger( "click" );
表單事件：.blur() .change() .focus() .select() .submit()
兩種方式均可,event阻止submit默認事件
$( "#form" ).on( "submit", function( event ) {
// 取消默認事件
event.preventDefault();
// 取消冒泡
event.stopPropagation();
});
$( "#form" ).on( "submit", function( event ) {
// 取消默認事件和取消冒泡
return false;
});
一個元素的值改變的時候將觸發change事件。此事件僅限用於<input>元素，<textarea>和<select>元素。
對於下拉選擇框，複選框和單選按鈕，當用戶用鼠標做出選擇，該事件當即觸發，但對於其餘類型的input元素，
該事件觸發將推遲，直到元素失去焦點纔會觸點。
select多選框：
<select class="target">
<option value="option1" selected="selected">Option 1</option>
<option value="option2">Option 2</option>
</select>
js代碼：
$('.target').change(function() {
alert("已觸發change");
});
鍵盤事件：.keydown() .keypress() .keyup()
5、 jQuery 效果
隱藏、顯示、切換，滑動，淡入淡出，以及動畫，這些都是JQ自帶的一些方法，哇哦，貌似很厲害！
下面二中寫法均可以實現相同的效果！後者是前者的簡寫形式
$("#btn").on("click",function(){}) == $("#btn").click(function(){})
$("#btn").on("click",function(){
$("#box").show(1000); //點擊時，id爲box顯示，動畫時間1s
})
$("#btn").on("click",function(){
$("#box").hide(1000); //點擊時隱藏
})
$("#btn").on("click",function(){
$("#box").toggle(1000); //點擊隱藏or顯示的切換
})
$("#btn").on("click",function(){ //淡入
$("#box").fadeIn(1000);
})
$("#btn").on("click",function(){ //淡出
$("#box").fadeOut(1000);
})
$("#btn").on("click",function(){ //淡入or淡出的切換
$("#box").fadeToggle(1000);
})
$("#btn").on("click",function(){
$("#box").slideDown("fast"); //下滑 參數：slow/fast/毫秒
})
$("#btn").on("click",function(){ //上滑
$("#box").slideUp("slow");
})
$("#btn").on("click",function(){ //下滑or上滑的切換
$("#box").slideToggle(4000);
})
$("#btn").on("click",function(){ //css與animate不一樣在於過渡效果
//$("#box").css({
// width:"800px",
// left:"100px",
//})
$("#box").animate({ //寬度和左偏移量爲同步進行
width:"800px",
left:"100px",
},1000)
})
JQ中調用多個動畫， 提供針對動畫的隊列功能。
$("#btn").on("click",function(){
$("#box").stop(true,false); //前個false中止當前動畫，執行後面排隊動畫（true爲不執行後面動畫），後個false默認中止當前動畫(true爲直接跳轉此動畫結束)
})
設置時間的方法：
// 動畫默認時間
{
slow: 600,
fast: 200,
_default: 400 // Default speed, used for "normal"
}
// 修改和自定義動畫時間
jQuery.fx.speeds.fast = 300; // fast由默認200變成300
jQuery.fx.speeds.blazing = 100; // 自定義的動畫時間參數
jQuery.fx.speeds.excruciating = 60000; // 自定義的動畫時間參數
執行隊列動畫的方法：
執行隊列動畫的幾種方法的
// next()開啓下一個動畫，
$("div").on("click",function(){
$(this).animate({width:"+=60px"},1000)
.queue(function(next){
console.log("事件1");
next();
})
.queue(function(next){
console.log("事件2");
next();
})
.queue(function(next){
console.log("事件3");
next();
})
.queue(function(next){
console.log("事件4");
next();
})
.queue(function(next){
console.log("事件5");
next();
})
});
// dequeue()開啓下一個
$("div").on("click",function(){
$(this).animate({width:"+=60px"},1000)
.queue(function(){
console.log("事件1");
$(this).dequeue();
})
.queue(function(){
console.log("事件2");
$(this).dequeue();
})
.queue(function(){
console.log("事件3");
$(this).dequeue();
})
.queue(function(){
console.log("事件4");
$(this).dequeue();
})
.queue(function(){
console.log("事件5");
$(this).dequeue();
})
});
//自帶的先執行即4先執行 4->1->2->3
//自定義的bi最後須要.dequeue("bi")調用
$("div").on("click",function(){
$(this)
.queue("bi",function(){
console.log("事件1");
$(this).dequeue("bi");
})
.queue("bi",function(){
console.log("事件2");
$(this).dequeue("bi");
})
.queue("bi",function(){
console.log("事件3");
$(this).dequeue("bi");
})
.queue(function(){
console.log("事件4");
})
.dequeue("bi")
});
6、 jQuery 文檔操做方法
| 方法 | 描述 |
|---|---|
| addClass() | 向匹配的元素添加指定的類名。 |
| after() | 在匹配的元素以後插入內容。 |
| append() | 向匹配元素集合中的每一個元素結尾插入由參數指定的內容。 |
| appendTo() | 向目標結尾插入匹配元素集合中的每一個元素。 |
| attr() | 設置或返回匹配元素的屬性和值。 |
| before() | 在每一個匹配的元素以前插入內容。 |
| clone() | 建立匹配元素集合的副本。 |
| detach() | 從 DOM 中移除匹配元素集合。 |
| empty() | 刪除匹配的元素集合中全部的子節點。 |
| hasClass() | 檢查匹配的元素是否擁有指定的類。 |
| html() | 設置或返回匹配的元素集合中的 HTML 內容。 |
| insertAfter() | 把匹配的元素插入到另外一個指定的元素集合的後面。 |
| insertBefore() | 把匹配的元素插入到另外一個指定的元素集合的前面。 |
| prepend() | 向匹配元素集合中的每一個元素開頭插入由參數指定的內容。 |
| prependTo() | 向目標開頭插入匹配元素集合中的每一個元素。 |
| remove() | 移除全部匹配的元素。 |
| removeAttr() | 從全部匹配的元素中移除指定的屬性。 |
| removeClass() | 從全部匹配的元素中刪除所有或者指定的類。 |
| replaceAll() | 用匹配的元素替換全部匹配到的元素。 |
| replaceWith() | 用新內容替換匹配的元素。 |
| text() | 設置或返回匹配元素的內容。 |
| toggleClass() | 從匹配的元素中添加或刪除一個類。 |
| unwrap() | 移除並替換指定元素的父元素。 |
| val() | 設置或返回匹配元素的值。 |
| wrap() | 把匹配的元素用指定的內容或元素包裹起來。 |
| wrapAll() | 把全部匹配的元素用指定的內容或元素包裹起來。 |
| wrapinner() | 將每個匹配的元素的子內容用指定的內容或元素包裹起來。 |
//1. 讀取元素內容
console.log($("#p0").text()); //不帶html的標記，p0內容帶的標籤會被解析
console.log($("#p0").html()); //帶html,p0內容帶的標籤不會解析
$("#a").on("click",function(){
alert($("input").val());
});
//2. 修改內容
$("#aa").on("click",function(){
$("p").text("二師兄不信");
})
//3. 查看屬性
console.log($("#p1").attr("cc"));
//4. 修改屬性
$("#p1").attr({"cc":500,"bb":"world","dd":"zsf"});
$("#p1").removeAttr("cc");
//5. 添加元素
$("#p2").append("<strong>哈哈</strong>"); //後面加
$("#p2").prepend("<strong>嘿嘿</strong>"); //前面加
$("#p2").before("<strong>哈哈</strong>"); //p以前
$("#p2").after("<strong>嘿嘿</strong>"); //p以後
//6. 刪除元素
$("#div0").remove(); //刪除自己及其子集，沒法取回
$("#div0").empty(); //不刪除自己
七： jQuery CSS 操做函數
| CSS 屬性 | 描述 |
|---|---|
| css() | 設置或返回匹配元素的樣式屬性。 |
| height() | 設置或返回匹配元素的高度。 |
| offset() | 返回第一個匹配元素相對於文檔的位置。 |
| offsetParent() | 返回最近的定位祖先元素。 |
| position() | 返回第一個匹配元素相對於父元素的位置。 |
| scrollLeft() | 設置或返回匹配元素相對滾動條左側的偏移。 |
| scrollTop() | 設置或返回匹配元素相對滾動條頂部的偏移。 |
| width() | 設置或返回匹配元素的寬度。 |
// css操做
//1. 增長css樣式
$("#div1").addClass("aa bb"); //同時增長類名爲aa和bb的樣式，注意空格隔開
$("#toggle").on("click",function(){
$("#p1").toggleClass("aa bb"); // toggleClass是增長和刪除的切換
});
//2. 刪除css樣式
$("#div1").removeClass("bb");
//3. 修改css樣式
$("#div2").css("background","red");
//4. 查看css樣式
console.log($("#div2").css("backgroundColor"));
console.log($("#div2").css("background-color"));
八：jQuery 遍歷
body代碼
<div id="box">
<ul id="ul">
<li class="li1">
<span></span>
</li>
<li class="li2">
<p></p>
</li>
<li class="li3">
<img src="#">
</li>
<li class="li4">
<div class="box1"></div>
</li>
</ul>
</div>
js代碼
$(document).ready(function(){
$("span").parent(); //li1 父級
$("p").parents(); //li2,ul,box,body 全部祖先
$("#box1").parents("ul"); // ul 過濾祖先僅要ul
$("img").parentsUntil("#box"); // li3,ul img和#box之間的祖先
$("img").parentsUntil("#box","ul"); // ul img和#box之間爲ul的祖先
$("img").closest("li") //li3 最近的父級li
$("#ul").children(); // li1,li2,li3,li4 #ul直接子元素
$("#ul").children("li.li3"); // li3 #ul子元素裏類名爲li3的元素
$("#box").find("*"); //ul,li1~li4,span,p,img,#box1 全部後代
$("#box").find("span"); //span 全部後代span
$(".li1").siblings(); // li2,li3,li4 全部同胞
$(".li1").siblings(".li3"); // li3 全部同胞爲.li3的元素
$(".li1").next(); //li2 下一個同胞
$(".li2").nextAll(); //li3 ,li4 隨後全部的同胞
$(".li2").nextAll(".li3"); //li3 隨後全部的.li3同胞
$(".li1").nextUntil(".li4"); // li2,li3 之間的同胞
// prev(), prevAll() & prevUntil() 與next方法相同，不過方向相反
$("div p").first(); // 首個div元素內部的首個P元素
$("div p").last(); //最後一個div元素內部的最後一個P
$("li").eq(1); //li2 索引值爲1，從0計數，故爲li2
$("li").filter(".li4"); // li4 不匹配這個標準的元素會被從集合中刪除，匹配的元素會被返回。
$("li").not(".li4");// li1,li2,li3
});
九：jQuery Ajax 操做函數
優勢：其中的函數和方法容許咱們在不刷新瀏覽器的狀況下從服務器加載數據。
選項卡功能：
$("ul li").on("click",function(){
$(this).siblings().removeClass("active");
$(this).addClass("active");
console.log($(this).index());
$("div").eq(index).css({display:"block"});
});
相關文章
- 1. jQ $.extend用法
- 2. jQ live用法
- 3. jq的ajax方法
- 4. JQ 的 AJAX 方法
- 5. JQ方法大全
- 6. jq插件寫法
- 7. JQ中$.each的用法
- 8. vue引入JQ的方法
- 9. js,jq基本用法
- 10. jQ中的Ajax方法
- 更多相關文章...
- • SQLite 語法 - SQLite教程
- • PHP 語法 - PHP教程
- • Kotlin學習（一）基本語法
- • 算法總結-回溯法
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. jQ $.extend用法
- 2. jQ live用法
- 3. jq的ajax方法
- 4. JQ 的 AJAX 方法
- 5. JQ方法大全
- 6. jq插件寫法
- 7. JQ中$.each的用法
- 8. vue引入JQ的方法
- 9. js,jq基本用法
- 10. jQ中的Ajax方法