【锋利的Jquery】读书笔记一
封面镇楼:
读这本书应该是7月份,二周读完,经典的好书,一直没怎么复习。so。。。。温故而知新下。
一.jquery的风格
链式风格
<div class="box">
<ul class="menu">
<li class="level1">
<a href="#none">衬衫</a>
<ul class="level2">
<li><a href="#none">短袖衬衫</a></li>
<li><a href="#none">长袖衬衫</a></li>
<li><a href="#none">短袖T恤</a></li>
<li><a href="#none">长袖T恤</a></li>
</ul>
</li>
<li class="level1">
<a href="#none">卫衣</a>
<ul class="level2">
<li><a href="#none">开襟卫衣</a></li>
<li><a href="#none">套头卫衣</a></li>
<li><a href="#none">运动卫衣</a></li>
<li><a href="#none">童装卫衣</a></li>
</ul>
</li>
<li class="level1">
<a href="#none">裤子</a>
<ul class="level2">
<li><a href="#none">短裤</a></li>
<li><a href="#none">休闲裤</a></li>
<li><a href="#none">牛仔裤</a></li>
<li><a href="#none">免烫卡其裤</a></li>
</ul>
</li>
</ul>
</div>
$(function(){
$(".level1 >a").click(function(){
$(this).addClass("current").next().slideDown()
.parent().siblings().children("a").removeClass("current")
.next().slideUp();
return false;
})
})
加载方式
//第一种种方法 加载
$(document).ready(function(){
// 代码写这里
})
//第二种
$(function(){
// 代码写这里
})
二.jquery与DOM对象的转换
jquery转DOM
var $cr = $("#cr");
var cr = $cr.get(0)
DOM转jquery
var cr = document.getElementById("cr")
var $cr = $(cr)
$()是jquery的一个对象制造工厂
三.解决jquery与其他库的冲突
采用jquery.noConflict()函数方法将jquery控制权交给其他的javascript库
第一种
var $j = jQuery.noConflict(); //自定义jq快捷键
$j(function(){ //使用jq快捷键方法 执行方法
$j("p").click(function(){
alert($(this).text())
})
})
第二种
jQuery.noConflict(); //将变量$的控制权让渡给prototype.js
jQuery(function(){ //使用jQuery
jQuery("p").click(function(){
alert( jQuery(this).text() );
});
});
第三种
jQuery.noConflict(); //将变量$的控制权让渡给prototype.js
(function($){ //定义匿名函数并设置形参为$
$(function(){ //匿名函数内部的$均为jQuery
$("p").click(function(){ //继续使用 $ 方法
alert($(this).text());
});
});
})(jQuery);
【锋利的Jquery】读书笔记一的更多相关文章
- 锋利的jQuery读书笔记---选择器
前段时间入手了锋利的jQuery(第二版),想着加强下自己的js能力,可前段时间一只在熟悉Spring和Hibernate.最近抽时间开始读这本书了,随便也做了些记录. 读书的过程是边看边代码测试,所 ...
- 锋利的jQuery读书笔记---jQuery中Ajax--序列化元素、Ajax全局事件
serialize()方法: 作用于一个jQuery对象,它能够将DOM元素内容序列化为字符串,用于Ajax请求. <!DOCTYPE html> <html> <hea ...
- 锋利的jQuery读书笔记---jQuery中Ajax--get、post等方法
load()方法通常用来从Web服务器上获取静态的数据文件,然而这并不能体现ajax的全部价值. 在项目中,如果需要传递一些参数给服务器中的页面,那么可以使用$.get()或者$.post()方法(或 ...
- 锋利的jQuery读书笔记---jQuery中Ajax--load方法
第一个Ajax例子 <!DOCTYPE html> <html> <head lang="en"> <meta charset=" ...
- 锋利的jQuery读书笔记---jQuery中动画
jQuery中的动画: 1.show和hide 2.fadeIn和fadeOut 3.slideUp和slideDown <!DOCTYPE html> <html> < ...
- 锋利的jQuery读书笔记---jQuery中的事件
jQuery中的事件: 1.加载DOM:注意window.onload和$(document).ready()的不同 2.事件绑定 3.合成事件 --2和3的详细信息见代码- <!DOCTYPE ...
- 锋利的jQuery读书笔记---jQuery中操作DOM
一般来说,DOM的操作分为3个方面,即DOM Core.HTML-DOM和CSS-DOM jQuery中的DOM操作主要包括以下种类: 查找节点 查找元素节点 查找属性节点 创建节点 创建元素节点 创 ...
- <锋利的jQuery>读书笔记
- Javascript & JQuery读书笔记
Hi All, 分享一下我学JS & JQuery的读书笔记: JS的3个不足:复杂的文档对象模型(DOM),不一致的浏览器的实现和便捷的开发,调试工具的缺乏. Jquery的选择器 a. 基 ...
- 锋利的JQuery 学习笔记
第一章 认识JQuery ·页面加载事件(可以写多个ready())$(document).ready(function(){alert(“hello world”);} ...
随机推荐
- 自由的Debian
原文:http://www.debian.org/intro/free 许多人在刚开始接触自由软件时都会很困惑,原因是自由软件中的自由一词并不是他们所期望的那样.对他们而言自由意味着免费.一本英文字典 ...
- 大IT公司笔试
都是一些非常非常基础的题,是我最近参加各大IT公司笔试后靠记忆记下来的,经过整理献给与我一样参加各大IT校园招聘的同学们,纯考Java基础功底,老手们就不用进来了,免得笑话我们这些未出校门的孩纸们,但 ...
- 一.redis 环境搭建
1.简介 redis是一个开源的key-value数据库.它又经常被认为是一个数据结构服务器.因为它的value不仅包括基本的string类型还有 list,set ,sorted set ...
- npm 安装与常用命令
下载nodejs并安装,会附带安装npm工具https://nodejs.org/en/download/ npm 常用命令#在执行命令时需要管理员权限,mac请用sudo来执行,windows请使用 ...
- html5基础的常用的技巧
html5基础的常用的技巧 1. 新的Doctype声明 XHTML的声明太长了,我相信很少会有前端开发人员能手写出这个Doctype声明. <!DOCTYPE html PUBLIC &quo ...
- boost解析XML方法教程
boost库在解析XML时具有良好的性能,可操作性也很强下地址有个简单的说明 http://blog.csdn.net/luopeiyuan1990/article/details/9445691 一 ...
- VS2012编译LibZip库
LibZip库是解压缩zip文件的C库. 中文的网站目前还没有找到相关的编译方法,找了一篇英文文档加上自己的实验修改了一下: 编译步骤如下: 首先先下载CMake,我下载的是2.8版本. libzip ...
- net软件工程师求职简历
Net软件工程师求职简历 姓 名: 王静静 性 别: 女 出生日期: 1991-12 籍 贯: 河北 居住地: 北京 学 历: 专科 E-mail: 335659753@qq. ...
- android sqlite使用之模糊查询数据库数据的三种方式
android应用开发中常常需要记录一下数据,而在查询的时候如何实现模糊查询呢?很少有文章来做这样的介绍,所以这里简单的介绍下三种sqlite的模糊查询方式,直接上代码把: package com.e ...
- 谈谈new Thread的弊端及Java四种线程池的使用
1.new Thread的弊端执行一个异步任务你还只是如下new Thread吗? new Thread(new Runnable() { @Override public void run() { ...