JQ入门(至回调函数)

最新推荐文章于 2023-04-13 20:18:46 发布

weixin_33704591

最新推荐文章于 2023-04-13 20:18:46 发布

阅读量376

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/srk-bky/p/10003475.html

版权

JQ是js函数库

HTML 元素选取
HTML 事件函数
HTML 元素操作
HTML DOM 遍历和修改
AJAX
JS 特效和动画
CSS 操作
Utilities

实例：
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">Click me</button>
</body>
</html>

JQ安装
下载 jQuery 库，使用 HTML 的 <script> 标签引用它
<head>
　　<script src="jquery.js" type="text/javascript" ></script>
</head>
使用 Google 的 CDN
<head>
　　<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
</head>

使用 Microsoft 的 CDN
<head>
　　<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>
</head>

JQ语法

jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。

基础语法是：$(selector).action()

美元符号定义 jQuery
选择符（selector）“查询”和“查找” HTML 元素
jQuery 的 action() 执行对元素的操作

JQ选择器

jQuery 元素选择器和属性选择器允许您通过标签名、属性名或内容对 HTML 元素进行选择。
选择器允许您对 HTML 元素组或单个元素进行操作。

。。。jQuery 元素选择器
$(this).hide()
演示 jQuery hide() 函数，隐藏当前的 HTML 元素。
$("p").hide()
演示 jQuery hide() 函数，隐藏所有 <p> 元素。(标签名)
$("#test").hide()
演示 jQuery hide() 函数，隐藏 id="test" 的元素。（id）
$(".test").hide()
演示 jQuery hide() 函数，隐藏所有 class="test" 的元素。（类名）

$("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");

实例中的所有 jQuery 函数位于一个 document ready 函数中：
$(document).ready(function(){
--- jQuery functions go here ----
});
这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。

jQuery 事件函数

事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。

常用方法
$(document).ready(function(){}) 将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function(){}) 触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function(){}) 触发或将函数绑定到被选元素的双击事件
$(selector).focus(function(){}) 触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function(){}) 触发或将函数绑定到被选元素的鼠标悬停事件

JQuery 元素操作（操作DOM）

jQuery 拥有可操作 HTML 元素和属性的强大方法

获取/设置内容 - text()、html() 以及 val()
text() - 设置或返回所选元素的文本内容
获取：
alert("Text: " + $("p.test").text());
设置：
$("p.test").text("Hello World!");
html() - 设置或返回所选元素的内容（包括 HTML 标记）
获取：
alert("Html: " + $("p.test").html());
设置：
$("p.test").html("<b>Hello World!</b>");
val() - 设置或返回表单字段的值
获取：
alert("获取输入框的值：" + $("input.test").val());
设置：
$("input.test").val("Hello World!");
attr() - 获取属性值
获取：
alert("链接地址是：" + $("a.test").attr("href"));
设置：
$("a.test").attr("href","http://www.baidu.com");
设置多个属性
$("a.test").attr({
"href":"http://www.baidu.com"，
"id":"test2"
});
提示：
设置单个属性时，属性和值之间是用逗号隔开；
设置多个属性时，属性和值之间是用分号隔开，属性之间用逗号隔开。

text()、html()、 val()及attr() 的回调函数
回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。
text()、html()及val()的回调函数的写法：
$("p.test").text(function(i,origText){
return "原始值：" + origText + "新值是return后面的所有文字(index:" + i + ")";
});
提示：text()、html()及val()使用回调函数后，text()的括号中不需要输入新值，而是在回调函数中使用return返回新值；
attr()的回调函数的写法：
$("a.test").attr("href",function(i,origText){
return origText + "/index.asp";
});
提示：attr()使用回调函数后，attr()的括号中需要填写属性及回调函数，在回调函数中的return返回新的属性值；

jQuery 特效、动画（CSS样式设置）

隐藏、显示、切换，滑动，淡入淡出，以及动画

。。。隐藏和显示
$(selector).hide(speed,callback); 隐藏
$(selector).show(speed,callback); 显示
$(selector).toggle(speed,callback); 隐藏/显示切换
可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称

。。。淡入、淡出
$(selector).fadeIn(speed,callback); 淡入
$(selector).fadeOut(speed,callback); 淡出
$(selector).fadeToggle(speed,callback); 淡入/淡出切换
$(selector).fadeTo(speed,opacity,callback);允许渐变为给定的不透明度（值介于 0 与 1 之间）

。。。滑动
$(selector).slideDown(speed,callback); 向下滑动
$(selector).slideUp(speed,callback); 向上滑动
$(selector).slideToggle(speed,callback); 向上/向下切换滑动
向下滑动（我的理解）：先设置一个div的display：none;然后在JQ中添加向下滑动效果，在触发滑动事件时，div的display由none成block，同时div的高度逐渐变为设置的高度

。。。动画
$(selector).animate({params},speed,callback); 创建自定义动画
必需的 params 参数定义形成动画的 CSS 属性。
。可操作多个属性（必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left）
$(selector).animate({left:'250px',height:'250px'});
。可使用相对值（需要在值的前面加上 += 或 -=：）
$(selector).animate({left:'+=150px'});
。可使用预定义值(可以把属性的动画值设置为 "show"、"hide" 或 "toggle"：)
$(selector).animate({heigth:'toggle'});
。可使用队列功能(逐一运行)
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
提示：默认地，所有 HTML 元素都有一个静态位置，且无法移动。
如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！

。。。停止动画
$(selector).stop(stopAll,goToEnd);
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
因此，默认地，stop() 会清除在被选元素上指定的当前动画。

。。。Callback 函数（动画完成后执行的函数）
$(document).ready(function(){
$(".nav").click(function(){
$("p").hide(1000,function(){
alert('动画圆满完成');
})
});
});

。。。Chaining允许我们在一条语句上加上多个方法（在同一元素上）
$("#p1").css("color","red")
.slideUp(2000)
.slideDown(2000);
提示：当进行链接时，代码行会变得很差。不过，jQuery 在语法上不是很严格；您可以按照希望的格式来写，包含折行和缩进。

转载于:https://www.cnblogs.com/srk-bky/p/10003475.html

weixin_33704591

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JQ入门(至回调函数)

JQ是js函数库HTML 元素选取HTML 事件函数HTML 元素操作HTML DOM 遍历和修改AJAXJS 特效和动画CSS 操作Utilities实例： <html> <head> <script type="text/javascript" src="jquery.js"></script...
复制链接

扫一扫