标签：jquery web应用 html
jQuery库可以通过一行简单的标记被添加到网页中它是一个JavaScript函数库，封装了浏览器兼容性的问题
该库所包含的功能
HTML元素选取
HTML元素操作
CSS操作
HTML事件函数
JavaScript特效和动画
HTML DOM遍历和修改
AJAX->在不刷新页面的同时来修改页面的内容,将服务器请求的事件直接反应到页面上，提高用户体验
Utilties工具
网页添加jQuery
1）从jQuery.com下载jQuery库
2）从CDN中载入jQuery，如从google中加载jQuery
版本->
v.1.11.1: 1.x支持IE6+
v.2.1.1 : .x支持IE9+
jQuery语法
基础语法：$(selector).action()
美元符号定义jQuery
选择符(selector)“查询”和“查询”HTML元素
jQuery的action()执行对元素的操作
例如：$(this).hide()-隐藏当前元素
在网页开发过程中由于js不同的库文件有相互的依赖关系，因此在开发过程中应该考虑到每个库的引入顺序，如果顺序弄错则可能无法显示网页或者报错。
jQuery选择器，常用的选择器有id、class、直接元素选择，三种常用改的方法，其使用的方式与css的选择器一样，如id用#，class用.的这种方式来进行引入和修改样式，不同的是jQuery需要使用$来进行操作。
jQuery事件
常用事件方法、绑定事件、解除绑定事件、事件的目标、事件的冒泡和自定义事件。
事件举例->
onclick单击事件
dbclick双击事件
mouseenter鼠标指向事件
mouseleave鼠标移开事件
方法bind()和unbind()方法是进行绑定和解除绑定事件的相关函数，绑定事件的好处是可以对一个事件进行多个反应，而且同时触发对于绑定和解除绑定也可以使用on()和off()的方式,这种方式必须在jQuery1.7后的版本才可以使用$("ID/CLASS").on("事件名称"，自定义函数名称)；
自定义事件的使用
$(document).ready(function(){
$("#click").click(function(){
//创建自己的事件
var e = jQuery.Event("MyEvent");
//将自己的事件触发指向id所标记的元素
$("#click").trigger(e);
});
//对事件进行绑定
$("#click").bind("MyEvent",function(evnent){
console.log(event);
})
});
jQuery的效果：隐藏/显示，淡入淡出，滑动，动画，停止动画，Callback，Chaining
隐藏/显示：hide/show
淡入淡出：fadeIn/fadeOut ->fadeToggle
透明度效果变换：fadeTo（执行事件的时间，淡化到的百分度0~1）；
滑动效果：slideDown（时间ms级）;slideUp(时间ms级);slideToggle();
获取HTML的内容：
text()
html()
val（）获取值属性
attr（“对应属性的名称如id”）
通过jQuery设置HTML的属性
修改内容$("id").text("想要修正的内容")；
使用html也可以进行修改，好处是可以添加新的标签元素
方法回调是通过函数来进行的：
如
$("btn").click(function(){
$("元素id").text(function(o,n){
return "xinde"+n+"jiude"+o;
})
})
插入内容
append（指定元素之后插入，无换行）
prepend（指定元素之后插入，无换行）
before（指定元素前面插入，有换行）
after（指定元素后面插入，有换行）
添加的时候也可以添加标签的等属性
常用删除的方法为remove和empty，区别是remove将整体的框架标签全部删除，而empty只是将标签中的内容清除
jQuery的CSS操作直接通过.css（“属性名称如width”，“参数更改如100px”）；来进行修改，也可以可以通过规定的格式一次可以修改多个参数如：
.css（{width:"100px",height:"20px",backgroundColor:"red"});
修改类型也可以通过addClass方法和css文件来联合使用如在css文件中有一个style类的样式，那么通过js中的addClass("style");进行填充。
jQuery的遍历、过滤
遍历->向上遍历、向下遍历和同级遍历
向下遍历children指定元素的子元素（只向下遍历一级）、find（指定的ID或者元素或者class）可以指定特定元素来进行遍历
向上遍历parent只能向上遍历一级，parents所有的父级容器都改变，parentUntil可以指定到特定的容器内进行内容更改格式为：parent（“指定id等”）
同级之间的遍历sibings同级元素全部修改，next，nextall，nextUntil，prev，prevAll，preUntil其余的跟向上和向下遍历相同
过滤->filter（“指定元素”）指定元素来修改，first（）同级元素中的第一个，last是最后一个，eq（指定同级中的编号0~N）表示同级元素中的第几个，not（“指定元素”）不是指定元素的进行更改。
jQuery的AJAX更多的操作可以浏览jQuery的API 传送门 jQuery官方文档
$(document).ready(function(){
$("#btn").on("click",function(){
$("#result").text("请求数据中，请稍后....");
$.get("server.php",{name:$("#namevalue").val()},function(data){
$("#result").text(data);
}).error(function(){
$("#result").text("通信有问题");
}) ;
});
});
$(document).ready(function(){
$("body").text("wait...");
$("body").load("box.htm",function(a,status,complete){
console.log(status);
if(status == "error"){
$("body").text("片段加载失败");
}
});
$.getScript("hello.js").complete(function(){
sayHello();
});
});
HTML学习笔记（jQuery）NO.6
标签：jquery web应用 html
原文地址：http://blog.csdn.net/zs2538596/article/details/44042695
