一、jQuery
-
jQuery简介
jQuery是由美国人John创建于2006年，它是目前最流行的js程序库，它对js的对象和函数进行封装，设计思想是write less,do more。 -
jq能干什么
- 访问和操作DOM对象
- 控制页面样式
- 对页面事件进行处理
- 扩展新的jq插件
- 与Ajax技术完美结合
-
jq的优势
- 体积小，压缩后只有100kb大小
- 强大的选择器
- 出色的DOM封装
- 可靠的事件处理机制
- 较好的浏览器兼容性
- 使用隐式迭代简化编程
- 丰富的插件支持
-
jq的库文件
jq的库文件分为两种：- 开发板
名称一般为：jquery-版本号.js，大小约为270kb左右，完整的无压缩的，主要用于测试，学习和开发(jq本身的插件开发)，可读性高。 - 发布版
名称一般为：jquery-版本号.min.js，大小约为100kb左右，经过工具压缩或者经过服务器开启Gzip压缩，主要用于发布的产品和项目(可读性低)。
本次学习使用的是发布版
- 开发板
二、jq的使用
- 引入方法
由于jq本身也是js文件，所以与其他js文件引入方式相同，新建js目录，将下面语句放入head中。
<script src="js/jquery.min.js"></script>
-
使用方法
jq程序的编写与js相同，都是放入script标签中，并用如下格式$(document).ready(function(){ // 开始写jq语句 alert("hello world!") })下面说一下 $(document).ready() 和 window.onload 的区别
- $(document).ready()
1.只需等待网页中的DOM结果加载完毕就可以执行jq语句
2.可以多次执行，第N次也不会被上一次覆盖 - window.onload
1.必须等待网页全部加载完毕(包括图片，视频等)，才执行js语句
2.只能执行一次，如果再次执行，会把第一次覆盖
也可以使用简写方法
$(function(){ // 开始写jq语句 alert("hello world!") }) - $(document).ready()
三、jq的基本语法
基础语法：$(选择器).方法()，选择器用来查找和查询html元素，方法是对元素进行的操作。如：
$(this).hide(); //隐藏当前对象
$("p").hide(); //隐藏所有p元素
$("p.test").hide(); //隐藏所有class="test"的p元素
$("#test").hide(); //隐藏id="test"的元素
四、jq的选择器
jq的选择器很多都与CSS相像。
-
基本选择器
- 标签选择器
$("h3").css("background","#000000"); //获取并设置所有的 h3元素的背景颜色 - class选择器
$(".title").css("background","#000000"); - id选择器
$("#box").css("background","#000000"); - 枚举选择器
$("h2,dt,.title").css("background","#000000");
- 标签选择器
-
层次选择器
- 并集选择器
$("h2.title").css("background","#000000"); //获取并设置所有class为title的h2元素的背景颜色 - 全局选择器
$("*").css("background","#000000"); //改变所有元素
- 并集选择器
-
过滤选择器
- 基本过滤选择器可以选取第一个元素，最后一个元素，索引是奇偶的元素
li:first 第一个
li:last 最后一个
li:odd 奇数项(index从0开始)
li:even 偶数项(index从0开始) - 可以根据索引的值选取元素
:eq(index) 选取索引等于index的元素(index从0开始)
:gt(index) 选取索引大于index的元素(大于index，不包括index)
:lt(index) 选取索引小于index的元素(小于index，不包括index) - 支持一些特殊的选择方式
:not(选择器) 选取去除所有给定选择器匹配的元素
:header 选取所有标题标签
:focus 选取当前获得焦点的元素 - 可见性过滤选择器
:visible 选取所有的可见的元素
:hidden 选取所有不可见的元素 - 后代选择器、子选择器、相邻选择器、同辈选择器
$("#menu span") 选取id为menu下的所有span元素
$("#menu>span") 选取直接子元素
$(“h2+p”) 选取身后相邻元素
$(“h2~p”) 所有身后同辈元素 - 属性选择器
$("[href^=‘en’]") 选取给定属性值开头的元素
$("[href$=‘en’]") 选取给定属性值结尾的元素
$("[href=‘en’]") 选取包含给定属性值的元素
$(" li[id][title=新闻要点]") 选取含有id属性和title属性为新闻要点的元素
- 基本过滤选择器可以选取第一个元素，最后一个元素，索引是奇偶的元素
五、jq的事件
jq的事件又与js有很多相似，只不过把on都去掉了
-
鼠标事件
click 单击
dblclick 双击
mouseenter 鼠标移入
mouseleave 鼠标移出
hover 鼠标悬停 -
键盘事件
keypress 记录键盘按键的次数
keydown 当键盘按下某个键时
keyup 当键盘某个键松开时 -
表单事件
submit 提交事件
change 内容改变事件
focus 获取焦点
blur 失去焦点
六、jq的效果
-
hide()隐藏，hide(时间) 以毫秒为单位
show()显示，show(时间) 完成效果的时长
toggle() 会在显示和隐藏中来回切换<p>点击隐藏按钮消失，点击显示按钮出现</p> <button id="hide">隐藏</button> <button id="show">显示</button> <button id="toggle">显示/隐藏</button> <script type="text/javascript"> $(function(){ $("#hide").click(function(){ $("p").hide(1000); }) $("#show").click(function(){ $("p").show(2000); }) $("#toggle").click(function(){ $("p").toggle(); }) }) </script> -
淡入淡出
fadeIn()：用于淡入已隐藏的元素
fadeOut()：用于淡出可见的元素
fadeToggle()：可以在淡入淡出中切换
fadeTo()：允许渐变为给定的不透明度(值介于0-1之间)，必须加上slow/fast/time，没有默认参数<button id="button1">点击渐入div元素</button> <button id="button2">点击渐入div元素</button> <button id="button3">点击切换淡入淡出</button> <button id="button4">点击使颜色变淡</button> <div id="div1" style="display: none; width: 80px; height: 80px; background-color: red;"></div> <div id="div2" style="display: none; width: 80px; height: 80px; background-color: green;"></div> <div id="div3" style="display: none; width: 80px; height: 80px; background-color: blue;"></div> <script type="text/javascript"> $(function(){ $("#button1").click(function(){ $("#div1").fadeIn(); $("#div2").fadeIn("slow"); $("#div3").fadeIn(3000); }) $("#button2").click(function(){ $("#div1").fadeOut(); $("#div2").fadeOut("slow"); $("#div3").fadeOut(3000); }) $("#button3").click(function(){ $("#div1").fadeToggle(); $("#div2").fadeToggle("slow"); $("#div3").fadeToggle(3000); }) $("#button4").click(function(){ $("#div1").fadeTo("slow",0.15); $("#div2").fadeTo("fast",0.4); $("#div3").fadeTo(3000); }) }) </script>
七、jq的动画
animate() 用于创建自定义动画
用法：$(选择器).animate({css属性},时长,callback)
callback(可有可无是动画完成后所执行的函数)
该函数有几种用法，下面举例说明：
<input type="button" id="btn1" value="点击开始动画1" />
<input type="button" id="btn2" value="点击开始动画2" />
<!-- 默认情况下，所有的元素都在文档流中，不可移动，
如果要加动画效果需要将position 设置为relative ，fixed，absolute -->
<div id="div1" style="background-color: green; width: 100px; height: 100px; position: absolute;"></div>
<div id="div2" style="background-color: red; width: 200px; height: 100px; position: absolute;">HELLO</div>
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
// 单个css样式改变
$("#div1").animate({left:'250px'},2000);
// 多重css样式改变
$("#div1").animate({left:'250px',opacity:'0.5',height:'150px',width:'150px'},3000);
// 相对值样式改变
$("#div1").animate({height:'+=150px',width:'+=150px'});
// 预定值样式改变
$("#div1").animate({height:'toggle'});
// 使用队列功能 可以编写多个animate函数
// jq就会创建包含这些方法的队列，逐一调用
$("#div1").animate({height:'300px'});
$("#div1").animate({width:'300px'});
$("#div1").animate({height:'100px'});
$("#div1").animate({width:'100px'});
})
$("#btn2").click(function(){
$("#div2").animate({left:'100px'});
$("#div2").animate({fontSize:'3em'});
})
})
</script>
stop() 用于停止动画
用法：$(选择器).stop(stopAll,goToEnd)
stopAll：可选，参数规定是否清除动画队列，默认值false，即停止当前正在活动的动画，允许之后的动画队列继续执行
goToEnd：可选，参数规定是否立即完成当前的动画，默认值false，即停止在半道
可用下面例子进行展示：
<button id="btn1">停止动画</button>
<div id="div1" style="background-color: red; width: 200px; height: 20px;">点击向下滑动面板</div>
<div id="div2" style="display: none; background-color: green; width: 200px; height: 200px;">HELLOWORLD</div>
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
$("#div2").stop();
})
$("#div1").click(function(){
$("#div2").slideDown(5000);
})
})
</script>
八、jq的回调
Callback函数是在当前动画100%完成后执行的，在应用中如果想要两种效果有先后关系，则常用这种方法
<button id="btn1">隐藏按钮有回调</button>
<button id="btn2">隐藏按钮没有回调</button>
<p>点击隐藏按钮，段落会消失</p>
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
$("p").hide("slow",function(){
alert("段落现在被隐藏了");
});
})
$("#btn2").click(function(){
$("p").hide(2000);
alert("段落现在被隐藏了");
})
})
</script>
九、jq方法的链接
jq提供了可以将多个方法链接在一起的功能，即在后面连接多个.方法
- 方便编写
- 浏览器不用多次查找相同的元素
<p id="p1">HELLOWORLD</p>
<button id="btn1">点我</button>
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
$("#p1").css("color","red")
.slideUp(2000)
.slideDown(2000);
// jq会自动将多余的空格回车换行规避掉
})
})
</script>
十、jq操作内容和属性
与js中的innerHTML和innerText类似
-
text()-设置或返回所选元素的文本内容
-
html()-设置或返回所选元素的文档内容
-
val()-设置或返回表单字段的值
-
attr() 获取标签中某个属性的值
<p id="p1">这是段落中的<b>粗体</b>文本。</p> <input type="text" value="HELLOWORLD" /> <a href="http://www.qq.com">腾讯</a> <button id="btn1">显示文本</button> <button id="btn2">显示文档</button> <button id="btn3">显示文本框中的值</button> <button id="btn4">显示a标签href的值</button> <script type="text/javascript"> $(function(){ $("#btn1").click(function(){ alert($("#p1").text()); }) $("#btn2").click(function(){ alert($("#p1").html()); }) $("#btn3").click(function(){ alert($("input").val()); }) $("#btn4").click(function(){ alert($("a").attr("href")); }) }) </script> -
同样也可以用此方法设置属性
<p id="p1">段落1</p> <p id="p2">段落2</p> <p>输入框:<input type="text" id="text1"/></p> <button id="btn1">设置文本</button> <button id="btn2">设置文档</button> <button id="btn3">设置文本框的值</button> <script type="text/javascript"> $(function(){ $("#btn1").click(function(){ $("#p1").text("HELLOWORLD"); }) $("#btn2").click(function(){ $("#p2").html("<b>HELLOWORLD</b>"); }) $("#btn3").click(function(){ $("#text1").val("HELLOWORLD"); }) }) </script> -
添加新的HTML内容
append 在被选元素的结尾添加，在元素内添加
prepend 在元素的开头添加，在元素内添加
after 在被选元素之后插入，在元素外添加
before 在被选元素之前插入，在元素外添加<p>这是一个段落</p> <p>这是另一个段落</p> <ol> <li>List 1</li> <li>List 2</li> <li>List 3</li> </ol> <br> <button id="btn1">添加文本</button> <button id="btn2">添加列表项</button> <button id="btn3">before</button> <button id="btn4">after</button> <script type="text/javascript"> $(function(){ $("#btn1").click(function(){ $("p").append("<b>追加文本</b>"); }) $("#btn2").click(function(){ $("ol").append("<li>追加列表项</li>"); }) $("#btn3").click(function(){ $("ol").before("之前插入"); }) $("#btn4").click(function(){ $("ol").after("之后插入"); }) }) </script> -
删除元素
remove() 删除被选元素(及其子元素)，可以传一个参数，可以对被删除的元素进行过滤，使用时不能设置成父子元素，必须从同级元素中删除empty() 从被选元素中删除子元素
<div id="div1" style="background-color: yellow; width: 200px; height: 150px; border: 1px solid black;"> 这是div中的文本 <p>这是在div中的段落</p> <p>这是在div中的另一个段落</p> <p class="p1">这是在div中的另一个段落</p> </div><br> <button id="btn1">移出div元素</button> <button id="btn2">清空div元素</button> <script type="text/javascript"> $(function(){ $("#btn1").click(function(){ // $("#div1").remove(); $("p").remove(".p1"); }) $("#btn2").click(function(){ // 使div1的内部清空，相当于把该元素的html变为空 $("#div1").empty(); }) }) </script>
扫一扫
1862
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
