JQuery基础

 JQuery是一个新型的javascript库。

下面是在网上学习的一些JQuery的最基本的函数的使用：

<SCRIPT LANGUAGE="JavaScript">

<!--

$(document).ready(function() {
    $("div").click(function(){//$("div")就是页面中所有的 div标签
      alert("Hello World!");
    })
})
//-->
</SCRIPT>

$("div").click $("div")就是页面中所有的 div标签 这句话就是给所有的标签为div的元素 绑定了一个click事件 即当所有div 被鼠标 单击的时候 执行 alert("Hello World!");

 

下面我们看看jquery对css的操作方法 addClass和removeClass

addClass

为每个匹配的元素添加指定的类名。
removeClass

为每个匹配的元素移除指定的类名。

<SCRIPT LANGUAGE="JavaScript">
<!--
$(document).ready(function() {
    $("div").addClass("redborder");//当页面加载完成后给每个div标签 加上 redborder样式
    $("div").click(function(){
       $(this).removeClass("redborder");//当鼠标单击div标签的时候 移除当前div标签的redborder样式
    })
})
//-->
</SCRIPT>
$("div").addClass("redborder");//当页面加载完成后给每个div标签 加上 redborder样式
$(this).removeClass("redborder");//当鼠标单击div标签的时候 移除当前div标签的redborder样式
这里我们注意$(this) 因为jquery 选择器 都是返回当前对象,通过$("div") 我们是给页面所有的div标签都绑定了click事件 而$(this) 即使当前鼠标单击的标签对象

 

下面我们来看看 css,height和width
首先我们看看 css(key, value) 和 css(name)
css(key, value)

在所有匹配的元素中，设置一个样式属性的值。
css(name)

访问第一个匹配元素的样式属性。使用这个方法可以很容易地取得第一个匹配元素的样式属性的值。
css(properties)

把一个“名/值对”对象设置为所有匹配元素的样式属性。 这是一种在所有匹配的元素上设置大量样式属性的最佳方式。

首先我们看看

css(key, value)
我们看看下面代码
$("#css1").click(function(){
       $(this).css("border","2px dashed #000000");
    })
当鼠标单击ID等于css1的元素 此元素的border属性设置成 "2px dashed #000000"
css(name)
$("#css2").click(function(){
       $(this).css("border","2px dashed #6600FF");
       alert($(this).css("border"));
    })
$(this).css("border","2px dashed #6600FF");

当鼠标单击ID等于css2的元素 此元素的border属性设置成 "2px dashed #6600FF"
alert($(this).css("border"));
获得border的属性值.
css(properties)
$("#css3").click(function(){
       $(this).css({ color: "red", background: "blue" });
    })

当鼠标单击ID等于css3的元素 样式color为red background为blue
下面我们看看height和width用法 其实从单词意思上也应该知道的差不多

height(val)

为每个匹配的元素设置CSS高度(height)属性的值。如果没有明确指定单位（如：em或%），使用px。
height()

取得第一个匹配元素当前计算的高度值（px）。
height(val)
$("#ht1").click(function(){
       $(this).height("200px");
    alert($(this).height());
    })
$(this).height("200px"); 当鼠标单击ID等于ht1的元素 此元素的高度将变成200px
alert($(this).height());显示height的值
width(val) width() 和height是一样的 只不过就是设置宽度.这里就不多说了.

我们来看看jquery是如何实现淡入 淡出效果的.

fadeOut(speed,callback)

通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。

这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

$("#fadeOut1").click(function(){
       $("#fadeOut").fadeOut("slow",function(){alert("是不是下面这个层慢慢消失了！")});
    })
这里我们说需要说明的是
speed (String|Number): (可选) 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)

fadeIn(speed, callback)

通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。

这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。 |
用法和 fadeOut 一样,只不过是一个相反的过程
fadeTo(speed,opacity,callback)

把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。

这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
$("#fadeTo1").click(function(){
       $("#fadeTo").fadeTo("slow",0.5,function(){alert("是不是下面这个层透明度变成50%了！")});
    })
0.5表示将不透明度设置成50%

 

slideDown(speed,callback)

通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。

这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式显示出来。
这里的 speed (String|Number): (可选) 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)
我们看看下面代码

$("#slideDown").slideDown("slow",function(){alert("是不是下面这个层滑动显示了！")});
当然我们可以设置速度
$("#slideDown").slideDown("normal",function(){alert("是不是下面这个层滑动显示了！")});//正常速度
$("#slideDown").slideDown("fast",function(){alert("是不是下面这个层滑动显示了！")});//快速
$("#slideDown").slideDown(3000,function(){alert("是不是下面这个层滑动显示了！")});//显示一共用3秒显
让ID为slideDown的div 通过向下增大的方式显示出来,
slideToggle(speed,callback)

通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。

这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏或显示。

代码

$("#slideToggle").slideToggle("slow",function(){alert("hello！")});
这个东西实际上就是 slideDown slideUp 的集合体 如果元素当前可见 则 滑动隐藏 如果当前元素已经隐藏则滑动显示
slideUp(speed, callback)

通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。

这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏起来。
与slideDown用法相同..只不过就是效果都是反的

 

我们根据实例来解释jquery选择器（selectors）中xpath几种常用的用法

比如下面html代码
<ul>
<li class="aaaa" title="ttt">li-1</li>
<li class="bbbb">li-2</li>
<li title="fffff">li-2</li>
</ul>
<div class="aaaa" title="ttt">li-1</div>
<div class="bbbb">li-2</div>
<div title="fffff">li-2</div>
－－－－－－－－－－－－－－－－－－－－－－－－－－－

第一种根据属性选择E[@attr]
$("[@title]").click()..........

即选择所有元素内 属性带有title的元素
即
<li class="aaaa" title="ttt">li-1</li>
<li title="fffff">li-2</li>
<div class="aaaa" title="ttt">li-1</div>
<div title="fffff">li-2</div>
$("div[@title]").click()..........

选择所有div标签下的所有带title的元素
即
<div class="aaaa" title="ttt">li-1</div>
<div title="fffff">li-2</div>
第二种根据属性值选择E[@attr=val]
$("div[@title=ttt]").click()................

选择div下所有title属性等于ttt的元素
即<div class="aaaa" title="ttt">li-1</div>
如果是 $("[@title=ttt]").click()................
所有元素下属性title等于ttt的元素
<li class="aaaa" title="ttt">li-1</li>
<div class="aaaa" title="ttt">li-1</div>
第三种根据属性值开始字母选择E[@attr^=val]
$("div[@title^=t]").click()................
所有div元素下所有属性title值是以t为开头的元素
第三种根据属性值结尾字母选择E[@attr$=val]
$("div[@title$=t]").click()................
所有div元素下所有属性title值是以t为结尾的元素
第三种根据属性值包含字母选择E[@attr*=val]
$("div[@title*=t]").click()................
所有div元素下所有属性title值是包含t的所有元素
第三种根据多个属性选择E[@attr=val][@attr=val]
$("div[@title=ttt][@class=aaaa]").click()................
所有div元素下所有属性title值是等于ttt并且属性class等于aaaa的元素

load(url, params, callback)

装入一个远程HTML内容到一个DOM结点。

注意：避免用装入的scripts脚本，装入脚本改用$.getScript.当任何字符显示时，IE会忽略所有的脚本。
下面我们看看下面的代码

$("#btndemo1").click(function(){
       $("#demo1").load("loadhtml.html");
    })
当点击 btndemo1按钮时候 将会把loadhtml.html的内容加载到 id=demo1 的div里面
这个很简单大家都容易理解下面我们看看下面的代码
$("#btndemo2").click(function(){
       $("#demo2").load("loadhtml.html #div2");
    })
当点击 btndemo1按钮时候 将会把loadhtml.html的内容里面 id=div2 元素里面的内容 加载到 id=demo1 的div里面
loadhtml.html #div2注意中间一定要有空格