jQuery第一天

jquery的概述

什么是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("类名"):给指定元素添加某个类