引入
/*
1.使用jquery需要引用jquery庫
2.jquery庫大家一定要放最上面
$ is not defined 表示沒有引用jquery
3.jquery基於JS
4.jquery所有的方法 都需要使用jquery對象來調用不能使用dom對象調用
*/
function testBox(){
//document.getElementById("box").style.backgroundColor = "red";
//$("#box").css("background-color","red");
//錯誤一 jquery對象調用js的屬性
//var c= $("#box");
//c.style.backgroundColor = "red";
//錯誤二 dom對象調用jquery的方法
//var c = document.getElementById("box");
//c.css("background-color","red");
}
語法
/*
1.jquery選擇器都是字符串
2.jquery操作樣式
先使用選擇器選到jquery對象
調用對象的css方法
方法的參數通常是一個對象，一個參數，可以同時設置多個屬性
如果你只要設置一個屬性，有簡寫使用2個參數 屬性,值
3.jquery選擇器選擇到的如果是多個元素使用樣式css方法不需要循環直接使用
*/
/*基本選擇器*/
//改變id爲one的元素的背景色
//$("#one").css({"background-color":"red"});
//$("#one").css("background-color","red");
//改變class爲mini的所有元素的背景色
// var list = document.getElementsByClassName("mini");
// for(var i in list){
// list[i].style.backgroundColor= "red";
// }
//$(".mini").css("background-color","red");
//改變元素名是<div>的所有元素的背景色
//$("div").css("background-color","red");
//改變所有元素的背景色
//$("*").css("background-color","red");
//改變所有<span元素和id爲two的元素的背景色>
//$("span,#one").css("background-color","red");
/*層級選擇器*/
//改變<body>內所有<div>的背景色 (重點)
//$("body div").css("background-color","red");
//改變<body>內<div>子元素的背景色
//$("body>div").css("background-color","red");
//改變class爲one的下一個同輩元素的背景色
//$(".one+div").css("background-color","red");
//$("[title=other]+div").css("background-color","red");
//在jquery中又更加好的辦法來代替
//可以使用篩選和過濾來實現上面的功能
//改變id爲two元素後面的所有的<div>同輩元素的背景色
//$("#two ~ div").css("background-color","red");
//在jquery中又更加好的辦法來代替
//這邊擴展一個方法，上面的next和nextAll都只能選擇元素之後的同輩元素，如果需要選擇不只後面的所有的同輩元素的話要使用.siblings();
/*過濾選擇器*/
//改變第一個<div>元素的背景色
//$("div:first").css("background-color","red");
//改變最後一個<div>元素的背景色
//$("div:last").css("background-color","red");
//改變class不爲one的<div>元素的背景色
//$("div:not(.one)").css("background-color","red");
//改變索引值爲偶數的<div>元素的背景色 注意下標是從0開始的
//$("div:even").css("background-color","red");
//改變索引值爲奇數的<div>元素的背景色
//$("div:odd").css("background-color","red");
//改變索引值爲3的<div>元素的背景色
//$("div:eq(9)").css("background-color","red");
//改變索引值大於3的<div>元素的背景色
//$("div:gt(9)").css("background-color","red");
//改變索引值小於3的<div>元素的背景色
//$("div:lt(9)").css("background-color","red");
//改變所有標題元素，例如<h1> <h2>..這些元素的背景色，這個是一個基本的過濾選擇器
//改變當前正在執行動畫的元素的背景色
/*內容過濾選擇器*/
//改變含有文本"di"的<div>元素的背景色
//改變不包含子元素（包括文本元素）的<div>空元素的背景色
//改變含有class爲mini元素的<div>元素的背景色
//改變含有子元素（包括文本元素）的<div>元素的背景色
/*可見性過濾器選擇器實例*/
//改變所有可見的<div>元素的背景色
//顯示隱藏的<div>元素
/*屬性過濾選擇器*/
//改變含有屬性title的<div>元素的背景色
//$("[title]").css("background-color","red");
//改變屬性title值等於“test的<div>元素的背景色”
//$("[title='test']").css("background-color","red");
//改變屬性title值等於“test”的div元素的背景色
//$("div[title='test']").css("background-color","red");
//改變屬性title值以“te”開始的div元素的背景色
//$("div[title^='ot']").css("background-color","red");
//改變屬性title值以“est”結束的div元素的背景色
//$("div[title$='r']").css("background-color","red");
//改變屬性title值含有“es”的div元素的背景色
//$("[title*='th']").css("background-color","red");
//改變屬性title值 有屬性id 並且 有屬性title含有es 的div元素的背景色
//$("[title][id][title*='es']").css("background-color","red");
//不推薦
//$("[title!='test']").css("background-color","red");
/*子元素過濾選擇器*/
//改變每個class爲one的div父元素下的第2個子元素的背景色
//改變每個class爲one的div父元素下的最後一個子元素的背景色
//如果class爲one的div父元素下只有一個子元素，那麼則改變這個子元素的背景色
/*
標籤中的內容 html() == innerHTML
1.增加替換標籤中的內容 參數是字符串
2.獲取標籤中的內容 沒有參數
3.特殊用途 清空標籤 html("")
標籤中的文本 text() == innerTEXT
同html()只是他只操作文本不操作標籤
追加內容
在元素的內部操作
append prepend
1.append在標籤中追加在最後
2.prepend在標籤中追加在最前面
在元素的外部操作
after before
1.after在標籤後面增加元素
2.before在標籤前面增加元素
對標籤自身的操作
刪除
1.remove() 標籤也會被刪除
2.detach() 保留事件
3.empty() 清空標籤 == html("")
*/
function addHtml(){
//var l = $("#box").text();
//var html = "<a href='#'>搜狐</a>";
//$("#box").append(html);
//$("#box").after(html);
$("a").empty();
}
/*
屬性增加,修改和獲取
1.attr方法 (兩用方法) 增加屬性 獲取屬性
2.增加屬性 參數是一個對象,單個屬性可以簡寫 成2個參數的格式
3.獲取屬性 參數一個字符串,指定你要獲取哪個屬性
4.屬性在頁面上一般用於存儲數據的
隱藏域存儲
屬性存儲 一般稱作數據綁定 vue
2.prop方法,同attr
3.優先使用attr 當你發現attr失效就使用prop
屬性的刪除
1.removeAttr removeProp
2.參數字符串指定需要刪除的屬性
屬性樣式的操作
1.addClass增加樣式類
2.removeClass 刪除樣式類
*/
function addAttr(){
//$("#box").attr("flag",10);
//$("#box").attr({"flag":10,"sum":"分數"});
//var flag = $("#box").attr("uid");
//alert(flag);
//$("#box").removeAttr("uid");
//$("div").addClass("lei");
//$("div").addClass("lei1");
//var flag = $("#box").attr("class","lei1");
$("div").removeClass("lei");
}
/*
頁面加載完成事件
1.$(document).ready();
2.jquery的頁面加載完成事件可以寫多個
3.簡寫 $(function(){});
其他事件綁定
1.事件如果要立刻生效 需要將綁定代碼寫在頁面加載完成事件中
2.綁定事件兩種方式
專用方法綁定
a.先通過選擇器獲取jquery對象
b.調用事件專用方法 (不帶on)
c.事件體寫在參數
通用方法綁定
a.先通過選擇器獲取jquery對象
b.bind("事件名稱",事件function)
c.參數1 事件的名稱 參數2 事件的函數體
3.hover效果 jquery有專門方法 hover(fun1,fun2)
4.toggle(...) 點擊切換
5.移除.解綁事件 unbind("事件名稱")
6.模擬用戶操作 trigger()
a.先要通過選擇器選擇需要觸發事件的元素
b.trigger() 參數指定你需要觸發的動作
jquery具有連續性 可以一直.下去
*/
$(document).ready(function(){
console.log("頁面加載完成了");
});
$(function(){
// $("#box").click(function(){
// alert(123);
// });
$("#box").bind("click",function(){
alert(123);
});
// $("#box").mouseover(function(){
// //標誌他爲jquery對象
// $(this).css("background-color","blue");
// }).mouseout(function(){
// $(this).css("background-color","red");
// }).attr("flag",10);
// $("#box").hover(function(){
// $(this).css("background-color","blue");
// },function(){
// $(this).css("background-color","red");
// });
// $("#box").toggle(function(){
// $(this).css("background-color","blue");
// },function(){
// $(this).css("background-color","green");
// },function(){
// $(this).css("background-color","red");
// });
$("#btn").click(function(){
$("#box").unbind("click");
});
$("#btn1").click(function(){
//瀏覽器幫我們執行了 box的點擊事件
$("#box").trigger("click");
});
});
// window.onload = function(){
// document.getElementById("box").οnclick= function(){
// alert("點擊了我");
// };
// };