什么是JQuery
jQuery是一个JavaScript框架。它兼容CSS3,还兼容各种浏览器。文档说明很全,应用详细,成熟插件多。
核心理念:write less,do more
jQuery的引入
学习jQuery只需要将对应js库下载,并导入到我们项目下,在html页面使用script标签导入<script src="../js/jquery-1.11.0.js" type="text/javascript" ></script>
基本语法/对象获取
在js中document.getElementById("id");还有通过tagName等等获取对象
在jQuery中,jQuery(选择器)或者$(选择器)
在jQuery中,"jQuery == $",区分大小写
jQuery中对象变量命名建议以$开头,便于区分。
比如通过id找到某个标签对象,var $demoId = $("$demoId");
jQuery中的注释和js中一样。
jQuery的基本操作
jQuery页面加载
$(document).ready(当页面加载完成时要执行的函数),可以执行多次,且比js中的onload方法速度快。
更加简版的写法:$(当页面加载完成时要执行的函数)
js对象和jQuery对象相互转换
把jQuery对象()转换成对象:q[0]或者$q.get(0)
js对象p转换成jQuery对象:$(p)
jQuery的基本选择器(重要)
ID选择器:$("#id名")
类选择器:$(".类名")
标签选择器:$(标签名)
jQuery的事件(重要)
直接调用jquery对象的方法进行绑定
点击事件是click()方法
域的内容改变事件是change()方法
bind(事件类型,函数),通过bind方法可以绑定诸多事件
jQuery的效果(一般)
显示隐藏
show(speed,callback),显示
speed,速度
callback,表示显示后要进行的操作(回调)
hidden(speed,callback),隐藏
toggle(),显示隐藏的切换开关
滑动
slideDown(speed,callback),滑动显示
slideUp(speed,callback),滑动隐藏
slideToggle(speed,callback),滑动进行显示隐藏的切换
淡入淡出
fadeIn(speed,callback),淡入
fadeOut(speed,callback),淡出
fadeTo(speed,opacity,callback),由不透明变成指定的透明度:透明度由0-1表示
opacity:指定透明度
fadeToggle(speed,callback),切换淡入淡出
定时弹广告案例
$(function(){ //1.书写显示广告图片的定时操作 time =setInterval("showAd()",3000); }); //2.书写显示广告图片的函数 function showAd(){ //3.获取广告图片,并让其显示 $("#img2").slideDown(3000); //4.清除显示图片定时操作 clearInterval(time); //5.设置隐藏图片的定时操作 setInterval("hiddenAd()" ,3000); } function hiddenAd(){ $("#img2").silidUp(); clearInterval(time); setInterval("showAd()" ,3000); }
jQuery的其它选择器总结(了解)
学习这么多jQuery的选择器的目的是:更快、更方便地找到想找的标签
层级选择器
$("A B"):获得A元素内部的所有B元素,包含内部的所有后代标签(祖孙关系)
$("A>B"):获取A元素下面的所有B子元素。(父子关系)
$("A+B"):获取A元素同级的一个B元素。(兄弟)
$("A~B"):获取A元素同级的所有B元素。(兄弟们)
基本过滤选择器
$("选择器:first"),表示找到所有符合该选择器的第一个元素。
$("选择器:last"),表示找到所有符合该选择器的最后一个元素。
$("选择器:even"),表示找到所有符合该选择器的下标为偶数的元素。
$("选择器:odd"),表示找到所有符合该选择器的下标为奇数的元素。
$("选择器:eq(index)"),表示找到符合该选择器的第index个元素。
$("选择器:gt(index)"),表示找到符合该选择器的并且下标大于index的所有元素。
$("选择器:lt(index)"),表示找到符合该选择器的并且下标小于于index的所有元素。
$(":header"),找到所有标题元素。
$(":empty"),找到所有空元素(不包含子元素和文本的元素)<img/><hr/>
属性选择器
[属性名p]:获取有属性名p的元素
[属性名='属性值']:获取属性名 = 属性值的元素
[属性名 != '属性值']:获取属性名 != 属性值的元素
[...][...][...]多重属性选择器
[属性名^=属性值]:获得 属性名 以属性值开头的所有元素
[属性名$=属性值]:获得 属性名 以属性值结尾的所有元素
[属性名*=属性值]:获得 属性名 含有属性值的所有元素
表单类型选择器(了解)
表单属性选择器(了解)
jQuery的属性(重要)
$(selector).attr(attribute):返回指定元素的某个属性值
$(selector).attr(attribute,value):给指定元素设置属性
attr()方法适合用于属性值不是boolean类型的属性
$(selector).prop(attribute):返回指定元素的某个属性值
$(selector).prop(attribute,value):给指定元素设置属性
prop()方法适合用于属性值是boolean类型的属性
html():往标签体中写HTML内容(对应js中的innerHTML属性)
text():往标签体中写普通文本(对应js中的innerText属性)
val():设置或返回Value属性的属性值
只能用于获取和设置表单项的value属性
css():设置css样式
hasClass("类名"):指定元素是否包含某个类
addClass("类名"):给指定元素添加某个类