jQuery 簡(jiǎn)介&集成
- 過(guò)去 js 中存在的一些問(wèn)題
- 獲取某個(gè) DOM 對(duì)象魄咕，根據(jù)不同的類型赠群，使用不同的函數(shù)才能獲取
- 代碼的容錯(cuò)性比較差泼各，如果一旦出現(xiàn)錯(cuò)誤摇锋，下買呢的代碼壓根沒(méi)法執(zhí)行
- 如果批量的操作 DOM 對(duì)象知牌，必須手動(dòng)的遍歷操作
- 有可能會(huì)左很懂兼容性的代碼
- 實(shí)現(xiàn)一個(gè)小功能祈争，往往需要寫很多代碼才可以實(shí)現(xiàn)，比如一個(gè)動(dòng)畫效果
- 如果向操作一個(gè)對(duì)象的多個(gè)屬性角寸，要寫很多遍前綴
- jQuery 代碼
$('.test2').click(function(){
//隱式迭代
//鏈?zhǔn)秸{(diào)用
$('div').show(1000).html('哈哈哈');
})
alert('xxxx');
- jQuery 的代碼風(fēng)格
$('.cl')獲取標(biāo)簽菩混，其中使用類名獲取標(biāo)簽就用.cl，使用 id 獲取標(biāo)簽就用#cl扁藕，與 CSS 格式相同
$('.cl').click(function(){
$('.box').hide();
});
$(function(){
alert('xxx');
})
jQuery 加載模式對(duì)比
- 函數(shù)沮峡，執(zhí)行時(shí)機(jī)：整個(gè)文檔加載完畢（ DOM 樹，圖片資源亿柑，外鏈資源）且只執(zhí)行一次邢疙，后面執(zhí)行的函數(shù)，會(huì)把前面的賦值望薄、覆蓋疟游。
- jQuery 不會(huì)有這樣的問(wèn)題
window.onload = function(){
alert('xxx');
}
window.onload = function(){
alert('ooo');
}
//文檔 DOM 樹加載完畢之后執(zhí)行
$(document).ready(function(){
alert('xxxx');
})
$(document).ready(function(){
alert('oooo');
})
$(function(){})
jQuery 解決沖突 noConflict
<script src=""></script>
<script src=""></script>
//后者會(huì)覆蓋前者
//如果后者是 jQuery 函數(shù)庫(kù)
//在使用完 jQuery 之后需解除綁定
$.noConflict(); //解除 $ 符號(hào)的使用綁定
// $ 實(shí)際上就是 jQuery
//如果前者是 jQuery 函數(shù)庫(kù)，$ 被后者覆蓋
//使用即時(shí)函數(shù)來(lái)進(jìn)行操作
(function($){
$('.box').hide();
$('.box').hide();
$('.box').hide();
})(jQuery)
jQuery 對(duì)象與 js 對(duì)象的相互轉(zhuǎn)換
- jQuery 對(duì)象的命名規(guī)范是在對(duì)象前加 $ 符號(hào)
var $div = $('.box');
- 因?yàn)?jQuery 將 js 對(duì)象抓取封裝是在一個(gè)偽數(shù)組中痕支，所以 jQuery 對(duì)象向 js 對(duì)象轉(zhuǎn)換在 jQuery 對(duì)象之后加角標(biāo)即可,轉(zhuǎn)換之后就可以使用
js DOM 對(duì)象方法$div[0].innerHTML,$div.get(0).innerTEXT
- js 對(duì)象轉(zhuǎn)換成 jQuery 對(duì)象只需要用 $() 包裹即可
$(div).html('xxx');
jQuery 操作 CSS 添加&刪除&切換類
$(function(){
$('.on').click(funciton(){
$('div').addClass('current');
});
$('#off').click(function(){
$('div').removeClass('current');
});
$('#auto').click(function(){
$('div').toggleClass('current');
})
})
jQuery 操作 css-css()
$(function(){
$('#get').click(function(){
var $div = $('.box');
var w = $div.css('width');
var h = $div.css('height');
var bg =$div.css('background');
alert('--'+ w + '--' + h + '--' + bg )
})
$('#set').click(function(){
var $div = $('.box');
//鍵值對(duì)的方式設(shè)置樣式
$div.css({
'width':'500px',
'height':'500px',
'background':'red',
})
})
})
function Person(name) {
this.name = name;
}
Person.prototype.eat = function () {
console.log('吃飯');
return this;
};
Person.prototype.shuijiao = function () {
console.log('睡覺');
return this;
};
Person.prototype.qiaodaima = function () {
console.log('敲代碼');
return this;
};
var p = new Person('sz');
p.eat().shuijiao().eat().eat().eat();
jQuery 操作css -尺寸
$(function () {
var w = $("#small").width()
var h = $("#small").height()
var iw = $("#small").innerWidth()
var ih = $("#small").innerHeight()
var ow = $("#small").outerWidth()
var oh = $("#small").outerHeight()
var owm = $("#small").outerWidth(true)
var ohm = $("#small").outerHeight(true)
var array = [w, h, iw, ih, ow, oh, owm, ohm]
alert(array)
});
jQuery 操作 html - 獲取&設(shè)置
$(function () {
// set();
// var div = document.getElementsByName('xx')
// $(div).get(0)
// console.log($('a').attr('target'));
// $('a').attr('href', 'http://www.baidu.com').attr('target', '_blank');
$('a').attr({
'href': 'http://www.baidu.com',
'target': '_blank'
})
})
function set() {
var $div = $('.box');
// console.log($div.text('<p>12345</p>'));
// $div.html('<p>12345</p>')
// var html = $div.html();
// $('input[type="text"]').val('321');
// $div.text($div.text() + '12345')
$div.text(function (index, oldValue) {
console.log(index + oldValue);
return oldValue + '11111';
})
// function exec(fun) {
// fun(1, 2, 3);
// }
//
// exec(function (a, b, c) {
// alert(a + '' + b + c);
// })
}
function get() {
// text
var $div = $('.box');
var text = $div.text();
var html = $div.html();
console.log(html);
var value = $('input[type="text"]').val();
console.log(value);
}
jQuery 選擇器
// ready函數(shù)
$(function () {
// baseSelector()
// cengjiSelector()
// propertySelector()
filterSelector()
});
function filterSelector() {
$("#filter").parent().css("background-color", "blue")
}
function propertySelector() {
$("a[href*=520]").text("你被換了")
}
function cengjiSelector() {
// $("#ul1 li").css("background-color", "red")
// $("#ul1>li").css("background-color", "red")
// $("#ul1+div").css("background-color", "red")
// ==
// $("#ul1").next("div").css("background-color", "red")
// $("#ul1~div").css("background-color", "red")
// ==
$("#ul1").nextAll("div").css("background-color", "red")
}
function baseSelector() {
$("#id").css("background-color", "red")
// 注意, jQuery對(duì)象執(zhí)行某個(gè)方法, 會(huì)遍歷jQuery對(duì)象, DOM數(shù)組中的每個(gè)對(duì)象執(zhí)行這個(gè)方法
// 但是可以通過(guò)索引進(jìn)行獲取 eq(index)
$(".class").eq(0).css("background-color", "green")
$("p").css("background-color", "yellow")
}
</script>
</head>
<body>
<!--基本選擇器-->
<div id="id">id選擇器內(nèi)容</div>
<div class="class">class選擇器內(nèi)容1</div>
<div class="class">class選擇器內(nèi)容1</div>
<p>元素選擇器內(nèi)容1</p>
<p>元素選擇器內(nèi)容2</p>
<!--層級(jí)選擇器-->
<ul id="ul1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<ul id="ul2">
<li>11</li>
<li>22</li>
</ul>
</ul>
<div>div1</div>
<div>div2</div>
<p id="x">hehe</p>
<!--屬性選擇器-->
<a >小碼哥</a>
<a >小碼哥2</a>
<!--篩選選擇器-->
<div>
<p id="filter">hehe</p>
</div>
jQuery 選擇器演示
<script>
$(function () {
// $('ul>li:gt(0):not(:last)').css('background', 'red');
$('ul>li').click(function () {
// alert('xxx');
// d點(diǎn)擊誰(shuí),誰(shuí)背景 red 其他統(tǒng)統(tǒng) green
console.log(this);
$(this).css('background', 'red').siblings().css('background', 'green');
})
})
</script>
</head>
<body>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
<li>li4</li>
<li>li5</li>
<li>li6</li>
<li>li7</li>
<li>li8</li>
<li>li9</li>
<li>li10</li>
</ul>
jQuery 鼠標(biāo)移入颁虐，移出事件
$(function () {
// $('.big').mouseenter(function () {
// console.log('big鼠標(biāo)移入');
// });
//
// $('.big').mouseleave(function () {
// console.log('big鼠標(biāo)移出');
// });
// $('.big').mouseover(function () {
// console.log('big鼠標(biāo)移入');
// });
//
// $('.big').mouseout(function () {
// console.log('big鼠標(biāo)移出');
// });
$('.big').hover(function () {
console.log('big鼠標(biāo)移入');
}, function () {
console.log('big鼠標(biāo)移出');
});
// $('.big').mouseenter(function () {
// console.log('big鼠標(biāo)移入');
// })
})
</script>
jQuery 元素的角標(biāo)
<script>
$(function () {
// 移入和移除
$('li').hover(function () {
console.log($(this).index());
})
})
</script>
</head>
<body>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
<li>li4</li>
<li>li5</li>
<li>li6</li>
<li>li7</li>
<li>li8</li>
<li>li9</li>
<li>li10</li>
</ul>
實(shí)現(xiàn) tab 標(biāo)簽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>15-jQuery實(shí)現(xiàn)tab標(biāo)簽-(界面搭建)</title>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
}
.box {
width: 500px;
height: 400px;
margin: 100px auto;
}
.nav {
border: 2px solid gray;
border-bottom: none;
overflow: hidden;
width: 400px;
height: 40px;
background: white;
position: relative;
top: 2px;
}
.nav>ul>li {
float: left;
margin: 10px;
}
.images {
width: 500px;
height: 300px;
border: 1px solid gray;
position: relative;
}
.images img {
width: 500px;
height: 300px;
position: absolute;
top: 0px;
left: 0px;
}
.current {
color: gold;
font-size: 19px;
}
</style>
<script src="../jquery-3.1.1/jquery-3.1.1.js"></script>
<script>
$(function () {
// 移入移出先后順序問(wèn)題?
// get set無(wú)法分清問(wèn)題?
// attr css方法使用區(qū)分問(wèn)題?
// attr('value', '123');
// css('left', 'none')
// val(123);
// html()
// input type = 'radio'
// div.style.display
$('.images>img:not(:first)').css('display', 'none');
$('.nav>ul>li').hover(function () {
var currentIndex = $(this).index();
$('.images>img').eq(currentIndex).css('display', 'block').siblings().css('display', 'none');
// 添加class
$(this).addClass('current').siblings().removeClass('current');
})
})
</script>
</head>
<body>
<div class="box">
<div class="nav">
<ul>
<li class="current">H5學(xué)院</li>
<li>iOS學(xué)院</li>
<li>JAVA學(xué)院</li>
<li>UI學(xué)院</li>
</ul>
</div>
<div class="images">
</div>
</div>
</body>
</html>
實(shí)現(xiàn)淘寶商品展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>17-淘寶商品展示-(UI界面搭建)</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.box {
width: 400px;
height: 300px;
margin: 100px auto;
border: 1px solid goldenrod;
}
.left,.right {
width: 100px;
height: 300px;
float: left;
}
.center {
width: 200px;
height: 300px;
float: left;
position: relative;
}
li {
width: 100px;
height: 34px;
border-bottom: 1px dashed red;
box-sizing: border-box;
}
.center img {
width: 200px;
height: 300px;
position: absolute;
top: 0;
left: 0;
}
li:hover {
background: green;
}
</style>
<script src="../jquery-3.1.1/jquery-3.1.1.js"></script>
<script>
$(function () {
// 剛進(jìn)來(lái)之后, 把所有的圖片都隱藏, 僅僅只顯示第一個(gè)
$('img').eq(0).css('display', 'block').siblings().css('display', 'none');
// $('li').eq(9).css('background', 'red');
// 1. 監(jiān)聽所有l(wèi)i< hover
$('.left>ul>li').hover(function () {
// 2. 根據(jù)當(dāng)前l(fā)i對(duì)應(yīng)的索引,來(lái)控制中間圖片的展示
// 當(dāng)前的控件, 在父控件上的位置索引
var index = $(this).index();
// [] == get == dom對(duì)象
// eq
$('.center>img').eq(index).css('display', 'block').siblings().css('display', 'none');
console.log(index);
});
$('.right>ul>li').hover(function () {
// 2. 根據(jù)當(dāng)前l(fā)i對(duì)應(yīng)的索引,來(lái)控制中間圖片的展示
var index = $(this).index() + 9;
$('.center>img').eq(index).css('display', 'block').siblings().css('display', 'none');
console.log(index);
})
})
</script>
</head>
<body>
<div class="box">
<div class="left">
<ul>
<li>登山鞋</li>
<li>冬裙</li>
<li>毛衣</li>
<li>棉服</li>
<li>男包</li>
<li>男毛衣</li>
<li>男棉服</li>
<li>男靴</li>
<li>呢大衣</li>
</ul>
</div>
<div class="center">
</div>
<div class="right">
<ul>
<li>牛仔褲</li>
<li>女包</li>
<li>女褲</li>
<li>女靴</li>
<li>皮帶</li>
<li>皮衣</li>
<li>圍巾</li>
<li>雪地靴</li>
<li>羽絨服</li>
</ul>
</div>
</div>
</body>
</html>
