-
jQuery
-
a) 是一个javascript函数库
-
jQuery库包含特性
-
a) HTML元素读取
-
b) HTML元素操作
-
c) CSS操作
-
d) HTML事件函数
-
e) JavaScript特效和动画
-
f) HTML DOM遍历和修改
-
g) AJAX
-
h) Utilities
-
使用jQuery准备工作
-
a) 第一种方式：下载jQuery
-
b) 第二种方式：可以从 Google或 Microsoft 加载 CDN jQuery 核心文件。
i. 使用Google的cdn jQuery文件
-
<scripttype="text/javascript" src="http://ajax.googleapis.com/ajax/libs
/jquery/1.4.0/jquery.min.js"></script>
ii. 使用Microsoft的cdn jQuery文件
-
<scripttype="text/javascript"src="http://ajax.microsoft.com/ajax/jquery
/jquery-1.4.min.js"></script>
-
使用jQuery hide() 函数，隐藏当前的 HTML 元素。
-
a) 实例：
<head>
<scripttype=”text/javascript” src=”jquery.js”>
</script>
<scripttype=”text/javascript”>
$(document).ready(function(){
$(“button”).click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<buttontype=”button”>click me</button>
</body>
-
使用jQuery hide()函数，隐藏id=”test”的元素
-
a) <script type=”text/javascript”>
$(document).ready(function(){
$(“button”).click(function(){
$(“#test”).hide();
})
});
</script>
-
使用jQuery hide()函数，隐藏所有<p>元素
-
a) 实例：
<script type=”text/javascript”>
$(document).ready(function(){
$(“button”).click(function(){
$(“p”).hide();
});
});
</script>
-
使用jQuery hide()函数，隐藏所有class=”test”的元素
-
a) 实例：
<script type=”text/javascript”>
$(document).ready(function(){
$(“button”).click(function(){
$(“.test”).hide();
});
});
</script>
-
jQuery语法
-
a) 基础语法：$(selector).action()
-
b) 说明：
i. 美元符号定义jQuery
ii. 选择符（selector）“查询”和“查找”html元素
iii. jQuery的action()执行对元素的操作
-
文档就绪函数
-
a) 语法：
$(document).ready(function(){
});
-
jQuery选择器
-
a) 分类：
i. 元素选择器
-
实例：$(“p”),$(“p.first”),$(“p#demo”)
ii. 属性选择器
-
实例：$(“[href]”),$(“[href=’#’]”),$(“[href!=’#’]”),$(“[href$=’.jpg’]”)
iii. Css选择器
-
实例：$(“p”).css(“background-color”,”green”);
-
b) 更多选择器实例
| 语法 |
描述 |
| $(this) |
当前 HTML 元素 |
| $("p") |
所有 <p> 元素 |
| $("p.intro") |
所有的 <p> 元素 |
| $(".intro") |
所有的元素 |
| $("#intro") |
id="intro" 的第一个元素 |
| $("ul li:first") |
每个 <ul> 的第一个 <li> 元素 |
| $("[href$='.jpg']") |
所有带有以 ".jpg" 结尾的属性值的 href 属性 |
| $("div#intro .head") |
id="intro" 的 <div> 元素中的所有的元素 |
-
jQuery事件函数
-
a) jQuery事件处理方法是jQuery中的核心函数，事件处理程序指的是当html中发生某些事件时所调用的方法。
| Event 函数 |
绑定函数至 |
| $(document).ready(function) |
将函数绑定到文档的就绪事件（当文档完成加载时） |
| $(selector).click(function) |
触发或将函数绑定到被选元素的点击事件 |
| $(selector).dblclick(function) |
触发或将函数绑定到被选元素的双击事件 |
| $(selector).focus(function) |
触发或将函数绑定到被选元素的获得焦点事件 |
| $(selector).mouseover(function) |
触发或将函数绑定到被选元素的鼠标悬停事件 |
-
jQuery名称冲突
-
a) jQuery使用$符号作为jQuery的简介方式，但其他javaScript库中也会使用$符号，就会出现名称冲突
-
b) 解决方式：使用noConflict()的方法
-
c) 实例：var jq =jQuery.noConflict();
-
使用jQuery的结论
-
a) 把所有的jQuery代码置于事件处理函数中
-
b) 把所有的事件处理函数置于文档就绪事件处理器中
-
c) 把jQuery代码置于单独的.js文件中
-
d) 如果存在名称冲突，则重命名jQuery库
-
jQuery效果
-
a) 层的大小改变效果
-
b) 实例：
<script type=”text/javascript”>
$(document).ready(function(){
$(“#start”).click(function(){
$(“#box”).animate({height:300},”slow”);
$(“#box”).animate({width:300},”slow”);
$(“#box”).animate({height:100},”slow”);
$(“#box”).animate({width:100},”slow”);
});
});
</script>
-
淡出效果
-
实例：
<script type=”text/javascript>
$(document).ready(function(){
$(“button”).click(function(){
$(“div”).fadeTo(“slow”,0.25);
});
});
</script>
-
slide panel(滑动面版效果)
-
实例：
<script type=”text/javascript”>
$(document).ready(function(){
$(“.flip”).click(function(){
$(“.panel”).slideToggle(“slow”);
});
});
</script>
-
隐藏部分文本
-
实例：
<script type=”text/javascript”>
$(document).ready(function(){
});
</script>
-
jQuery隐藏和显示
-
a) 隐藏：hide()
-
b) 显示：show()
-
c) 都可以设置两个参数：speed和callback
-
d) 语法：
i. $(selector).hide(speed,callback)
ii. $(selector).show(speed,callback)
-
解释：speed参数规定显示或隐藏的速度，可以设置的值：“slow”,“fast”,“normal”或毫秒。Callback参数是在hide或show函数完成之后被执行的函数名称。
-
16. jQuery切换
-
隐藏显示的内容和显示隐藏的内容语法：
i. $(selector).toggle(speed,callback)
-
实例：
i. $(“button”).click(function(){
$(“p”).toggle();
ii. });
jQuery教程（一）
-
jQuery
-
a) 是一个javascript函数库
-
jQuery库包含特性
-
a) HTML元素读取
-
b) HTML元素操作
-
c) CSS操作
-
d) HTML事件函数
-
e) JavaScript特效和动画
-
f) HTML DOM遍历和修改
-
g) AJAX
-
h) Utilities
-
使用jQuery准备工作
-
a) 第一种方式：下载jQuery
-
b) 第二种方式：可以从 Google或 Microsoft 加载 CDN jQuery 核心文件。
i. 使用Google的cdn jQuery文件
-
<scripttype="text/javascript" src="http://ajax.googleapis.com/ajax/libs
/jquery/1.4.0/jquery.min.js"></script>
ii. 使用Microsoft的cdn jQuery文件
-
<scripttype="text/javascript"src="http://ajax.microsoft.com/ajax/jquery
/jquery-1.4.min.js"></script>
-
使用jQuery hide() 函数，隐藏当前的 HTML 元素。
-
a) 实例：
<head>
<scripttype=”text/javascript” src=”jquery.js”>
</script>
<scripttype=”text/javascript”>
$(document).ready(function(){
$(“button”).click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<buttontype=”button”>click me</button>
</body>
-
使用jQuery hide()函数，隐藏id=”test”的元素
-
a) <script type=”text/javascript”>
$(document).ready(function(){
$(“button”).click(function(){
$(“#test”).hide();
})
});
</script>
-
使用jQuery hide()函数，隐藏所有<p>元素
-
a) 实例：
<script type=”text/javascript”>
$(document).ready(function(){
$(“button”).click(function(){
$(“p”).hide();
});
});
</script>
-
使用jQuery hide()函数，隐藏所有class=”test”的元素
-
a) 实例：
<script type=”text/javascript”>
$(document).ready(function(){
$(“button”).click(function(){
$(“.test”).hide();
});
});
</script>
-
jQuery语法
-
a) 基础语法：$(selector).action()
-
b) 说明：
i. 美元符号定义jQuery
ii. 选择符（selector）“查询”和“查找”html元素
iii. jQuery的action()执行对元素的操作
-
文档就绪函数
-
a) 语法：
$(document).ready(function(){
});
-
jQuery选择器
-
a) 分类：
i. 元素选择器
-
实例：$(“p”),$(“p.first”),$(“p#demo”)
ii. 属性选择器
-
实例：$(“[href]”),$(“[href=’#’]”),$(“[href!=’#’]”),$(“[href$=’.jpg’]”)
iii. Css选择器
-
实例：$(“p”).css(“background-color”,”green”);
-
b) 更多选择器实例
| 语法 |
描述 |
| $(this) |
当前 HTML 元素 |
| $("p") |
所有 <p> 元素 |
| $("p.intro") |
所有的 <p> 元素 |
| $(".intro") |
所有的元素 |
| $("#intro") |
id="intro" 的第一个元素 |
| $("ul li:first") |
每个 <ul> 的第一个 <li> 元素 |
| $("[href$='.jpg']") |
所有带有以 ".jpg" 结尾的属性值的 href 属性 |
| $("div#intro .head") |
id="intro" 的 <div> 元素中的所有的元素 |
-
jQuery事件函数
-
a) jQuery事件处理方法是jQuery中的核心函数，事件处理程序指的是当html中发生某些事件时所调用的方法。
| Event 函数 |
绑定函数至 |
| $(document).ready(function) |
将函数绑定到文档的就绪事件（当文档完成加载时） |
| $(selector).click(function) |
触发或将函数绑定到被选元素的点击事件 |
| $(selector).dblclick(function) |
触发或将函数绑定到被选元素的双击事件 |
| $(selector).focus(function) |
触发或将函数绑定到被选元素的获得焦点事件 |
| $(selector).mouseover(function) |
触发或将函数绑定到被选元素的鼠标悬停事件 |
-
jQuery名称冲突
-
a) jQuery使用$符号作为jQuery的简介方式，但其他javaScript库中也会使用$符号，就会出现名称冲突
-
b) 解决方式：使用noConflict()的方法
-
c) 实例：var jq =jQuery.noConflict();
-
使用jQuery的结论
-
a) 把所有的jQuery代码置于事件处理函数中
-
b) 把所有的事件处理函数置于文档就绪事件处理器中
-
c) 把jQuery代码置于单独的.js文件中
-
d) 如果存在名称冲突，则重命名jQuery库
-
jQuery效果
-
a) 层的大小改变效果
-
b) 实例：
<script type=”text/javascript”>
$(document).ready(function(){
$(“#start”).click(function(){
$(“#box”).animate({height:300},”slow”);
$(“#box”).animate({width:300},”slow”);
$(“#box”).animate({height:100},”slow”);
$(“#box”).animate({width:100},”slow”);
});
});
</script>
-
淡出效果
-
实例：
<script type=”text/javascript>
$(document).ready(function(){
$(“button”).click(function(){
$(“div”).fadeTo(“slow”,0.25);
});
});
</script>
-
slide panel(滑动面版效果)
-
实例：
<script type=”text/javascript”>
$(document).ready(function(){
$(“.flip”).click(function(){
$(“.panel”).slideToggle(“slow”);
});
});
</script>
-
隐藏部分文本
-
实例：
<script type=”text/javascript”>
$(document).ready(function(){
});
</script>
-
jQuery隐藏和显示
-
a) 隐藏：hide()
-
b) 显示：show()
-
c) 都可以设置两个参数：speed和callback
-
d) 语法：
i. $(selector).hide(speed,callback)
ii. $(selector).show(speed,callback)
-
解释：speed参数规定显示或隐藏的速度，可以设置的值：“slow”,“fast”,“normal”或毫秒。Callback参数是在hide或show函数完成之后被执行的函数名称。
-
16. jQuery切换
-
隐藏显示的内容和显示隐藏的内容语法：
i. $(selector).toggle(speed,callback)
-
实例：
i. $(“button”).click(function(){
$(“p”).toggle();
ii. });
本文转自 素颜猪 51CTO博客，原文链接:http://blog.51cto.com/suyanzhu/1561414
