Javascript随笔2（JQuery）
1.jQuery 语法
Tips：
通过 CDN（内容分发网络）引用JQuery：（link的引用最好放在script的引用之前）
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="Tab.js"></script>获取CDN网址：http://cdn.code.baidu.com/
jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。
基础语法是：$(selector).action()
- 美元符号定义 jQuery
- 选择符（selector）“查询”和“查找” HTML 元素
- jQuery 的 action() 执行对元素的操作
$(document).ready(function()中的ready是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。
2.jQuery 选择器
- 元素选择器
$("p") 选取 <p> 元素。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。
- 属性选择器
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
- CSS选择器
把所有 p 元素的背景颜色更改为红色
$("p").css("background-color","red");
3.jQuery 事件方法
$(document).ready(function) 将函数绑定到文档的就绪事件（当文档完成加载时） $(selector).click(function) 触发或将函数绑定到被选元素的点击事件 $(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件 $(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件 $(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件
JQuery事件完整版请看：http://www.w3school.com.cn/jquery/jquery_ref_events.asp
4.jQuery动画效果
- 隐藏/显示
方法：hide，show
语法：（speed表示显示/隐藏速度，其值可以为：“fast”，“slow”或者毫秒，callback表示执行完后运行的函数）
$(selector).hide(speed,callback)；
$(selector).show(speed,callback);
- 淡入淡出
方法：fadeIn()【淡入】，fadeOut()【淡出】，fadeToggle()【淡入淡出交互】，fadeTo()【允许给透明度opacity】
语法：$(selector).fadeIn(speed,callback);（前三个方法类同）
$(selector).fadeTo(speed,opacity,callback);
- 滑动
方法：slideDown()【下滑】，slideUp()【上滑】，slideToggle()【上下交互滑动】
语法：$(selector).slideDown(speed,callback);（其他方法类似）
- 动画
tips：默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，得先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。
方法：animate()
语法：$(selector).animate({params},speed,callback);（params用于设置动画的CSS属性，CSS使用相对值时可用"+="或"-="）
- 动画STOP
方法：stop（）
语法：$(selector).stop(stopAll,goToEnd);（stopAll参数规定是否应该清除动画队列，默认是false；goToEnd参数规定是否立即完成当前动画，默认是false）
- JQuery方法链接
例：$("#p1").css("color","red").slideUp(2000).slideDown(2000);
该方法的效果是："p1" 元素首先会变为红色，然后向上滑动，然后向下滑动
5.jQuery - 获得内容和属性
获得内容 - text()、html() 以及 val()：
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容（包括 HTML 标记）
- val() - 设置或返回表单字段的值
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});获取标签属性 - attr()
获取：
$("button").click(function(){
alert($("#w3s").attr("href"));
});设置（单属性设置和多属性设置）：
$("button").click(function(){
$("#w3s").attr("href","http://www.w3school.com.cn/jquery");
}); $("button").click(function(){
$("#w3s").attr({
"href" : "http://www.w3school.com.cn/jquery",
"title" : "W3School jQuery Tutorial"
});
});
6.jQuery - 添加/删除元素
添加HTML内容方法：append()【后添加】，prepend()【前添加】，after()【选定元素后添加】，before()【选定元素前添加】
function afterText()
{
var txt1="<b>I </b>"; // 以 HTML 创建新元素
var txt2=$("<i></i>").text("love "); // 通过 jQuery 创建新元素
var txt3=document.createElement("big"); // 通过 DOM 创建新元素
txt3.innerHTML="jQuery!";
$("img").after(txt1,txt2,txt3); // 在 img 之后插入新元素
$("p").append(txt1,txt2,txt3); // 追加新元素 }删除HTML元素方法：remove()，empty()
$("#div1").remove(); //删除被选元素及其子元素 $("p").remove(".italic"); //删除类为“italic”的所有p元素$("#div1").empty(); //删除被选元素的子元素
7.jQuery - 获取并设置 CSS 类
操作CSS的方法：
- addClass() - 向被选元素添加一个或多个类
- removeClass() - 从被选元素删除一个或多个类
- toggleClass() - 对被选元素进行添加/删除类的切换操作
- css() - 设置或返回样式属性
外部：
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("h1,h2,p").toggleClass("blue");
});
});
</script>
<style type="text/css">
.blue
{
color:blue;
}
</style>
</head>
<body> <h1>标题 1</h1>
<h2>标题 2</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>切换 CSS 类</button>
</body>
</html>内部：
//设置单个属性
$("p").css("background-color","yellow"); //设置多个属性
css({"propertyname":"value","propertyname":"value",...});
8.jQuery - 尺寸
处理尺寸的方法：
- width()：设置或返回元素的宽度（不包括内边距、边框或外边距）。
- height()：设置或返回元素的高度（不包括内边距、边框或外边距）。
- innerWidth()：返回元素的宽度（包括内边距）。
- innerHeight()：返回元素的高度（包括内边距）。
- outerWidth()：返回元素的宽度（包括内边距和边框）。
- outerHeight()：返回元素的高度（包括内边距和边框）。
- outerWidth(true) 返回元素的宽度（包括内边距、边框和外边距）。
- outerHeight(true) 返回元素的高度（包括内边距、边框和外边距）。
$("button").click(function(){
var txt="";
txt+="Outer width (+margin): " + $("#div1").outerWidth(true) + "</br>";
txt+="Outer height (+margin): " + $("#div1").outerHeight(true);
$("#div1").html(txt);
});Tips：
$(document).height()和$(window).height() 可以获得文档和窗口的尺寸
9.jQuery 遍历
遍历的方法：
- parent()：返回被选元素的直接父元素。
- parents()：返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。（可过滤）
- parentsUntil()：返回介于 <span> 与 <div> 元素之间的所有祖先元素：
$(document).ready(function(){
$("span").parentsUntil("div");
});
- children()：返回被选元素的所有直接子元素，只会向下一级对 DOM 树进行遍历。
- find()：返回被选元素的后代元素，一路向下直到最后一个后代。
//下面例子返回属于 <div> 后代的所有 <span> 元素：
$(document).ready(function(){
$("div").find("span");
}); //下面的例子返回 <div> 的所有后代：
$(document).ready(function(){
$("div").find("*");
});
- siblings()：返回被选元素的所有同胞元素。
- next()：返回被选元素的下一个同胞元素。
- nextAll()：返回被选元素的所有跟随的同胞元素。
- nextUntil()：返回介于两个给定参数之间的所有跟随的同胞元素。
- prev()【以下三个与上面类似，遍历方向向上】
- prevAll()
- prevUntil()
- eq()：返回被选元素中带有指定索引号的元素。
- filter(".intro")：方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
- not(".intro")：返回不匹配标准的所有元素。
Javascript随笔2（JQuery）的更多相关文章
- 编写Javascript类库（jQuery版
编写Javascript类库(jQuery版) - 进阶者系列 - 学习者系列文章 Posted on 2014-11-13 09:29 lzhdim 阅读(653) 评论(1) 编辑 收藏 本系列文 ...
- 在JavaScript中重写jQuery对象的方法
jQuery是一个很好的类库,它给我们解决了很多的客户端编程,任何东西都不是万能的,当它不能满足我们的需求时我们需要对它进行重写,同时也不要影响其原有的功能或者修改其原有的功能:我现在的web应用程序 ...
- JavaScript强化教程——jQuery AJAX 实例
什么是 AJAX?AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML).简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据 ...
- JavaScript强化教程——jQuery UI API 类别
---恢复内容开始--- 主要介绍:JavaScript强化教程—— jQuery UI API 类别 jQuery UI 在jQuery 内置的特效上添加了一些功能.jQuery UI 支持颜色动 ...
- 原生 JavaScript 代码和Jquery实现对比
下面就带大家一起看看在 IE 浏览器环境中如果使用原生 JavaScript 代码实现 jQuery 中的功能.如果你打算自己开发一个小的基础框架,可以好好参考一下这些代码的实现. 本文转载:http ...
- Javascript Fromdata 与jQuery 实现Ajax文件上传以及文件的删除
前端HTML代码: <!DOCTYPE html> <html> <head> <title>ajax</title> <script ...
- Javascript Fromdata 与jQuery 实现Ajax文件上传
<!DOCTYPE html> <html> <head> <title>ajax</title> <script type=&quo ...
- 转载 javascript中(function($){...})(jQuery)写法是什么意思
javascript中(function($){...})(jQuery)写法是什么意思 这里实际上是匿名函数function(arg){...}这就定义了一个匿名函数,参数为arg 而调用函数 ...
- JavaScript ,Css and Jquery In OpenERP 7.0
From: http://openerpbay.blogspot.jp/2013/02/javascript-css-and-jquery-in-openerp-70.html Hi fellows, ...
- JavaScript进阶内容——jQuery
JavaScript进阶内容--jQuery 我们在前面的文章中已经掌握了JavaScript的全部内容,现在让我们了解一下JavaScript库 这篇文章主要是为了为大家大致讲解JavaScript ...
随机推荐
- 【Android Developers Training】 28. 将用户带领到另一个应用
注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...
- JS常用方法（获取Class、获取元素样式、事件监听、cookie、ajax等）
var Util = {}; Util.byClass = function (oClass) {//全局获取 var tags = document.all ? document.all : doc ...
- Vim练级笔记(持续更新)
漫漫练级路...作为一个VS重度依赖患者,又加上visual assist X 这种懒人必备的神级插件,转投vim门下,真是各种疼... vim用着用着就有拿鼠标去点的冲动,有木有啊! 不过经过一段时 ...
- H3CNE实验：通过Console端口本地访问H3C设备
连接好Console线后,将交换机开机,在SecureCRT上会显示如下信息: Starting...... RAMLine.....OK System is booting............. ...
- 投票系统 & js脚本简单刷票
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- HTML RGB 颜色表 16进制表 颜色对应表
HTML RGB 颜色表 16进制表 颜色对应表 16 常用颜色表(颜色 + RGB + 名字): Color Value Name Color Value Name #00FFFF aqu ...
- JAVA中Socket的用法模拟服务端和客户端
<看透springMvc源代码分析与实践>学习笔记 Socket分为ServerSocket和Socket两个大类 ServerSocket用于服务端,可以通过accept方法监听请求,监 ...
- 基于封装通用的EF CRUD 的操作
1. Entity Framework是Microsoft的ORM框架,随着 Entity Framework 不断的完善强化已经到达了EF 6.0+ 还是非常的完善的,目前使用的比例相对于其他OR ...
- C# Web.config配置
使用 <!--M002 バッチを起動のPath配置--> <add key="BM0002_START_PATH" value="D:\BM0002\B ...
- 求n个逆元的O(n)算法
它的推导过程如下,设,那么 对上式两边同时除,进一步得到 再把和替换掉,最终得到 初始化,这样就可以通过递推法求出模奇素数的所有逆元了. 转自 http://blog.csdn.net/acdrea ...