第十三章 初识jQuery
初识jQuery
jQuery简介
jQuery由美国人John Resig于2006年创建
jQuery是目前最流行的JavaScript程序库，它是对JavaScript对象和函数的封装
它的设计思想是write less,do more
jQuery能做什么
访问和操作DOM元素
控制页面样式
对页面事件进行处理
扩展新的jQuery插件
与Ajax技术完美结合
jQuery能做的JavaScript也都能做，但使用jQuery能大幅提高开发效率
优势
体积小，压缩后只有100KB左右
强大的选择器
出色的DOM封装
可靠的事件处理机制
出色的浏览器兼容性
使用隐式迭代简化编程
丰富的插件支持
获取jQuery
进入jQuery官网：http://jquery.com
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RsSv1ocu-1656926153089)(D:\课件\笔记\初识jQuery.assets\image-20220621081549789.png)]](https://img-blog.csdnimg.cn/ef3fba0a0e174765990cae8ca53aa5c1.png)
在页面中引入jQuery
<script src="js/jquery.js">script>
jQuery基本语法
$(document).ready()与window.onload类似，但也有区别
| ** ** | window.onload | $(document).ready() |
|---|---|---|
| 执行时机 | 必须等待网页中所有的内容加载完毕后（包括图片、flash、视频等）才能执行 | 网页中所有DOM文档结构绘制完毕后即刻执行，可能与DOM元素关联的内容（图片、flash、视频等）并没有加载完 |
| 编写个数 | 同一页面不能同时编写多个 | 同一页面能同时编写多个 |
| 简化写法 | 无 | $(function(){ //执行代码 }) ; |
DOCTYPE html>
<html><head><meta charset="utf-8" /><title>title><script src="js/jquery.js">script><script type="text/javascript">//文档加载完毕后执行function a(){alert("文档加载完毕");}//文档加载之后执行$(document).ready(function(){alert("文档加载完毕");});//简写$(function(){alert("文档加载完毕");});script>head><body onload="a()">body>
html>jQuery语法结构
$(selector).action() ;
工厂函数$()：将DOM对象转化为jQuery对象
选择器 selector：获取需要操作的DOM 元素
方法action()：jQuery中提供的方法，其中包括绑定事件处理的方法
使用addClass( )方法为元素添加样式
使用css( )方法设置元素样式
使用show( )、hide( ) 方法设置元素的显示和隐藏
DOCTYPE html>
<html><head><meta charset="utf-8"><title>追加样式title><script src="js/jquery.js">script><style>.a{background-color: red;}p{display: none;}style><script>$(function(){//li标签.单击事件(执行内容)$("li").click(function(){//$(this) 指的是触发事件的元素$(this).addClass("a");//addClass 相当于给元素添加一个class="a"});//鼠标移入,字体变大$("li").mouseover(function(){//$(this).css("font-size","50px");$(this).css({"font-size":"50px","background-color":"yellowgreen"});});$("a").hide();$("p").show();});script>head><body><ul><li>1li><li>2li><li>3li><li>4li>ul><a href="#">隐藏a><p>显示p>body>
html>
DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>当当网我的订单页title><link type="text/css" rel="stylesheet" href="css/dangdang.css"><script src="js/jquery.js">script><script>$(function(){$("a").mouseover(function(){$("#menu-ul").show();});$("a").mouseout(function(){$("#menu-ul").hide();});});script>
head>
<body>
<div id="menu" class="pos"><a href="#">我的当当a><ul id="menu-ul"><li><a href="#">我的订单a>li><li><a href="#">我的收藏a>li><li><a href="#">我的礼品卡a>li><li><a href="#">我的积分a>li><li><a href="#">我的余额a>li>ul>
div>
body>
html>
jQuery代码风格
“$”等同于“ jQuery ”
链式操作
隐式迭代
DOCTYPE html>
<html><head><meta charset="utf-8"><title>title><script src="js/jquery.js">script><script type="text/javascript">function a(){//使用js设置所有的li标签样式,需要遍历数组,单独设置每一个的样式var liss=document.getElementsByTagName("li");for(i=0;i<liss.length;i++){liss[i].style.backgroundColor="#666";}}$(function(){//链式操作$("h2").css("background-color","yellowgreen").next().css("background-color","coral")//隐式迭代,不需要遍历元素$("li").css("background-color","blueviolet");});script>head><body><h2>链式操作h2><h3>helloh3><ul><li>1li><li>2li><li>3li><li>4li>ul>body>
html>
DOM模型
浏览器把HTML文档的元素转换成节点对象，所有节点组成了一个树状结构
DOM对象和jQuery对象
DOM对象：直接使用JavaScript获取的节点对象
jQuery对象：使用jQuery包装DOM对象后产生的对象，它能够使用jQuery中的方法
DOM对象和jQuery对象分别拥有一套独立的方法，不能混用
DOM对象转jQuery对象
使用 ( ) 函 数 进 行 转 化 ： ()函数进行转化： ()函数进行转化：(DOM对象)
jQuery对象转DOM对象
jQuery对象是一个类似数组的对象，可以通过[index]的方法得到相应的DOM对象
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fATXZhB0-1656926153092)(D:\课件\笔记\初识jQuery.assets\image-20220621141741059.png)]](https://img-blog.csdnimg.cn/a464ab1623894e709aec435b61f52d7c.png)
DOCTYPE html>
<html><head><meta charset="utf-8"><title>dom对象title><script src="js/jquery.js">script><script type="text/javascript">function a(){//js获取domvar doms=document.getElementById("h1");//jq对象var $doms=$("#h1");//dom对象没有办法直接使用jq的方法//dom.css("background-color","red");//jq对象也没有办法直接使用js的方法//$doms.innerHTML="asdasdas";//js通过$()转换jq对象var $dom1=$(doms);$dom1.css("background-color","red");//Jq转js var dom2=$dom1[0];dom2.innerHTML="asdasdas";var dom3=$dom1.get(0);dom3.innerHTML="阿萨德";}script>head><body onload="a()"><h1 id="h1">啊飒飒h1>body>
html>
制作广告图片轮播切换效果
ul,
li {padding: 0;margin: 0;list-style: none;
}.adver {margin: 0 auto;width: 700px;overflow: hidden;height: 454px;position: relative;}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-size: 28px;font-weight: bold;cursor: pointer;display: none;
}.arrowLeft {left: 10px;
}.arrowRight {right: 10px;
}li:nth-of-type(1) {background: orange;
}DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title> 广告图片轮播切换title><link rel="stylesheet" href="css/style.css"><script src="js/jquery.js">script><script src="js/adver.js">script>
head>
<body>
<div class="adver"><img src="img/adver01.jpg" alt=""><img src="img/adver02.jpg" alt=""><img src="img/adver03.jpg" alt=""><img src="img/adver04.jpg" alt=""><img src="img/adver05.jpg" alt=""><img src="img/adver06.jpg" alt=""><ul><li>1li><li>2li><li>3li><li>4li><li>5li><li>6li>ul><div class="arrowLeft"><div><div class="arrowRight">>div>
div>
body>
html>
var ii=1;//默认第几张图片
$(function(){//开始轮播var setInt=setInterval("lb()",1000);//鼠标移入div显示 左右按钮$(".adver").mouseover(function(){$(".arrowLeft").show();$(".arrowRight").show();clearInterval(setInt);});//鼠标移出 隐藏左右按钮$(".adver").mouseout(function(){$(".arrowLeft").hide();$(".arrowRight").hide();setInt=setInterval("lb()",1000);});/**数字按钮*/$("li").click(function(){//把所有的都改为同一个颜色$("li").css("background-color","#333333");$(this).css("background-color","orange");//隐藏所有图片$("img").hide();//显示当前对应的图片ii=$(this).index()+1;$("img:nth-of-type("+ii+")").show();});/**右*/$(".arrowRight").click(function(){lb();});/**左*/$(".arrowLeft").click(function(){//隐藏所有图片$("img").hide();//显示当前对应的图片if(ii==1){ii=$("img").length;}else{ii--;}//显示当前图片$("img:nth-of-type("+ii+")").show();$("li").css("background-color","#333333");$("li:nth-of-type("+ii+")").css("background-color","orange");});});
function lb(){//隐藏所有图片$("img").hide();//显示当前对应的图片if(ii<$("img").length){ii++;}else{ii=1;}//显示当前图片$("img:nth-of-type("+ii+")").show();$("li").css("background-color","#333333");$("li:nth-of-type("+ii+")").css("background-color","orange");}
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！