JQuery基础

#JQuery基础

1. Javascript类的实现方式

   1. Object方式

      • Objecet是所有类的父类，可以使用Object表示其他类

   2. 函数方式

      • 函数名作为类名，函数内部包含的属性和方法作为类成员

2. this的作用

   • this表示当前作用域下的对象
   • 不同作用域下this表示的对象不同
     • 在函数中指向的是window
     • 在方法中指向的是调用该方法的对象

3. 对象类型的判断

   1. typeof函数

      • 返回对象的具体类型

   2. instanceof函数

      • 判断对象是否是某种类型的实例

4. 在页面中引入jQuery

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

   注意：一定要放在前面(可放在header中)

5. jQuery基础语法

   1. $(document).ready()与window.onload类似，但也有区别

   window.onload	$(document).ready()
   行时机	必须等待网页中所有的内容加载完毕后（包括图片、flash、视频等）才能执行
   写个数	同一页面不能编写多个
   化写法	无

6. jQuery语法结构

   $(selector).action() ;

   • 工厂函数$()：将DOM对象转化为jQuery对象
   • 选择器 selector：获取需要操作的DOM 元素
   • 方法action()：jQuery中提供的方法
     示例：$("#current").addClass("current");

7. jQuery代码风格

   1. “$”等同于“ jQuery ”

      	$(document).ready()=jQuery(document).ready()
      	$(function(){...})=jQuery (function(){...})
      

   2. 操作连缀书写

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

   3. DOM对象和jQuery对象

      • DOM对象：直接使用JavaScript获取的节点对象

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

      • jQuery对象：使用jQuery包装DOM对象 后产生的对象，它能够使用jQuery中的方法

        	$("#title").html( );
        	等同于
        	document.getElementById("title").innerHTML;
        

      • 提示：DOM对象和jQuery对象分别拥有一套独立的方法，不能混用

   4. 使用$()函数进行转化：$(DOM对象)

      	var txtName =document.getElementById("txtName"); //DOM对象
      	var $txtName =$(txtName);   //jQuery对象
      

      **注意：jQuery对象命名一般约定以$开头

   5. jQuery对象转DOM对象

      • jQuery对象是一个类似数组的对象，可以通过[index]的方法得到相应的DOM对象

        	var $txtName =$ ("#txtName");      //jQuery对象
        	var txtName =$txtName[0];          //DOM对象
        

      • 通过get(index)方法得到相应的DOM对象

        	var $txtName =$("#txtName");        //jQuery对象
        	var txtName =$txtName.get(0);       //DOM对象
        

8. jQuery选择器

   1. 基本选择器包括标签选择器、类选择器、ID选择器、并集选择器、交集选择器和全局选择器

      法构成	描述	示例
      器	element	根据给定的标签名匹配元素
      .class	根据给定的class匹配元素	$(" .title")选取所有class为title的元素
      器	#id	根据给定的id匹配元素
      器	selector1,selector2,…,selectorN	将每一个选择器匹配的元素合并后一起返回
      器	element.class或element#id	匹配指定class或id的某元素或元素集合
      器	*	匹配所有元素

   2. 层次选择器通过DOM 元素之间的层次关系来获取元素

      法构成	描述	示例
      器	ancestor descendant	选取ancestor元素里的所有descendant（后代）元素
      parent>child	选取parent元素下的child（子）元素	$(" #menu>span" )选取#menu的子元素<span>
      选择器	prev+next	选取紧邻prev元素之后的next元素
      选择器	prev~sibings	选取prev元素之后的所有siblings元素
      器	[attribute]	选取包含给定属性的元素
      器	[attribute=value]	选取等于给定属性是某个特定值的元素
      器	[attribute !=value]	选取不等于给定属性是某个特定值的元素
      器	[attribute^=value]	选取给定属性是以某些特定值开始的元素
      器	[attribute$=value]	选取给定属性是以某些特定值结尾的元素
      器	[attribute*=value]	选取给定属性是以包含某些值的元素
      器	[selector] [selector2] [selectorN]	选取满足多个条件的复合属性的元素

   3. 过滤选择器通过特定的过滤规则来筛选元素

      • 语法特点是使用“:”，如使用$(“li:first”)来选取第一个li元素

      • 基本过滤选择器、可见性过滤选择器、内容过滤选择器、子元素过滤选择器……

      • 基本过滤选择器可以选取第一个元素、最后一个元素、索引为偶数或奇数的元素

        成	描述	示例
        器	:first	选取第一个元素
        器	:last	选取最后一个元素
        器	:even	选取索引是偶数的所有元素(index从0开始)
        器	:odd	选取索引是奇数的所有元素（index从0开始）
        器	:eq(index)	选取索引等于index的元素（index从0开始）
        器	:gt(index)	选取索引大于index的元素（index从0开始）
        器	:lt(index)	选取索引小于index的元素（index从0开始）
        器	:not(selector)	选取去除所有与给定选择器匹配的元素
        器	:header	选取所有标题元素，如h1~h6
        器	:focus	选取当前获取焦点的元素

      • 可见性过滤选择器可以通过元素显示状态来选取元素

        成	描述	示例
        择器	:visible	选取所有可见的元素
        择器	:hidden	选取所有隐藏的元素

        • 示例 $(" p:hidden").show();获取隐藏的<p>元素，使其显示
        • 示例 $(" p:visible").hide();获取显示的<p>元素，使其隐藏

9. jQuery的样式设置

   1. 使用css()为指定的元素设置样式值

      css(name,value)
      示例：$(this).css(“border”,“5px solid #f5f5f5”);

   2. 使用css()添加边框效果

   3. 追加样式

      addClass(class)或addClass(class1 class2 … classN)

   4. 移除样式

      removeClass(“style2 ”)或removeClass("style1 style2 ")

   5. toggleClass()模拟了addClass()与removeClass()实现样式切换的过程

   6. html()可以对HTML代码进行操作，类似于JS中的innerHTML

      示例： $(“div.left”).html("

      …
      ");

   7. text()可以获取或设置元素的文本内容

   8. html()和text() 的区别如下：

      |语法|参数|功能|
      |html()|无参数|用于获取第一个匹配元素的HTML内容或文本内容|
      |html(content)|content参数为元素的HTML内容|用于设置所有匹配元素的HTML内容或文本内容|
      |text()|无参数|用于获取所有匹配元素的文本内容|
      |text (content)|content参数为元素的文本内容|用于设置所有匹配元素的文本内容|

   9. val()可以获取或设置元素的value属性值