《锋利的jQuery》读书要点笔记6——制作商城网页：结构和样式设计

《锋利的jQuery》读书要点笔记7——制作商城网页：网站脚本

第8章用jQuery打造个性网站上一节将网页的样式设计完了,现在开始用jQuery来编写网站的脚本.首先要确定的是应该完成哪些功能. 首页应该完成的功能是: 详情页: 这个页面要完成的效果是: 接下来就用jQuery来逐步的完成这些效果首页部分 1. 搜索框文字效果搜索框默认有文字,光标定位在搜索框上时需将文字去掉,当光标移开时如果用户未填写任何内容则需将提示文字恢复: $(function(){ $("#inputSearch").focus(function() { $(t…

《锋利的jQuery》读书要点笔记6——制作商城网页：结构和样式设计

第8章用jQuery打造个性网站做一个购物网站并用jQuery来完善.大体步骤是: 收集素材确定网站结构 A. 文件结构,imagea文件夹用来存放将要用到的图片,styles文件夹存放CSS,scripts存放jQuery脚本.首页和商品详情页. B. 网页结构: 用HTML来把大致的框架给搭好: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&qu…

《锋利的JQuery》读书要点笔记1——认识JQuery&&选择器

<锋利的jQuery>源码下载,包括了这本书中全部代码以及用到的CSS文件第一章认识jQuery jQuery是个Js库.首先该明确的一点是:在jQuery库中$就是jQuery的一个简写形式.来个例子: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&…

锋利的jQuery读书笔记---选择器

前段时间入手了锋利的jQuery(第二版),想着加强下自己的js能力,可前段时间一只在熟悉Spring和Hibernate.最近抽时间开始读这本书了,随便也做了些记录. 读书的过程是边看边代码测试,所以笔记和代码也就写到一起了.下面是选择器的记录: <!DOCTYPE html> <html> <head lang="zh"> <meta charset="UTF-8"> <script type="t…

锋利的jQuery读书笔记---jQuery中Ajax--get、post等方法

load()方法通常用来从Web服务器上获取静态的数据文件,然而这并不能体现ajax的全部价值. 在项目中,如果需要传递一些参数给服务器中的页面,那么可以使用$.get()或者$.post()方法(或者是$.ajax()方法) $.get()方法使用GET方式来进行异步请求.结构为:$.get(url [, data] [, callback] [, type]) $.get()方法参数解释如下: 参数名称类型说明 url String 请求的HTML页的URL地址 data(可选) Obj…

《锋利的JQuery》读书要点笔记3——事件和动画

第四章 jQuery中的事件和动画 JS和HTML的交互是通过用户和浏览器操作页面时引发的事件来处理的,事件由浏览器自动生成. 4.1 jQuery中的事件 1. 加载DOM 这里主要是搞明白window.onload方法和$(document).ready()方法的区别:window.onload方法是在网页中所有元素(包括元素的关联文件)都加载到浏览器后才执行的,而 $(document).ready()方法在DOM完全就绪后就可以被调用.要注意的是在$(document).ready()方…

《锋利的JQuery》读书要点笔记5——jQuery与Ajax的应用

第6章 jQuery与Ajax的应用 Ajax的全称:Asynchronous JavaScript and XML (异步Javascript和XML) 传统模式中,数据提交通过表单方式实现,数据的获取是靠全页面刷新来重新获取整页的内容.而Ajax模式只是通过XMLHttpRequest对象向服务器端提交数据,即按需发送.因为Ajax需要与Web服务器端进行交互,所以用个服务器,我这里用的是Tomcat. 1. 传统Js的Ajax操作 <!DOCTYPE html PUBLIC "-/…

《锋利的JQuery》读书要点笔记4——表格表单的操作

第五章 jQuery对表单,表格的操作以及更多应用这章主要以一些具体案例讲解了jQuery对表单,表格的常用操作,以及一些常见的jQuery应用,用到的都是上几章说的东西.下面就以具体的案例来展开. 5.1 表单应用案例1:文本框获取和失去焦点时改变其样式. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tr…

《锋利的JQuery》读书要点笔记2——DOM操作

第三章 jQuery中的DOM操作 3.1 DOM(Document Object Model)操作的分类 1. DOM Core 例如:document.getElementsByTagName("form") 2. HTML-DOM 例如: document.forms 3. CSS-DOM 例如:element.style.color="red" 3.2 jQuery中的DOM操作先构建一个网页,下面的DOM操作都围绕这个网页展开. //…

锋利的jQuery读书笔记---jQuery中Ajax--序列化元素、Ajax全局事件

serialize()方法: 作用于一个jQuery对象,它能够将DOM元素内容序列化为字符串,用于Ajax请求. <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <script type="text/javascript" src="../../js/jquery-2.1.3.js">&l…

锋利的jQuery读书笔记---jQuery中Ajax--load方法

第一个Ajax例子 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <input type="button" value="Ajax提交" onclick="Ajax();&qu…

锋利的jQuery读书笔记---jQuery中动画

jQuery中的动画: 1.show和hide 2.fadeIn和fadeOut 3.slideUp和slideDown <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <script type="text/javascript" src="../../js/jquery-2.1.3.js">…

锋利的jQuery读书笔记---jQuery中的事件

jQuery中的事件: 1.加载DOM:注意window.onload和$(document).ready()的不同 2.事件绑定 3.合成事件 --2和3的详细信息见代码- <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <script type="text/javascript" src="../../…

锋利的jQuery读书笔记---jQuery中操作DOM

一般来说,DOM的操作分为3个方面,即DOM Core.HTML-DOM和CSS-DOM jQuery中的DOM操作主要包括以下种类: 查找节点查找元素节点查找属性节点创建节点创建元素节点创建文本节点创建属性节点插入节点插入节点的方法方法描述示例 append() 向每个匹配的元素内部追加内容 HTML代码:<p>我想说:</p> jQuery代码:$("p").append("<b>你好</b>"…

<锋利的jQuery>读书笔记

…

《锋利的jQuery》心得笔记--Four Sections

第八章 1. 当父元素设置position:relative的时候,子元素设置position:absolute.这个子元素设置在父元素的任何位置. 第九章 1. 对可视区进行纠正,通知浏览器使用移动设备的宽度作为可视区的宽度,禁止用户放大缩小 <metaname="viewport" content="width=device-width,initial-scale=1,user-scalable=no" /> 2. 加入框架顺序 &…

《锋利的jQuery》心得笔记--Three Sections

第六章 1. JavaScript的Ajax的实现步骤: 1) 定义一个函数用来异步获取信息 function Ajax(){ } 2) 声明: var xmlHttpReq = null; 3) 赋值(实现浏览器兼容): if(window.ActiveXObject){ xmlHttpReq = new ActiveXObject(“Microsoft.XMLHttp”); }else if(window. XMLHttpRequest)…

《锋利的jQuery》心得笔记--Two Sections

第三章 1. DOM操作(节点) 1) 查找节点可以查找元素节点和属性节点 2) 创建节点: (1) 创建元素节点 var addLi = $(“<li></li>”);或者var addLi = $(“</li>”)不可以是var addLi = $(“<li>”); $(“ul”).append(addLi); (2) 创建文本节点:var addLi = $(“<li>文本节点&…

《锋利的jQuery》心得笔记--One Sections

第一章 1. $是jQuery的一个简写形式 2. 在jQuery中无法使用DOM对象的任何方法:比如:$ (“#id”).innerHTML.$ (“#id”).checked, 可以使用:$ (“#id”).html().$ (“#id”).attr(“checked”); 3. DOM对象无法使用jQuery中的任何方法: document.getElementById(“#id”).html(); 4. 把jQuery转换成DOM对象: 1) var…

【锋利的jQuery】学习笔记04

第四章 jQuery中的事件和动画一.jQuery中的事件加载DOM 在JS中等待页面加载完成通常使用window.onload方法,而在jQuery中则使用$(document).ready()方法来替代传统的window.onload方法.这两者有很大的不同: 执行时机 window.onload方法是在网页所有的元素(包括元素关联的文件)完全加载到浏览器后才能执行.而Query中的$(document).ready()方法,在DOM载入就绪就可以对其操纵并调用它绑定的函数,此时网页中的…

【锋利的jQuery】学习笔记03

第三章 jQuery中的DOM操作一.DOM操作的分类 DOM(document object model)是一种与浏览器.平台.语言无关的接口,使用该接口可以访问页面中的·所有组件.DOM的操作可以分为DOM Core.HTML-DOM和CSS-DOM. DOM Core:任意支持DOM的程序设计语言都可以使用.JS中getElementById(),getelementByTagName(),getAttribute()和setAttribute()都是它的组成部分. HTML-DOM:提…

【锋利的jQuery】学习笔记02

第二章 jQuery选择器一.jQuery选择器的优势写法简洁 $("div") 支持css2和css3选择器(对于css3选择器支持这一项,我认为应该是jQuery首先创造并使用这些选择器而后css3将其引入自己的规范) 完善的处理机制 $(".demo")获取的永远是对象,即时网页没有这个元素. 由于这种机制,使用jQuery检查某个元素在网页中是否存在时不能使用: if($(".demo")){ // do something } 而是…

【锋利的jQuery】学习笔记01

第一章认识jQuery 一.常见的JS库 Prototype 最早的js库之一.把好用JS方法组合,缺点结构松散. Dojo 离线存储API.生成图标组件.矢量图形库.Comet支持.企业级JS库,缺点文档不全.API不稳定. YUI 雅虎开发的富交互网页程序工具集. Exit JS侧重界面 MooTools 模块化思想的轻量级JS框架 jQuery 轻量级.强大选择器等. 二.jQuery优势轻量级 30K左右强大选择器出色DOM封装可靠的事件处理机制 Ajax完善不污染顶级变量…

锋利的jQuery读书随笔

代码规范:var $variable = jQuery对象:var variable = DOM对象: jQuery对象无法使用DOM对象的任何方法,同样DOM对象也无法使用jQuery对象的任何方法.下面两个代码是等效的,获取id为foo的元素的html代码.document.grtElementById("foo").innerHTML;$("#foo").html(); DOM对象和Jquery对象的转换JQuery->DOM1) var $cr = $…

NGUI 学习笔记实战——制作商城UI界面

http://www.cnblogs.com/chongxin/p/3876575.html Unity3D的uGUI听说最近4.6即将推出,但是目前NGUI等UI插件大行其道并且已经非常成熟,所以我们还是先看眼前吧. 一.实现思想商城的功能是很多游戏都拥有的,按下一个界面按钮,弹出一个窗体. 然后是商城中的商品可以拖动,既可以用手,也可以用滑条等等,至于点击购买就不单单是UI层的事了.等到实现NDate的时候再进行讨论. 二.实现背景 1.NGUI->Open->Prefab tool b…

《锋利的jQuery》读书笔记（DOM+事件）

前阵子买了一批书,就从锋利的jQuery看起吧,书中一些太过常规以及没有强记必要性的操作就不记录了. 1.DOM加载后执行JS $(document).ready(function(){ //...... }) //简写 $(function(){ //...... }) 特点:网页中所有DOM结构绘制完成后就执行,可能DOM元素关联的东西并没有加载完,可以同时编写多个 window.onload = function(){ //...... } 特点:必须等待网页中所有内容(包括图片)加载完毕…

jQuery与Ajax的应用——《锋利的jQuery》（第2版）读书笔记3

第6章 jQuery与Ajax的应用 jQuery对Ajax操作进行了封装,在jQuery中$.ajax()方法属于最底层的方法,第2层是load().$.get()和$.post()方法,第3层是$.getScript()和$.getJSON()方法. 1.load()方法 (1)载入HTML文档 load()方法是jQuery中最简单和常用的Ajax方法,能载入远程HTML代码并插入DOM中.它的结构为: load(url [, data] [, callback]) 参数说明: url:请…