JQuery基础学习总结

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基础学习】09 jQuery与前端（这章很水）

这章主要是将如何将jQuery应用到网站中,或者说其实就是一些前端知识,对于我这种后端程序来说其实还是蛮有用的. 关于网站结构文件结构前端文件分三个文件夹放 images文件夹用来存放将要用到的图片 styles文件夹用来存放css样式表 scripts文件夹用来存放js脚本网页结构头部:网站的品牌log,登录信息内容:放置网站的主体内容尾部:放置网站的其它友情链接和版权信息之类的关于网站样式首先写一个样式表,来包含全局的样式.定义整个网站的reset.css样式表,编写一些全局…

jQuery 基础学习笔记总结（一）

Jquery 学习笔记总结感想: 此前在做站点时用到过jquery相关,特别是Ajax相关技术.但是并没有系统的进行学习和了解Jquery的强大的功能,趁这几天跟着资料基本的了解下Jquery的特性和插件,感觉原来好多前端设计中感觉非常麻烦的东西.通过Jquery的函数和插件都非常easy的实现了而且效果极佳.这里仅仅是简单的介绍下Jquery有哪些知识点. 1.基础选择器 (1). $("button").attr("disabled","true&…

【jQuery基础学习】12 jQuery学习感想

学习完<锋利的jQuery>,用时13天. 这期间,私底下又用了一点时间去W3C上把HTML和CSS重新过了一遍. 总的来说,收获还是蛮多的. 其实在本书里面真正重要的也就前几章,后面的都是一些插件什么的.这些W3C上面都有. 当然我自己感觉第11章,也就是jQuery的简单性能优化,虽然少了点,但这才算值得我去买一本实体书.(然而我百度了一下,貌似网上也有这样的优化,而且更多点) 好吧,小菜鸡到这里谈论大神的书,好像有点不合适,就当作胡咧咧吧. 毕竟买了本书确实起到了至关重要的作用保护了我…

【jQuery基础学习】08 编写自定义jQuery插件

目的:虽然jQuery各种各样的功能已经很完善了,但是我们还是要学会自己去编写插件.这样我们可以去封装一些项目中经常用到的专属的代码,以便后期维护和提高开发效率. jQuery插件的类型: 封装对象方法的插件大部分jQuery的插件都属于这种,对获取的jQuery对象进行操作封装全局函数的插件可以理解为$.ajax这种就是封装的全局函数选择器插件顾名思义,封装的选择器 jQuery插件的基本要点: jQuery插件的文件名推荐为:jquery.[插件名].js,以免和其它js库插件混淆…

【jQuery基础学习】06 jQuery表单验证插件-Validation

jQuery的基础部分前面都讲完了,那么就看插件了. 关于jQuery表单验证插件-Validation validation特点: 内置验证规则:拥有必填.数字.E-Mail.URL和信用卡号码等19类内置验证规则自定义验证规则:可以很方便地自定义验证规则简单强大的验证信息提示:默认了验证信息提示,并提供了自定义覆盖默认提示信息的功能实时验证:可以通过keyup或者blur事件触发验证,而不仅仅在表单提交的时候验证使用方法: 引用jQuery库和Validation插件 <script…

jQuery基础学习(二)—jQuery选择器

一.jQuery基本选择器 1.CSS选择器在学习jQuery选择器之前,先介绍一下之前学过的CSS选择器. 选择器语法描述示例标签选择器 E { CSS规则 } 以文档元素为选择符 ID选择器 #ID{ CSS规则 } 以ID为选择符类选择器 E.className{ CSS规则 } 以文档元素的Class为选择符群组选择器 E1,E2{ …

jQuery基础学习(一)—jQuery初识

一.jQuery概述 1.jQuery的优点 jQuery是一个优秀的JavaScript库,极大地简化了遍历HTML文档.操作DOM.处理事件.执行动画和开发Ajax的操作.它有以下几点优势. (1)轻量级. (2)强大的选择器. (3)出色的DOM封装. (4)可靠的事件处理机制. (5)完善的Ajax. 2.jQuery类库说明 jQuery的库分为两种,分别是生产版和开发版.区别如下: 名称大小说明 jquer…

【总结整理】JQuery基础学习---动画

jQuery中隐藏元素的hide方法让页面上的元素不可见,一般可以通过设置css的display为none属性.但是通过css直接修改是静态的布局,如果在代码执行的时候,一般是通过js控制元素的style属性,这里jQuery提供了一个快捷的方法.hide()来达到这个效果 $elem.hide() 提供参数: .hide( options ) 当提供hide方法一个参数时,.hide()就会成为一个动画方法..hide()方法将会匹配元素的宽度,高度,以及不透明度,同时进行动画操作快捷参数…

【总结整理】JQuery基础学习---DOM篇

前言: 先介绍下需要用到的浏览器提供的一些原生的方法(这里不处理低版本的IE兼容问题) 创建流程比较简单,大体如下: 创建节点(常见的:元素.属性和文本) 添加节点的一些属性加入到文档中流程中涉及的一点方法: 创建元素:document.createElement 设置属性:setAttribute 添加文本:innerHTML 加入文档:appendChild 如右边代码所示,写一个最简单的元素创建,我们会发现几个问题: 每一个元素节点都必须单独创建节点是属性需要单独设置,而且设置的接口…

【总结整理】JQuery基础学习---样式篇

进入官方网站获取最新的版本 http://jquery.com/download/ 中文 https://www.jquery123.com/    这里需…

jQuery基础学习

一.简介 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是“Write Less, Do More”,即倡导写更少的代码,做更多的事情.它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作.事件处理.动画设计和Ajax交互. jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口:具有高效灵活的c…

【jQuery基础学习】11 jQuery性能简单优化

关于性能优化合适的选择器 $("#id")会直接调用底层方法,所以这是最快的.如果这样不能直接找到,也可以用find方法继续查找 $("p")标签选择器也是直接调用底层方法,所以是第二选择 $(".class")也是直接调用底层方法,不过IE8及更早版本不支持getElementByClassName,它会采用DOM搜索方式,所以会影响性能. $("[attribute=value]")采用DOM搜索的方式,很多现代浏览器支…

【jQuery基础学习】10 简单了解jQuery Mobile及jQuery各个级别版本的变化

关于 jQuery Mobile jQuery Mobile是为了填补jQuery在移动设备应用上的一个新项目.它应用了HTML5和CSS3. 主要特性基于jQuery构建. 采用与jQuery一致的核心和语法,还使用了jQuery UI的代码和模式. 兼容绝大部分手机平台轻量级的库模块化构建 HTML5标记驱动的配置渐进增强原则响应设计强大的Ajax导航系统易用性支持触摸和鼠标事件统一的UI组件强大的主题化框架基本应用默认情况下,移动浏览器,会像在大屏幕的Web浏览器那…

【jQuery基础学习】07 jQuery表单插件-Form

作用:jQuery Form插件的作用是为了让我们可以很方便地用ajax的方式提交表单,从而使我们提交表单的时候页面不用进行刷新. 它的核心方法是ajaxForm()和ajaxSubmit() 升级表单提交方式的时候很简单,不用去改变HTML结构,如下即可: //就是下面这么简单 $("#myForm").ajaxForm(function(){ //提交成功后的操作 }); //你也可以这样 $("#myform").submit(function(){ $(th…

【jQuery基础学习】05 jQuery与Ajax以及序列化

好吧,这章不像上章那么水了,总是炒剩饭也不好. 关于AJAX 所谓Ajax,全名Asynchronous JavaScript and XML.(也就异步的JS和XML) 简单点来讲就是不刷新页面来发送和获取数据,然后更新页面. Ajax的优势无需插件支持优秀的用户体验提高web程序的性能减轻服务器和带宽的负担 Ajax的不足浏览器兼容不足破坏浏览器前进和后退按钮的正常功能对搜索引擎的支持不足开发和调试工具的缺乏好吧,这些都是几年前的不足.技术的发展很快,这些不足也会慢慢弥补…

【jQuery基础学习】04 jQuery中的表格操作及cookie插件的使用

这章本来准备写成jQuery的表单操作和表格操作的. 然而昨天吧jQuery的表单操作看完,发现全部在炒之前章节的剩饭,所以就没写出来. 那么今天就来看看表格吧. 因为平常做的都是公司的内部管理系统,所以说数据表格用到的还是比较多的.那么在这里写出来说不定还能用上. 关于jQuery的表格应用隔行变色 $(function(){ $("tbody>tr:odd").addClass("样式1");//odd是选取奇数行 $("tbody>tr…

【jQuery基础学习】03 jQuery中的事件与动画

关于jQuery中的事件 js与HTML之间的交互是通过用户和浏览器操作页面时引发的事件来处理的. jQuery增加并扩展了基本的事件处理机制,jQuery不仅提供了更加优雅的事件处理方法,而且极大地增强了事件处理能力. $(document).ready()只需要等文档结构加载完就能执行,而window.onload还要等到文档元素所关联的元素(比如图片)加载完才行. 而因为图片未加载完时ready()事件就执行了,因此图片的长宽属性未必有效,要想解决这个问题可以用$(document).lo…

【jQuery基础学习】02 jQuery的DOM操作

DOM操作分为3个方面: DOM Core 任何一种支持DOM Core的语言都可以使用它,比如getElementById就是DOM Core操作 HTML-DOM 只能用来处理web文档 CSS-DOM 针对CSS的操作关于jQuery中的DOM操作查找节点可以很轻易通过就jQuery选择器来找到,这里略过. 创建节点 var $myli= $('<li title="troy">troy123</li>');//创建jQuery对象 $(…

【jQuery基础学习】01 jQuery选择器

关于CSS选择器 jQuery选择器涉及到CSS,CSS技术使得网页的结构与表现样式完全分离. 同样CSS也需要找到某个网页的结构才能改变其样式,这就是CSS选择器. 常用的CSS选择器如下: 标签选择器以文档元素作为选择符 a{ text-decoration:none; } ID选择器以文档元素的唯一标识符ID作为选择符 #myNameDiv{ font-size:14px; width:120px; } 类选择器以文档元素的class作为选择符 div.note{ font-size…

jQuery基础学习笔记（1）

--------2.0以上版本体积更小. --------CDN 内容分发网络(Content delivery network或Content distribution network,常简写成CDN)可以减少带宽,但需要保证网络正常连接. jQuery函数:jQuery() 或者写成 $() ,使用方法:1.选择器:2.对象,如document:3.文本内容,注意这个文本内容里一定要包含至少一个 html 标签 … 不然 jQuery 会把没有 html 标签的文本内容当成是选择器来处…

jQuery基础学习7——层次选择器find()方法

<!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-…

jQuery基础学习6——基本选择器

jQuery基础学习4——jQuery容错性

使用jQuery选择器不仅比使用传统的getElementById()和getElementsByTagName()函数简洁得多,而且还能避免某些错误. <script type="text/javascript"> </script> 如果网页中没有id为“tt”的元素,浏览器就会报错. <script type="text/javascript"> if(document.getElementById("tt&quo…

jQuery基础学习3——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基础学习2——DOM和jQuery对象

<body> <h3>例子</h3> <p title="选择你最喜欢的水果." >你最喜欢的水果是?</p> <ul> <li id="apple">苹果</li> <li>橘子</li> <li>菠萝</li> </ul> </body> 可以通过JavaScript中的getElementsBy…

jQuery基础学习1

标准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中的DOM操作

一.查找节点查找属性节点: 通过jQuery的选择器来完成. 操作属性节点: 调用jQuery对象的attr()来获取它的属性值. 操作文本节点: 通过text()方法. //1.操作文本节点:通过jQuery的text()方法 alert($("#bj").text()); $("#bj").text("南京"); alert($("#bj").text()); //2.操作属性节点 //注:…

jquery基础学习之AJAX篇（五）

理解不深,只知道这么用 jquery 中ajax的请求方法 $.ajax({ url:‘http://...’, //请求网址 type:'GET', //请求方法 success:function(data){}//成功后的回调函数,这个data就是拿到的数据 }) 跨域获取数据 ,jsonp方式跨域,只要规定 dataType:'jsonp'即可 $.ajax({ url:`https://api.douban.com/v2/book/search?q=历史`, type:'GET', da…

【JQuery基础学习总结】的更多相关文章