jQuery介紹
jquery是一個(gè)函數(shù)庫,一個(gè)js文件,頁面用script標(biāo)簽引入這個(gè)js文件就可以使用。
下載地址:
jQuery官方網(wǎng)站: http://jquery.com/
<script type="text/javascript" src="js/jquery-1.12.2.js"></script>
創(chuàng)新互聯(lián)建站專注于潤州企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站建設(shè),商城網(wǎng)站建設(shè)。潤州網(wǎng)站建設(shè)公司,為潤州等地區(qū)提供建站服務(wù)。全流程按需網(wǎng)站開發(fā),專業(yè)設(shè)計(jì),全程項(xiàng)目跟蹤,創(chuàng)新互聯(lián)建站專業(yè)和態(tài)度為您提供的服務(wù)
將獲取元素的語句寫到頁面頭部,會(huì)因?yàn)樵剡€沒有加載而出錯(cuò),jquery提供了ready方法解決這個(gè)
問題,它的速度比原生的 window.onload 更快。
<script type="text/javascript">
$(document).ready(function(){
......
});
</script>
詳細(xì)寫法
<script type="text/javascript">
$(function(){
......
});
</script>
簡寫
將獲取元素的語句寫到頁面頭部,會(huì)因?yàn)樵剡€沒有加載而出錯(cuò),jquery提供了ready方法解決這個(gè)
問題,它的速度比原生的 window.onload 更快
<script type="text/javascript">
$(document).ready(function(){
......
});
</script>
jQuery選擇器
基本選擇器
選擇某個(gè)網(wǎng)頁元素,然后對它進(jìn)行某種操作, jquery選擇器 jquery選擇器可以快速地選擇元素,
選擇規(guī)則和css樣式相同,使用length屬性判斷是否選擇成功。
jquery用法思想一 : 選擇某個(gè)網(wǎng)頁元素,然后對它進(jìn)行某種操作
$(document) //選擇整個(gè)文檔對象
$('li') //選擇所有的li元素
$('#myId') //選擇id為myId的網(wǎng)頁元素
$('.myClass') // 選擇class為myClass的元素
$('input[name=first]') // 選擇name屬性等于first的input元素
$('#ul1 li span')
//選擇id為為ul1元素下的所有l(wèi)i下的span元素
$('#ul1 li:first')
$('#ul1 li:odd')
選擇器修飾過濾
//選擇id為ul1元素下的第一個(gè)li
//選擇id為ul1元素下的li的奇數(shù)行
$('#ul1 li:eq(2)') //選擇id為ul1元素下的第3個(gè)li
$('#ul1 li:gt(2)') // 選擇id為ul1元素下的前三個(gè)之后的li
$('#myForm :input') // 選擇表單中的input元素
$('div:visible') //選擇可見的div元素
選擇器函數(shù)過濾
$('div').has('p'); // 選擇包含p元素的div元素
$('div').not('.myClass'); //選擇class不等于myClass的div元素
$('div').filter('.myClass'); //選擇class等于myClass的div元素
$('div').first(); //選擇第1個(gè)div元素
$('div').eq(5); //選擇第6個(gè)div元素
選擇器轉(zhuǎn)移
$('div').prev('p'); //選擇div元素前面的第一個(gè)p元素
$('div').next('p'); //選擇div元素后面的第一個(gè)p元素
$('div').closest('form'); //選擇離div最近的那個(gè)form父元素
$('div').parent(); //選擇div的父元素
$('div').children(); //選擇div的所有子元素
$('div').siblings(); //選擇div的同級(jí)元素
$('div').find('.myClass'); //選擇div內(nèi)的class等于myClass的元素
操作行間樣式
jquery用法思想二 同一個(gè)函數(shù)完成取值和賦值
// 獲取div的樣式
$("div").css("width");
$("div").css("color");
//設(shè)置div的樣式
$("div").css("width","30px");
$("div").css("height","30px");
$("div").css({fontSize:"30px",color:"red"});
操作樣式類名
jquery用法思想二 同一個(gè)函數(shù)完成取值和賦值
$("#div1").addClass("divClass2")
//為id為div1的對象追加樣式divClass2
$("#div1").removeClass("divClass")
//移除id為div1的對象的class名為divClass的樣式
$("#div1").removeClass("divClass divClass2")
//移除多個(gè)樣式
$("#div1").toggleClass("anotherClass")
//重復(fù)切換anotherClass樣式
jQuery屬性操作
設(shè)置html內(nèi)容
// 取出文本內(nèi)容
// 取出html內(nèi)容
var $htm = $('#div1').text();
var $htm = $('#div1').html();
// 設(shè)置文本內(nèi)容
// 設(shè)置html內(nèi)容
$('#div1').html('<span>添加文字</span>');
$('#div1').text('<span>添加文字</span>');
設(shè)置屬性值
// 取出圖片的地址
var $src = $('#img1').attr('src');
// 設(shè)置圖片的地址和alt屬性
$('#img1').attr({ src: "test.jpg", alt: "Test Image" });
綁定click事件
$('#btn1').click(function(){
// 內(nèi)部的this指的是原生對象
// 使用jquery對象用 $(this)
})
jquery特殊效果
fadeOut() 淡出
fadeToggle() 切換淡入淡出
hide() 隱藏元素
show() 顯示元素
toggle() 依次展示或隱藏某個(gè)元素
slideDown() 向下展開
slideUp() 向上卷起
slideToggle() 依次展開或卷起某個(gè)元素
jquery特殊效果
$btn.click(function(){
$('#div1').fadeIn(1000,'swing',function(){
alert('done!');
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
</head>
<body>
</body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.box {
width: 300px;
height: 450px;
border: 1px solid gray;
margin: 0 auto;
margin-top: 50px;
}
.box h2 {
color: green;
font-size: 20px;
line-height: 35px;
font-weight: bold;
border: 1px dashed gray;
padding-left: 10px;
}
.box li {
list-style: none;
padding: 10px 15px;
border: 1px dashed gray;
}
.box li span {
background-color: gray;
display: inline-block;
width: 20px;
height: 20px;
color: white;
text-align: center;
}
.box li:nth-child(-n+3) span {
background-color: green;
color: white;
}
.content {
overflow: hidden;
margin-top: 5px;
display: none;
}
.content img {
width: 80px;
height: 120px;
float: left;
}
.content p {
width: 180px;
height: 120px;
float: right;
font-size: 12px;
}
.current .content{
display: block;
}
</style>
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<script>
$(function () {
$('li').mouseenter(function () {
$(this).addClass('current');
});
$('li').mouseleave(function () {
$(this).removeClass('current');
});
})
</script>
</head>
<body>
<div class="box">
<h2>電影排行榜</h2>
<ul>
<li>
<span>1</span> 哪吒之魔童降世
<div class="content ">
<img src="img/movie.jpg">
<p>
天地靈氣孕育出一顆能量巨大的混元珠,元始天尊將混元珠提煉成靈珠和魔丸, 靈珠投胎為人,助周伐紂時(shí)可堪大用;而魔丸則會(huì)誕出魔王,為禍人間。 元始天尊啟動(dòng)了天劫咒
</p>
</div>
</li>
<li>
<span>2</span> 哪吒之魔童降世
<div class="content ">
<img src="img/movie.jpg">
<p>
天地靈氣孕育出一顆能量巨大的混元珠,元始天尊將混元珠提煉成靈珠和魔丸, 靈珠投胎為人,助周伐紂時(shí)可堪大用;而魔丸則會(huì)誕出魔王,為禍人間。 元始天尊啟動(dòng)了天劫咒
</p>
</div>
</li>
<li>
<span>3</span> 哪吒之魔童降世
<div class="content">
<img src="img/movie.jpg">
<p>
天地靈氣孕育出一顆能量巨大的混元珠,元始天尊將混元珠提煉成靈珠和魔丸, 靈珠投胎為人,助周伐紂時(shí)可堪大用;而魔丸則會(huì)誕出魔王,為禍人間。 元始天尊啟動(dòng)了天劫咒
</p>
</div>
</li>
<li>
<span>4</span> 哪吒之魔童降世
<div class="content">
<img src="img/movie.jpg">
<p>
天地靈氣孕育出一顆能量巨大的混元珠,元始天尊將混元珠提煉成靈珠和魔丸, 靈珠投胎為人,助周伐紂時(shí)可堪大用;而魔丸則會(huì)誕出魔王,為禍人間。 元始天尊啟動(dòng)了天劫咒
</p>
</div>
</li>
<li>
<span>5</span> 哪吒之魔童降世
<div class="content">
<img src="img/movie.jpg">
<p>
天地靈氣孕育出一顆能量巨大的混元珠,元始天尊將混元珠提煉成靈珠和魔丸, 靈珠投胎為人,助周伐紂時(shí)可堪大用;而魔丸則會(huì)誕出魔王,為禍人間。 元始天尊啟動(dòng)了天劫咒
</p>
</div>
</li>
</ul>
</div>
</body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 448px;
height: 298px;
border: 1px solid lightgray;
margin: 50px auto;
}
.nav > li {
list-style: none;
width: 110px;
height: 50px;
background: darkseagreen;
color: white;
text-align: center;
line-height: 50px;
float: left;
border: 1px solid white;
}
.nav > li:hover {
background-color: green;
}
.nav > .current {
background-color: green;
}
.content > li {
list-style: none;
display: none;
}
.content > .show {
display: block;
}
.content > li > img {
width: 448px;
height: 248px;
}
</style>
<script src="js/jquery-3.4.1.min.js"></script>
<script> $(function () {
$(".nav>li").mouseenter(function () {
$(this).addClass("current");
$(this).siblings().removeClass("current");
var $idx = $(this).index();
var $li = $(".content>li").eq($idx);
$li.siblings().removeClass("show");
$li.addClass("show");
})
}) </script>
</head>
<body>
<div class="box">
<ul class="nav">
<li class="current">主頁</li>
<li>遇見好貨</li>
<li>年中狂歡</li>
<li>夏日尚新</li>
</ul>
<ul class="content">
<li class="show"><img src="./img/img5.jpg" alt=""></li>
<li><img src="./img/img1.jpg" alt=""></li>
<li><img src="./img/img2.jpg" alt=""></li>
<li><img src="./img/img3.jpg" alt=""></li>
</ul>
</div>
</body>
網(wǎng)站欄目:python學(xué)習(xí)之javascipts中的jQuery
文章起源:http://muchs.cn/article6/ishdog.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供面包屑導(dǎo)航、網(wǎng)站設(shè)計(jì)、網(wǎng)站排名、虛擬主機(jī)、App開發(fā)、做網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)