一。jQuery引入的方式:
1。下载文件后,直接引入:<script src="jquery.js"> </script>
2。直接从谷歌引入:
或者从微软引入:
还可以从百度引入:
二。获取元素的方法:
获取当前的元素:$(this);
获取id:$("#idname");
获取标签数组(改:集合):$("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开始算。
获到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.οnlοad=function(){ }
相当于jq中的:$(window).load(function(){ });
具体区别可以参考:
jq中除了喜欢用$之外,还有很多的小括号,这有点不太适应!
还有,有些地方JS中用点(属性),而JQ中用括号(调用方法)
注:有些地方讲到:$(document).ready(function(){})是在页面加载时执行函数,但我也看到多处说到是页面加载完成时执行。我觉得后者更为可靠。
比如:
四。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的区别也类似。
这里也实例:
还有其它很多有些区别的,这里不一一列举了。
事件中,hover比较特殊,它是包括两个函数的:第一个是鼠标移入时执行,第二个是移出时执行;两函数中间用逗号隔开。
比如:
$("#p1").hover(function(){ alert("You entered p1!"); }, function(){ alert("Bye! You now leave p1!");});
若是简单的CSS样式的改变,可以直接通过CSS样式来设置。