jQuery 简单归纳总结
jQuery语法是为HTML元素的选取编制的，能够对元素运行某些操作。
基础语法是：$(selector).action()
+美元符号定义 jQuery
+选择符（selector）“查询”和“查找” HTML 元素
+jQuery 的 action() 运行对元素的操作
演示样例：
$("p").hide()--隐藏全部段落
$(this).hide()--隐藏当前元素
jQuery选择器：
元素选择器：
$("p")--选取<p>元素
$("p.intro")--选取全部class=“intro”的<p>元素
$("p#intro")--选取全部id=“ontro”的<p>元素
属性选择器：
jQuery 使用 XPath 表达式来选择带有给定属性的元素。
$("[href]") 选取全部带有 href 属性的元素。
$("[href='#']") 选取全部带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取全部带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取全部 href 值以 ".jpg" 结尾的元素
CSS选择器：
$("p").css("background-color","red");
jQuery 名称冲突：
jQuery使用$符号作为jQuery的简称方式。
某些其它JavaScript库(比方Prototype)也是用相同的符号。
那么此时，jQuery使用noConflict()的方法来解决此问题。
Var jq=jQuery.noConflict(); //帮助你使用自己的名称来使用jQuery
jQuery是为事件处理专门设计的。
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
jQuery hide()和show()
语法：
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
speed隐藏动作所运行速度。它能够取值：“slow”.“fast”和毫秒值
callback隐藏后回调函数
jQuery toggle():显示被隐藏的元素，隐藏已显示的元素
jQuery效果：淡入淡出
淡入：$(selector).fadeIn(speed,callback)
淡出：$(selector).fadeOut(speed,callback)
淡入淡出切换：$(selector).fadeToggle(speed,callback)
渐变为给定不透明度：$(selector).fadeTo(speed,opacity,callback)
speed:动作运行速度。
它能够取值：“slow”.“fast”和毫秒值
opacity:參数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。
jQuery滑动效果
向下滑动：$(selector).slideDown(speed,callback);
向上滑动：$(selector).slideUp(speed,callback);
上下切换：$(selector).slideToggle(speed,callback);
可选的 speed 參数规定效果的时长。它能够取下面值："slow"、"fast" 或毫秒。
jQuery 动画 animate()
语法：$(selector).animate({params},speed,callback);
patams：必须參数,定义形成的动画css属性
speed ：可选參数,规定效果的时长。它能够取下面值："slow"、"fast" 或毫秒。
注：默认情况下。全部 HTML 元素的位置都是静态的。而且无法移动。
如需对位置
进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或
absolute。
jQuery：stop()--停止函数，动画或效果。
语法：$(selector).stop(stopAll,goToEnd);
可选的 stopAll 參数规定是否应该清除动画队列。默认是 false，
即仅停止活动的动画，同意不论什么排入队列的动画向后运行。
可选的 goToEnd 參数规定是否马上完毕当前动画。默认是 false。
Chaining能够把动作方法链接起来：
$("#p1").css("color","red")
.slideUp(2000)
.slideDown(2000);
jQuery拥有可操作HTMML元素的属性的强慷慨法。
三个简单有用的用于 DOM 操作的 jQuery 方法：
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包含 HTML 标记）
val() - 设置或返回表单字段的值
attr() - 获取链接中href属性的值
ps：括号无值为获取，有值为设置
jQuery-加入元素
append() - 在被选元素的结尾插入内容(内部)
prepend() - 在被选元素的开头插入内容(内部)
after() - 在被选元素之后插入内容(外部)
before() - 在被选元素之前插入内容(外部)
jQuery-删除元素
remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素
jQuery-获取并设置CSS类
addClass() - 向被选元素加入一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行加入/删除类的切换操作
css() - 设置或返回样式属性，可设置多个css属性。例如以下：
css({"propertyname":"value","propertyname":"value",...});
jQuery-尺寸
width() 方法设置或返回元素的宽度（不包含内边距、边框或外边距）。
height() 方法设置或返回元素的高度（不包含内边距、边框或外边距）。
innerWidth() 方法返回元素的宽度（包含内边距）。
innerHeight() 方法返回元素的高度（包含内边距）。
outerWidth() 方法返回元素的宽度（包含内边距和边框）。
outerHeight() 方法返回元素的高度（包含内边距和边框）。
jQuery-遍历
向上遍历 DOM 树
这些 jQuery 方法非常实用。它们用于向上遍历 DOM 树：
parent() 方法返回被选元素的直接父元素。
parents() 方法返回被选元素的全部祖先元素，它一路向上直到文档的根元素 (<html>)。
能够使用可选參数来过滤对祖先元素的搜索。
parentsUntil() 方法返回介于两个给定元素之间的全部祖先元素。
例:
$(document).ready(function(){
$("span").parents("ul");
});
向下遍历 DOM 树
以下是两个用于向下遍历 DOM 树的 jQuery 方法：
children()方法返回被选元素的全部直接子元素。
能够使用可选參数来过滤对子元素的搜索。
find()方法返回被选元素的后代元素，一路向下直到最后一个后代。
$(document).ready(function(){
$("div").children("p.1");
});
在 DOM 树中水平遍历
有很多实用的方法让我们在 DOM 树进行水平遍历：
siblings()方法返回被选元素的全部同胞元素。
next()方法返回被选元素的下一个同胞元素。
nextAll()方法返回被选元素的全部尾随的同胞元素。
nextUntil()方法返回介于两个给定參数之间的全部尾随的同胞元素。
prev()
prevAll()
prevUntil()
jQuery 遍历-过滤
first() 方法返回被选元素的首个元素。
$(document).ready(function(){
$("div p").first();
});
last() 方法返回被选元素的最后一个元素。
eq() 方法返回被选元素中带有指定索引號的元素。
filter() 方法同意您规定一个标准。不匹配这个标准的元素会被从集合中删除，
匹配的元素会被返回。
not() 方法返回不匹配标准的全部元素。与 filter() 相反。
jQuery - AJAX
AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。
简短地说，在不重载整个网页的情况下，AJAX 通过后台载入数据。并在网页上进行显示。
使用 AJAX 的应用程序案例：谷歌地图、腾讯微博、优酷视频、人人网等等。
jQuery - AJAX load() 方法(简单但强大的AJAX方法)，
从server载入数据，并把返回的数据放入被选的元素中。
语法： $(selector).load(URL,data,callback);
必需的 URL 參数规定您希望载入的 URL。
可选的 data 參数规定与请求一同发送的查询字符串键/值对集合。
可选的 callback 參数是 load() 方法完毕后所运行的函数名称。
实例：
$("button").click(function(){
$("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("外部内容载入成功！");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
});
jQuery $.get() 方法
$.get() 方法通过 HTTP GET 请求从server上请求数据。
语法：
$.get(URL,callback);
实例：
$(document).ready(function(){
$("button").click(function(){
$.get("/example/jquery/demo_test.asp",function(data,status){
alert("数据：" + data + "\n状态：" + status);
});
});
});
jQuery $.post() 方法
$.post() 方法通过HTTP POST 请求从server上请求数据
语法：
$post(URL,data,callback);
必需的 URL 參数规定您希望请求的 URL。
可选的 data 參数规定连同请求发送的数据。
可选的 callback 參数是请求成功后所运行的函数名。
实例：
$("button").click(function(){
$.post("demo_test_post.asp",
{
name:"Donald Duck",
city:"Duckburg"
},
function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});
jQuery 简单归纳总结的更多相关文章
- jquery 简单归纳 -- 前端知识
jquery 什么是jQuery? jquery是轻量级的JavaScript库,核心是javascript,兼容css和各种浏览器,核心理念是写得少做得多(write less do more). ...
- jQuery简单实现iframe的高度根据页面内容自适应的方法(转)
本文实例讲述了jQuery简单实现iframe的高度根据页面内容自适应的方法.分享给大家供大家参考,具体如下: 方式1: //注意:下面的代码是放在和iframe同一个页面中调用 $("#i ...
- jQuery简单的手风琴菜单
查看效果:http://keleyi.com/keleyi/phtml/menu/5.htm 本菜单的HTML代码和JS代码都简洁,完整源代码: <!DOCTYPE html PUBLIC &q ...
- jquery 简单弹出层(转)
预定义html代码:没有 所有代码通过js生成和移除. 预定义css /* 基本弹出层样式 */ .my-popup-overlay { width:100%; height:auto; /* wid ...
- JQuery简单实现锚点链接的平滑滚动
在平时的项目中,我们经常需要一些特效链接,如果使效果进一步加强,我们可以使点击锚点链接平滑滚动到锚点,下面就来给大家讲解下如何使用jQuery来实现. 一般使用锚点来跳转到页面指定位置的时候,会生 ...
- 基于Jquery 简单实用的弹出提示框
基于Jquery 简单实用的弹出提示框 引言: 原生的 alert 样子看起来很粗暴,网上也有一大堆相关的插件,但是基本上都是大而全,仅仅几句话可以实现的东西,可能要引入好几十k的文件,所以话了点时间 ...
- jquery简单封装
对Raphael画图标的一个jquery简单封装 公司要做一个项目的demo,要求地图上可以插红旗,所以就用到了Raphael. 因为是个demo,所以地图就用了一张图片,效果如下: 所以为了更好的封 ...
- Tomcat的简单归纳总结
2017年08月09日 12:39:23 大道之简 阅读数:1072 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/HcJsJqJSSM/ar ...
- Jquery简单的placeholder效果
Jquery简单的placeholder效果 由于IE6-IE9不支持HTML5中的placeholder,所以自己依赖于Jquery简单的写了一个,供参考! 先看看效果吧!如下JSFiddle地址 ...
随机推荐
- shell编程的一些例子4
bash支持一维数组 1.数组定义: name= (value1,value2...valueN) value形如[[subscript]=]string [subscript]= 是可选项 如果没 ...
- 普及下Oracle hints语法
普及下Oracle hints的语法:{DELETE|INSERT|SELECT|UPDATE} /*+ hint [text] [hint[text]]... */ 1.hint只能出现在诸如sel ...
- share my tools With Xcode
1.让Xcode的控制台支持LLDB类型的打印 在Xcode断点调试的时候, 在控制台输入 po self.view.frame 或者 po id 类型的时候就死翘翘了. 进入正题: 安装LLDB调试 ...
- VPS用LNMP安装WordPress
前言 前几天,朋友手头上有一个空闲的vps,256M内存,我决定拿来玩一下.经过一番思考,还是用来挂站吧.然后看是CentOS6系统,果断决定用从来没玩过的LNMP.于是,百度.谷歌找教程,好多教程都 ...
- Dom学习笔记-（一）
一.概述 DOM(文档对象模型)是针对HTML和XML文档的一个API,其脱胎于DHTML. DOM可以将任意HTML和XML文档描绘成一个由多层节点构成的结构. 每一个文档包含一个根节点-文档节点, ...
- 10 个 jQuery 的无限滚动的插件：
很多社交网站都使用了一些新技术来提高用户体验,而无限滚动的翻页技术就是其中一项,当你页面滑到列表底部时候无需点击就自动加载更多的内容. 下面为你推荐 10 个 jQuery 的无限滚动的插件: 1. ...
- Spring 自动装配
1.自动装配有 bytype 和byName两种模式. 2.可以使用autowire属性指定自动装配的方式,byName根据bean的名称和当前bean的setter风格属性进行自动装配:byType ...
- [转贴]Linq之动态查询
最近写Linq碰到一个问题, 就是如果要写一个查询系统,这个系统里面有很多TextBox可以填, 然后捞出符合各个字段的数据. 在SQL查询的时候还满方便的,用字符串连连连就可以了, ( 也就是sql ...
- Service知识点总结
转载请注明出处:http://blog.csdn.net/krislight/article Service可以看作一个后台服务,但并非是开启另外的线程,Service还是在主线程中运行.所以需避免耗 ...
- 推荐一个Xcode插件: KSImageNamed (自动补全图片文件名称, 并显示图片大小)
http://www.csdn.net/article/2014-05-04/2819586-the-best-xcode-plugins 5. KSImageNamed KSImageNamed是一 ...