HTML学习笔记(jQuery)NO.6

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();
    });
});


郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。