jQuery基础学习(一)—jQuery初识】的更多相关文章

默认情况下,jQuery用$作为自身的快捷方式. jQuery库在其他库之后导入 在其他库和jQuery库都被加载完毕后,可以在任何时候调用jQuery.noConflict()函数来将变量$的控制权移交给其他JavaScript库. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd…
一.jQuery概述 1.jQuery的优点      jQuery是一个优秀的JavaScript库,极大地简化了遍历HTML文档.操作DOM.处理事件.执行动画和开发Ajax的操作.它有以下几点优势.      (1)轻量级.      (2)强大的选择器.      (3)出色的DOM封装.      (4)可靠的事件处理机制.      (5)完善的Ajax.   2.jQuery类库说明      jQuery的库分为两种,分别是生产版和开发版.区别如下: 名称 大小 说明 jquer…
一.jQuery基本选择器 1.CSS选择器     在学习jQuery选择器之前,先介绍一下之前学过的CSS选择器. 选择器 语法 描述 示例   标签选择器 E {                 CSS规则   }   以文档元素为选择符   ID选择器 #ID{                  CSS规则 }   以ID为选择符   类选择器 E.className{                 CSS规则 }   以文档元素的Class为选择符   群组选择器 E1,E2{   …
使用jQuery选择器不仅比使用传统的getElementById()和getElementsByTagName()函数简洁得多,而且还能避免某些错误. <script type="text/javascript"> </script> 如果网页中没有id为“tt”的元素,浏览器就会报错. <script type="text/javascript"> if(document.getElementById("tt&quo…
一.查找节点      查找属性节点: 通过jQuery的选择器来完成.      操作属性节点: 调用jQuery对象的attr()来获取它的属性值.      操作文本节点: 通过text()方法. //1.操作文本节点:通过jQuery的text()方法 alert($("#bj").text()); $("#bj").text("南京"); alert($("#bj").text()); //2.操作属性节点 //注:…
JQuery基础学习总结 简单总结下JQuery: 一:事件 1.change事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="../js/jquery-3.0.0.…
作为一个从来没有认真学过jQuery的菜来讲,我所学的都是jQuery基础. 算是让自己从0开始系统学一遍吧.学习书籍为:<锋利的jQuery>. 虽然是个序,表示一下我是个菜,但还是来几个jQuery最基本的点吧. $是jQuery的简写形式,$("#divId")和jQuery("#divId")是一样的效果.其实看到这个,学过JS的人都应该很清楚了,jQuery就是个函数对象,有个别名叫$ <html> <head> <…
这章主要是将如何将jQuery应用到网站中,或者说其实就是一些前端知识,对于我这种后端程序来说其实还是蛮有用的. 关于网站结构 文件结构 前端文件分三个文件夹放 images文件夹用来存放将要用到的图片 styles文件夹用来存放css样式表 scripts文件夹用来存放js脚本 网页结构 头部:网站的品牌log,登录信息 内容:放置网站的主体内容 尾部:放置网站的其它友情链接和版权信息之类的 关于网站样式 首先写一个样式表,来包含全局的样式.定义整个网站的reset.css样式表,编写一些全局…
jQuery中隐藏元素的hide方法 让页面上的元素不可见,一般可以通过设置css的display为none属性.但是通过css直接修改是静态的布局,如果在代码执行的时候,一般是通过js控制元素的style属性,这里jQuery提供了一个快捷的方法.hide()来达到这个效果 $elem.hide() 提供参数: .hide( options ) 当提供hide方法一个参数时,.hide()就会成为一个动画方法..hide()方法将会匹配元素的宽度,高度,以及不透明度,同时进行动画操作 快捷参数…
前言: 先介绍下需要用到的浏览器提供的一些原生的方法(这里不处理低版本的IE兼容问题) 创建流程比较简单,大体如下: 创建节点(常见的:元素.属性和文本) 添加节点的一些属性 加入到文档中 流程中涉及的一点方法: 创建元素:document.createElement 设置属性:setAttribute 添加文本:innerHTML 加入文档:appendChild 如右边代码所示,写一个最简单的元素创建,我们会发现几个问题: 每一个元素节点都必须单独创建 节点是属性需要单独设置,而且设置的接口…
进入官方网站获取最新的版本 http://jquery.com/download/    中文 https://www.jquery123.com/ <!--JQuery:轻量级的JavaScript库,核心依然是JavaScript,不仅兼容了CSS3,还兼容各种浏览器--> <!--1.容易上手 2.强大的选择器 3.解决浏览器的兼容 4.完善的事件机制 5.出色三维Ajax封装 6.丰富的UI--> <!--链式操作,回调函数,迭代器,延迟对象,对象--> 这里需…
一.简介 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是“Write Less, Do More”,即倡导写更少的代码,做更多的事情.它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作.事件处理.动画设计和Ajax交互. jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口:具有高效灵活的c…
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-…
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-…
<body> <h3>例子</h3> <p title="选择你最喜欢的水果." >你最喜欢的水果是?</p> <ul> <li id="apple">苹果</li> <li>橘子</li> <li>菠萝</li> </ul> </body> 可以通过JavaScript中的getElementsBy…
标准HTML文件引入jQuery库方法: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="t…
一.jQuery属性模块整体介绍 jQuery的属性操作模块分四个部分:html属性操作,dom属性操作,类样式操作,和值操作. html属性操作(setAttribute/getAttribute)是指对html文档中的属性进行读取,设置和移除操作,其中,属性名一般是小写的联词符式的字符串,属性值也是字符串. DOM属性操作时对DOM元素的属性(DOM[propName]或者DOM.propName的形式)进行读取,设置和移除操作,其中,属性名一般是驼峰式字符串,属性值可以是任何类型: 类样式…
一.jQuery数据缓存基本原理 jQuery数据缓存就两个全局Data对象,data_user以及data_priv; 这两个对象分别用于缓存用户自定义数据和内部数据: 以data_user为例,所有用户自定义数据都被保存在这个对象的cache属性下,cache在此姑且称之为自定义数据缓存: 自定义数据缓存和DOM元素/javascript对象通过id建立关联,id的查找通过DOM元素/javascript元素下挂载的expando属性获得 话不多说,直接上代码.相关思路在代码注释中都有讲解…
jQuery.when提供了基于一个或多个对象的状态来执行回调函数的功能,通常是基于具有异步事件的异步队列. 如果传入多个异步队列,jQuery.when会返回一个新的主异步队列的只读副本(promise),这个副本将跟踪所传递的异步队列的最终状态. 当所有异步队列都成功,主异步队列的成功回调函数将会被调用,参数是包含所有异步队列成功参数的数组:为了达到这一效果,方法jQuery.when会维护一个计数器,并在每个异步队列上,添加成功回调,当每个异步队列的成功回调触发时,会将该计数器减1,当计算…
自己实现的callbacks模块相较于jquery源代码中的callbacks模块有所简化,表面上看没有考虑firing这个参数,没有对之进行任何处理,即没有考虑在函数执行过程中,再次调用add,remove,fire的种种情况. 话不多少,直接上代码,所有的思考都在代码里面: var optionsCache={}; function createOptions(options){ var object=optionsCache[options]={}; //\S+,匹配非空格字符 //正则表…
jQuery UI:http://jqueryui.com/ jQuery UI介绍: jQuery UI 是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库.包含底层用户交互.动画.特效和可更换主题的可视控件.我们可以直接用它来构建具有很好交互性的web应用程序.所有插件测试能兼容 IE 6.0+, Firefox 3+, Safari 3.1+, Opera 9.6+, 和 Google Chrome. 组件构成 jQuery UI 主要分为3个部分:交互.微件和效果…
jQuery API 中文文档:https://www.jquery123.com/ jQuery Mobile 菜鸟教程:http://www.runoob.com/jquerymobile/jquerymobile-tutorial.html更多:https://github.com/summerSongXia/summerSongXia.github.io/tree/master/JQuery 1. Javascript简介 1.1  JS的3个弊端:复杂的文档对象模型(DOM),不一致的…
Jquery 学习笔记 总结 感想: 此前在做站点时用到过jquery相关,特别是Ajax相关技术.但是并没有系统的进行学习和了解Jquery的强大的功能,趁这几天跟着资料基本的了解下Jquery的特性和插件,感觉原来好多前端设计中感觉非常麻烦的东西.通过Jquery的函数和插件都非常easy的实现了而且效果极佳.这里仅仅是简单的介绍下Jquery有哪些知识点. 1.基础选择器 (1). $("button").attr("disabled","true&…
学习完<锋利的jQuery>,用时13天. 这期间,私底下又用了一点时间去W3C上把HTML和CSS重新过了一遍. 总的来说,收获还是蛮多的. 其实在本书里面真正重要的也就前几章,后面的都是一些插件什么的.这些W3C上面都有. 当然我自己感觉第11章,也就是jQuery的简单性能优化,虽然少了点,但这才算值得我去买一本实体书.(然而我百度了一下,貌似网上也有这样的优化,而且更多点) 好吧,小菜鸡到这里谈论大神的书,好像有点不合适,就当作胡咧咧吧. 毕竟买了本书确实起到了至关重要的作用 保护了我…
目的:虽然jQuery各种各样的功能已经很完善了,但是我们还是要学会自己去编写插件.这样我们可以去封装一些项目中经常用到的专属的代码,以便后期维护和提高开发效率. jQuery插件的类型: 封装对象方法的插件 大部分jQuery的插件都属于这种,对获取的jQuery对象进行操作 封装全局函数的插件 可以理解为$.ajax这种就是封装的全局函数 选择器插件 顾名思义,封装的选择器 jQuery插件的基本要点: jQuery插件的文件名推荐为:jquery.[插件名].js,以免和其它js库插件混淆…
jQuery的基础部分前面都讲完了,那么就看插件了. 关于jQuery表单验证插件-Validation validation特点: 内置验证规则:拥有必填.数字.E-Mail.URL和信用卡号码等19类内置验证规则 自定义验证规则:可以很方便地自定义验证规则 简单强大的验证信息提示:默认了验证信息提示,并提供了自定义覆盖默认提示信息的功能 实时验证:可以通过keyup或者blur事件触发验证,而不仅仅在表单提交的时候验证 使用方法: 引用jQuery库和Validation插件 <script…
关于性能优化 合适的选择器 $("#id")会直接调用底层方法,所以这是最快的.如果这样不能直接找到,也可以用find方法继续查找 $("p")标签选择器也是直接调用底层方法,所以是第二选择 $(".class")也是直接调用底层方法,不过IE8及更早版本不支持getElementByClassName,它会采用DOM搜索方式,所以会影响性能. $("[attribute=value]")采用DOM搜索的方式,很多现代浏览器支…
关于 jQuery Mobile jQuery Mobile是为了填补jQuery在移动设备应用上的一个新项目.它应用了HTML5和CSS3. 主要特性 基于jQuery构建. 采用与jQuery一致的核心和语法,还使用了jQuery UI的代码和模式. 兼容绝大部分手机平台 轻量级的库 模块化构建 HTML5标记驱动的配置 渐进增强原则 响应设计 强大的Ajax导航系统 易用性 支持触摸和鼠标事件 统一的UI组件 强大的主题化框架 基本应用 默认情况下,移动浏览器,会像在大屏幕的Web浏览器那…
作用:jQuery Form插件的作用是为了让我们可以很方便地用ajax的方式提交表单,从而使我们提交表单的时候页面不用进行刷新. 它的核心方法是ajaxForm()和ajaxSubmit() 升级表单提交方式的时候很简单,不用去改变HTML结构,如下即可: //就是下面这么简单 $("#myForm").ajaxForm(function(){ //提交成功后的操作 }); //你也可以这样 $("#myform").submit(function(){ $(th…
好吧,这章不像上章那么水了,总是炒剩饭也不好. 关于AJAX 所谓Ajax,全名Asynchronous JavaScript and XML.(也就异步的JS和XML) 简单点来讲就是不刷新页面来发送和获取数据,然后更新页面. Ajax的优势 无需插件支持 优秀的用户体验 提高web程序的性能 减轻服务器和带宽的负担 Ajax的不足 浏览器兼容不足 破坏浏览器前进和后退按钮的正常功能 对搜索引擎的支持不足 开发和调试工具的 缺乏 好吧,这些都是几年前的不足.技术的发展很快,这些不足也会慢慢弥补…