HTML学习笔记（jQuery）NO.6

浏览数：23 / 时间：2015年06月09日

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