jQuery学习笔记一

一。jQuery引入的方式：

1。下载文件后，直接引入：<script src="jquery.js"> </script>

2。直接从谷歌引入：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
/jquery/1.4.0/jquery.min.js"></script>

或者从微软引入：

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery
/jquery-1.4.min.js"></script>

还可以从百度引入：

<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>

二。获取元素的方法：

1. 获取当前的元素：$(this);
   

2. 获取id:$("#idname");

3. 获取标签数组（改：集合）：$("div")-->这里讲数组，其实是不正确的。获取的其实只是一个集合，并不是数组。一开始我以为它是数组，是因为它有length，但当我调用它的第一个元素的时候，用$("div")[0]却是不行的。其实JQ里面的对象都有length的属性，所以，不是有length的都是数组。

   不能用数组的方式选择想操作的元素，但JQ提供了更为丰富的选择器：详细的在这里：http://www.w3school.com.cn/jquery/jquery_ref_traversing.asp　JQ遍历函数

   其中常用的：第一个可用：$("div").first()

                        最后一个用可：$("div").last()

                       倒数第二个可用：$("div").end()

                       eq(i) 返回第i个元素，类似数组，从0开始计算；

                      第三个可用：$("div").slice(2,3)  用slice()可以选择集合里任一个元素，其中slice(a,b)，表示从第a个开始（不包括a)到第b个结束；同时从1开始，而不是从0开始算。

4. 获到class元素：$(".classname")

   而JS中，获取元素有四种方式：document.getElementById("idname");

                                                   document.getElementsByClassName("classname");

                                                  document.getElementsByTagName("div");

                                                  document.getElementsByName  ("name");（很少用，一般用在input类)

$("p.intro") 选取所有 class="intro" 的 <p> 元素。

$("p#demo") 选取所有 id="demo" 的 <p> 元素。 //这个有点多余。

jQuery 属性选择器

jQuery 使用 XPath 表达式来选择带有给定属性的元素。

$("[href]") 选取所有带有 href 属性的元素。

$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。

$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。

$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

jQuery CSS 选择器

jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。

下面的例子把所有 p 元素的背景颜色更改为红色：

实例

$("p").css("background-color","red");

三。加载页面元素时（后）执行函数：

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

可简写成：$(function( ){ } );

js中的window.onload=function(){ }

相当于jq中的:$(window).load(function(){ });

具体区别可以参考：http://www.jb51.net/article/21628.htm

jq中除了喜欢用$之外，还有很多的小括号，这有点不太适应！

还有，有些地方JS中用点（属性），而JQ中用括号（调用方法）

注：有些地方讲到：$(document).ready(function(){})是在页面加载时执行函数，但我也看到多处说到是页面加载完成时执行。我觉得后者更为可靠。

比如：http://www.runoob.com/jquery/jquery-events.html

四。onclick与click等语法上不同：

JS 中隐藏当前元素：this.style.display="none"; display="block";

JQ中用：$(this).hide();  $(this).show();

onmouseover与mouseover

onmouseout与mouseout

onfocus与focus

另外，注意：mouseover与mouseenter的区别：

给父元素设置事件的时候，当鼠标经过父元素和子元素，都对调用mouseover的函数；而mouseenter在经过子元素的时候不会调动你元素的函数。

mouseout与mouseleave的区别也类似。

这里也实例：http://blog.csdn.net/ocean1010/article/details/7394599

还有其它很多有些区别的，这里不一一列举了。

事件中，hover比较特殊，它是包括两个函数的：第一个是鼠标移入时执行，第二个是移出时执行；两函数中间用逗号隔开。

比如：

$("#p1").hover(function(){
  alert("You entered p1!");
  },
  function(){
  alert("Bye! You now leave p1!");
});

若是简单的CSS样式的改变，可以直接通过CSS样式来设置。