程序员开发实例大全宝库

网站首页 > 编程文章 正文

jQuery-第五章（jquery1）

zazugpt 2024-09-10 23:36:20 编程文章 17 ℃ 0 评论

jQuery—由美国人John Resig于2006年创建

jQuery是目前最流行的JavaScript程序库，它是对JavaScript对象和函数的封装

一、初识jQuery

实现隔行变色效果，只需一句关键代码

$("tr:even").css("background-color","#e8f0f2");


1:jQuery能做什么?

访问和操作DOM元素,控制页面样式,对页面事件进行处理,扩展新的jQuery插件,与Ajax技术完美结合;

优点:

体积小，压缩后只有100KB左右,强大的选择器,出色的DOM封装,可靠的事件处理机制,出色的浏览器兼容性,使用隐式迭代简化编程,丰富的插件支持;

注意:jQuery能做的JavaScript也都能做，但使用jQuery能大幅提高开发效率

获取jQuery:进入jQuery官网：http://jquery.com

<script src="js/jquery-1.12.4.js" type="text/javascript"></script>


二、jQuery基本语法

<script>

$(document).ready(function() {

alert("我欲奔赴沙场征战jQuery，势必攻克之！");

});

</script>



链式操作语法:

$("h2").css("background-color","#ccffff").next().css("display","block");

隐式迭代语法:

$(document).ready(function() {

$("li").css({"font-weight":"bold","color":"red"});

});


DOM对象：直接使用JavaScript获取的节点对象; jQuery对象：使用jQuery包装DOM对象后产生的对象，它能够使用jQuery中的方法

DOM对象转jQuery对象

var objDOM=document.getElementById("title");


var objHTML=objDOM.innerHTML;

jQuery对象转DOM对象

var txtName =document.getElementById("txtName");

var $txtName =$(txtName);

三、实例广告轮播图

<!DOCTYPE html>

<html>


<head lang="en">

<meta charset="UTF-8">

<title> 广告图片轮播切换</title>

</head>

<style>

ul,

li {

padding: 0;

margin: 0;

list-style: none;

}


.adver {

margin: 0 auto;

width: 700px;

overflow: hidden;

height: 454px;

position: relative;

background: url("../fiveClass/img/adver01.jpg");

}


ul {

position: absolute;

bottom: 10px;

z-index: 100;

width: 100%;

text-align: center;

}


ul li {

display: inline-block;

font-size: 10px;

line-height: 20px;

font-family: "微软雅黑";

margin: 0 1px;

width: 20px;

height: 20px;

border-radius: 50%;

background: #333333;

text-align: center;

color: #ffffff;

}


.arrowLeft,

.arrowRight {

position: absolute;

width: 30px;

background: rgba(0, 0, 0, 0.2);

height: 50px;

line-height: 50px;

text-align: center;

top: 200px;

z-index: 150;

font-family: "微软雅黑";

font-size: 28px;

font-weight: bold;

cursor: pointer;

display: none;

}


.arrowLeft {

left: 10px;

}


.arrowRight {

right: 10px;

}


li:nth-of-type(1) {

background: orange;

}

</style>


<body>

<div class="adver">

<ul>

<li>1</li>

<li>2</li>

<li>3</li>

<li>4</li>

<li>5</li>

<li>6</li>

</ul>

<div class="arrowLeft">&lt;</div>

<div class="arrowRight">&gt;</div>

</div>

</body>


<script src="js/jquery-2.1.4.min.js"></script>

<script type="text/javascript" src="js/adver.js"></script>


</html>


$(document).ready(function(){

var imgs=new Array("adver01.jpg","adver02.jpg","adver03.jpg","adver04.jpg","adver05.jpg","adver06.jpg")

// 设置一个标识用来控制图片下标

var flag=0;


// 鼠标移入显示箭头

$(".adver").mouseover(function(){

$(".arrowLeft,.arrowRight").show();

})

// 鼠标移出隐藏箭头

$(".adver").mouseout(function(){

$(".arrowLeft").hide();

$(".arrowRight").hide();

})


// 左箭头单机事件

$(".arrowLeft").click(function(){

flag--;

// 判断是否是第一张图片

if(flag<0){

flag=0;

alert("现在是第一张");

}else{

// 背景图片替换

$(".adver").css("background","url(../fiveClass/img/"+imgs[flag]+")");

$(".adver>ul>li:nth-of-type("+(flag+1)+")").css("background-color","orange");

/**

* siblings()是取得一个包含匹配的元素集合中

* 每一个元素的所有唯一同辈元素的元素集合

* 用于筛选同辈元素的表达式<除了选择器选择的元素的同级元素>

* 没有选中的元素变成("background","#333")

*/

$(".adver>ul>li:nth-of-type("+(flag+1)+")").siblings().css("background","#333");

}

})

// 右箭头单机事件

$(".arrowRight").click(function(){

// 判断是否是最后一张图片

flag++;

if(flag>imgs.length-1){

flag=imgs.length-1;

alert("现在是最后一张");

}else{

$(".adver").css("background","url(../fiveClass/img/"+imgs[flag]+")");

$(".adver>ul>li:nth-of-type("+(flag+1)+")").css("background-color","orange");

$(".adver>ul>li:nth-of-type("+(flag+1)+")").siblings().css("background","#333");

}

})

})

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表