jQuery基础morra

jQuery是一个JavaScript库,用于简化Javascript的开发。适合HTML元素选取与操作、CSS操作、HTML事件操作、JS特效和动画、DOM遍历和修改、AJAX、Utilities等等。

jquery-3.1.0.js//未压缩版,代码易读,适合开发环境下使用jquery-3.1.0.min.js//压缩版,访问速度快,代码可读性差。适合在生产环境下使用jquery-3.1.0.slim.js//精简版,去掉了ajax的功能,如果你不需要用到ajax或者使用了独立的第三方ajax库,就可以用这个jquery-3.1.0.slim.min.js//精简压缩版,只是对精简版的代码进行了压缩1.2获取jQuery1.下载到本地

2.CDN加速(推荐)

jQuery的核心是jQuery()函数,但一般都写成$(),也可以理解为$即jQuery。$()可以完成如下操作:

/*jQuery使用```$```符号作为jQuery的简介方式,但是某些其他JavaScript库中的函数(比如Prototype)同样使用```$```符号。为防止两者发生冲突,可以使用noConflict()的方法来解决该问题。*///在jQuery中使用自定义的名称代替$符号varjq=jQuery.noConflict();2.1.2ready()当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数,因为它可以极大地提高web应用程序的响应速度。

简单地说,这个方法纯粹是对向window.load事件注册事件的替代方法。通过使用这个方法,可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数,而99.99%的JavaScript函数都需要在那一刻执行。

在DOM加载完成时运行的代码,可以这样写:

$(document).ready(function(){//在这里写你的代码...});简写:

$(function($){//可以在这里继续使用$作为别名...});2.2选择器查找DOM中元素的方式:CSS选择器。

注意:使用$()获取的结果是个元素数组,而不是某一个元素。

创建一个超链接,使用append()方法

$("#test").remove();删除某个元素的所有子节点,使用empty()方法

$(document.body).empty();2.3.3隐藏元素隐藏元素使用hide()方法

//隐藏所有

元素$("p").hide();//隐藏所有class="test"的元素$(".test").hide();2.4样式修改样式要使用jQuery对象中的css()方法

//修改单个样式$("#testdiv").css("color","red");//修改多个样式$("#testdiv").css({color:"red",backgroundColor:"yellow"});2.4.1修改CSS类修改CSS类分别使用addClass()与removeClass()方法

blablabla

2.4.2切换CSS类切换CSS类需要使用。如果指定的类存在,则删除之。如果不存在,则添加之。

$("#test_id").toggleClass("class1");用jQuery对象封装普通的DOM对象,以此得到的jQuery对象叫做封装器对象。封装器对象一般用于改进另一个对象的功能。以下代码表示,用jQuery对象封装元素对象,以使用toggleClass()切换"class1"类。

vartarget=$(e.target());if(e.type=="mouseover"||e.type=="mouseout"){target.toggleClass("class1");}2.4.3检查CSS类检查CSS类是否应用于某元素,使用hasClass()方法

$("#test_id").hasClass("class1");2.5属性2.5.1attr()attr()为指定元素指定属性,可用于所有属性

//为所有图像设置src和alt属性$("img").attr({src:"test.jpg",alt:"TestImage"});//为所有图像设置src属性$("img").attr("src","test.jpg");//把src属性的值设置为title属性的值$("img").attr("title",function(){returnthis.src});2.5.2removeAttr()//删除指定属性$("img").removeAttr("src");2.5.3prop()与attr不同,prop()专门用于checked属性

//获取复选框中checked的属性值。选中复选框为true,没选中为false。$(":checkbox").prop("checked");//禁用页面上的所有复选框$("input[type='checkbox']").prop({disabled:true});禁用和选中所有页面上的复选框。$("input[type='checkbox']").prop("disabled",false);$("input[type='checkbox']").prop("checked",true);通过函数来设置所有页面上的复选框被选中$("input[type='checkbox']").prop("checked",function(i,val){return!val;});全选,反选,取消的功能实现:

!!!!!!12312322

3.1设置监听器所有的jQuery对象都有on()方法,用于监听事件。

functionelementClick(e){alert("Youclickedme!");}$(".class1").on("click",elementClick);监听多个事件:

functionclickHandler(e){alert("Youclickedme!");}functiondblclickHandler(e){alert("Youdouble-clickedme!");}$(".class1").on({click:clickHandler,dblclick:dblclickHandler()});3.2删除监听器删除监听器:

$(".class1").off("click",elementClick);$(".class1").off({click:clickHandler,dblclick:dblclickHandler()});删除所所选元素的所有监听器

$("#test").off();4jQuery下的AjaxjQuery提供多个与AJAX有关的方法。通过这些方法能够使用HTTPGet和HTTPPost从远程服务器上请求文本、HTML、XML或JSON。同时能够把这些外部数据直接载入网页的被选元素中。

load()方法从服务器加载数据,并把返回的数据放入被选元素中。

$(selector).load(URL,data,callback);//URL(必选):必需的URL参数规定您希望加载的URL。//data:规定与请求一同发送的查询字符串键/值对集合。//callback:参数是load()方法完成后所执行的函数名称。*******点击,获取所请求文件的内容4.2get()GET:从指定的资源请求数据,用于从服务器获得(取回)数据,GET方法可能返回缓存数据。

$.get(URL,callback);//URL(必选):要请求的URL//callback:请求成功后所执行的回调函数。4.3post()POST:向指定的资源提交要处理的数据,也可以用于从服务器获取数据。不过,POST方法不会缓存数据,并且常用于连同请求一起发送数据。

$.post(URL,data,callback);//URL(必选):要请求的URL//data:规定连同请求发送的数据。//callback:请求成功后所执行的回调函数。4.4ajax()本地请求

跨域请求

循环所有数据,取出每一个数据的内容。类似于python中的for循环。数组

a=[11,22,33,44];$.each(a,function(index){console.log(a[index]);})字典

varb={"a":1,"b":2};$.each(b,function(k,v){console.log(k,v)})5.2map()将一组元素转换成其他数组(不论是否是元素数组,可以用这个函数来建立一个列表,不论是值、属性还是CSS样式,或者其他特别形式。这都可以用'$.map()'来方便的建立。

HTML代码:

$("p").append($("input").map(function(){return$(this).val();}).get().join(","));结果:

//extends.js$.extend({"morra":function(){return123;}})但是一般建议使用把插件方法封装在自执行函数中,extends.js加载的时候函数就会自动执行,不需要额外调用,写法如下:

THE END
1.jQuery教程jQuery 是一个“写的更少,但做的更多”的轻量级 JavaScript 库。 基本上,您将学习到如何选取 HTML 元素,以及如何对它们执行类似隐藏、移动以及操作其内容等任务。 您需要具备的基础知识 在您开始学习 jQuery 之前,您应该对以下知识有基本的了解: HTML https://www.w3school.com.cn/jquery/index.asp
2.JQjQuery基础jquery环境搭建JQ---jQuery基础 一.jQuery简介 1.什么是jQuery jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。 二.jQuery的使用 1.搭建jQuery环境 去jquery官网下载jQuery.js文件,然后引入到项目中。(以下步骤)https://blog.csdn.net/weixin_73054157/article/details/135260893
3.jQuery入门第1关jQuery基础 正在挑战0人次完成挑战38人次可获经验100点 第2关jQuery基本选择器 正在挑战2人次完成挑战36人次可获经验300点 第3关过滤选择器(一) 正在挑战0人次完成挑战36人次可获经验100点 第4关过滤选择器(二) 正在挑战0人次完成挑战36人次可获经验100点 第5关tab选项卡 正在挑战0人次完成挑战36人次可获https://www.educoder.net/shixuns/4ncsmfyk/challenges
4.JQuery基础入门教程JQuery教程之《JQuery 基础入门教程》是php中文网为大家提供的jQuery基础课程,将详细向大家介绍jQuery的基础知识知识包括jQuery选择器,jQuery的语法 ,jQuery节点操作,jQuery事件处理等 课程目录 相关文章 课件下载 5小时学习时长 原创教程:独孤九剑系列 立即查看 第1章 jQuery 简介 1 jquery 简介 2 jquery 的安装 3 https://www.php.cn/course/20.html
5.jQuery基础教程(第4版)(豆瓣)图灵程序设计丛书·Web开发系列(共173册), 这套丛书还有 《HTML5与WebGL编程》《JavaScript实战》《jQuery基础教程》《PHP高级程序设计》《深入浅出CoffeeScript》 等。 喜欢读"jQuery基础教程 (第4版)"的人也喜欢的电子书· ··· 支持Web、iPhone、iPad、Android 阅读器 高性能https://book.douban.com/subject/25733582/
6.jQuery教程菜鸟教程jQuery 实例 在本教程中,您将通过教程以及许多在线实例,学到如何通过使用 jQuery 应用 JavaScript 效果。 jQuery 在线实例 jQuery 测验 在菜鸟教程上测试你的 jQuery 技能! jQuery 测验 jQuery 参考手册 在本教程中,你将学习到更多的jquery的使用方法。 https://www.runoob.com/jquery/jquery-tutorial.html
7.jQueryjQuery: The Write Less, Do More, JavaScript Libraryhttps://jquery.com/
8.jQuery简介菜鸟教程jQuery 库可以通过一行简单的标记被添加到网页中。 您需要具备的基础知识 在您开始学习 jQuery 之前,您应该对以下知识有基本的了解: HTML CSS JavaScript 如果您需要首先学习这些科目,请在我们的首页查找这些教程。 什么是 jQuery ? jQuery是一个JavaScript函数库。 http://www.it028.com/jquery-intro.html
9.大数据技术专业人才培养方案2021级3.专业拓展课:分方向设置,工业大数据分析方向包括计算机网络基础、网页脚本技术(JavaScript+jQuery)、移动Web开发、Power BI数据分析、多媒体技术应用、Python数据分析与应用等课程;大数据可视化方向包括计算机网络基础、微信小程序开发、移动Web开发、前端框架技术、多媒体技术应用、大数据可视化开发实战等课程。 (三)综合实践https://jwc.qzct.net/2021/1208/c2439a41988/page.htm