锋利Jquery 第一天
之前一直学习,现在终于有时间来整理一下文档了。
以下文章都是自己学习Jquery 的笔记,
希望能留下痕迹,也希望能帮助到您。
好了开始我的Jquery第一天。
我也是从Hello wrod!开始的。关于jquery 的引用我直接一笔带过。如下:
<html> <head> <title>jquery 链式操作</title> <script type="text/javascript" src="jquery-1.3.1.js"></script> <script type='text/javascript'> $(document).ready(function(){ alert("hello word!"); //静止右键点击 // $(document).bind("contextmenu",function(e){ // return false; // }); }); </script> </head>
<body> </body> </html>
接下来让我们来看看一个复杂的实例,这个实例让我们知道什么是:jquery的链式操作,
我用 . 来连接jquery 的链式操作。
可能有的人刚开始学query ,看起来比较陌生,在后面的疯狂Jquery 中我会一一解释。慢慢的你就会明白。
<html> <head> <title>Jquery 链式操作</title> <script type="text/javascript" src="jquery-1.3.1.js"></script> <style type="text/css"> #menu {width:300px} .has_children { background:#555;color:#fff;cursor:pointer; } .highligt{color:#fff;background:green;} div{padding:0;margin:0px;} div a { background:#888;display:none;float:left;width:300px; } </style> <script type='text/javascript'> $(document).ready(function(){ // alert("给所有目录添加click 事件"); $(".has_children").click(function(){ $(this).addClass('highligt') //为当前元素添加highligt类。 .children("a").show().end() //将子节点的<a>元素显示出来。并且重新定位到上次操作的元素 .siblings().removeClass("highligt") //获取同级的元素。(或兄弟元素),并且去掉他们highligt类 .children("a").hide(); //将同级的元素,兄弟元素下的<a> 元素隐藏 }); }); </script> </head>
<body> <div id='menu'> <div class='has_children'> <span>第一章 认识Jquery</span> <a>1.1 Javascript 和 Javascript库</a> <a>1.2 加入Jquery</a> <a>1.3 编写简单的Jquery 代码</a> <a>1.4 Jquery对象 和 Dom对象</a> <a>1.5 解决Jquery 和其他库的冲突</a> <a>1.6 Jquery 开发工具和插件</a> <a>1.7 小结</a> </div> <div class='has_children'> <span>第二章 Jquery选择器</span> <a>2.1 Jquery 选择器是什么?</a> <a>2.2 Jquery 选择器的优势?</a> <a>2.3 Jquery 选择器</a> <a>2.4 应用Jquery改写实例</a> <a>2.5 选择器中的一些注意事项</a> <a>2.6 案例研究————类似淘宝品牌列表的效果</a> <a>2.7 还有其他选择器吗?</a> <a>2.8 小结</a> </div> <div class='has_children'> <span>第三章 Jquery中的DOM操作</span> <a>3.1 DOM的操作分类</a> <a>3.2 Jquery 中的DOM操作</a> <a>3.3 案例研究————某网站的超链接和图片效果</a> <a>3.4 小结</a> </div> </div> </body> </html>
锋利Jquery 第一天的更多相关文章
- jQuery第一篇 (帅哥)
同学心目中的jQuery: 简单易用,功能强大,对移动端来说,体积稍大. 1.1 回顾前面学到的js我们遇到的一些痛点 window.onload 事件有个事件覆盖的问题,我们只能写一个 代码容错 ...
- jQuery 第一阶段 学习使用总结
jQuery 是一个 JavaScript 库,位于一个 JavaScript 文件中,其中包含了所有的 jQuery 函数.在平常的使用过程中,会常常与JavaScript,配合css使用,能够令网 ...
- Jquery第一篇【介绍Jquery、回顾JavaScript代码、JS对象与JQ对象的区别】
什么是Jquery? Jquey就是一款跨主流浏览器的JavaScript库,简化JavaScript对HTML操作 就是封装了JavaScript,能够简化我们写代码的一个JavaScript库 为 ...
- Jquery($第一天)【历史】
一.什么是jQueryjQuery是一个JavaScript库,它通过封装原生的JavaScript函数得到一整套定义好的方法.它的作者是John Resig,于2006年创建的一个开源项目,随着越来 ...
- JQuery --- 第一期 (初识jQuery, JQuery核心函数和工具方法)
个人学习笔记 初识jQuery 1.我的第一个JQuery <!DOCTYPE html> <html lang="en"> <head> & ...
- jquery 第一章
1.本章目标 了解jquery 了解jquery和js的区别 掌握jquery的入门 掌握jquery对象和dom对象的区别2.jquery简介 jquery是一个轻量级 ...
- JQuery第一天——入门概述与选择器
一.什么是JQuery 一个流行的js库 核心理念:write less , do more 优势: 轻量级 强大的选择器 出色的 DOM 操作的封装 可靠的事件处理机制 完善的 Ajax 出色的浏 ...
- 8、第八次课jquery第一节20151006
1.JS JQUERY 的区别 jquery 底层基于js 它是对于JS进行封装,代码量比较少.[write less do more] 网上可以下载jquery 类库文件,写的时候需要智能提示在js ...
- 锋利jQuery 学习整理之 第六章 jQuery 与Ajax 的应用
1.Ajax 的XMLHttpRequest 对象 XMLHttpRequest 是Ajax 的核心,它是Ajax 实现的关键---发送异步请求.接受响应及执行回调都是通过它来完成的.XMLHttpR ...
随机推荐
- JavaScript数组的操作
<html> <head> <meta charset="utf-8"> <title>无标题文档</title> &l ...
- vue组件之间互相传值:父传子,子传父
今看到一篇很不错的vue组件传值文章,便于理解,遂做笔记- 一般页面的视图App.vue应为这样 一.父组件向子组件传值 1.创建子组件,在src/components/文件夹下新建一个Child.v ...
- 如何构建和设计以确保 API 的安全性
如何构建和设计以确保 API 的安全性 面对常见的OWASP十大威胁.未经授权的访问.拒绝服务攻击.以及窃取机密数据等类型的攻击,企业需要使用通用的安全框架,来保护其REST API,并保证良好的用户 ...
- bzoj 1191: [HNOI2006]超级英雄Hero 网络流_残量网络
题目描述: 现在电视台有一种节目叫做超级英雄,大概的流程就是每位选手到台上回答主持人的几个问题,然后根据回答问题的 多少获得不同数目的奖品或奖金.主持人问题准备了若干道题目,只有当选手正确回答一道题后 ...
- 洛谷P1993 小K的农场_差分约束_dfs跑SPFA
Code: #include<cstdio> #include<queue> using namespace std; const int N=10000+233; const ...
- 数据结构(3) 第三天 栈的应用:就近匹配/中缀表达式转后缀表达式 、树/二叉树的概念、二叉树的递归与非递归遍历(DLR LDR LRD)、递归求叶子节点数目/二叉树高度/二叉树拷贝和释放
01 上节课回顾 受限的线性表 栈和队列的链式存储其实就是链表 但是不能任意操作 所以叫受限的线性表 02 栈的应用_就近匹配 案例1就近匹配: #include <stdio.h> in ...
- UVA1586 - Molar mass(紫书习题3.2)
HJL是一个从不讽刺人的品学兼优的好孩子,她最近沉迷学习化学而不能自拔.然而计算一个分子的相对分子质量使她烦不胜烦,因此她决定请你写一个程序来帮助她计算这种麻烦的事情. 已知: ①C代表的碳元素的相对 ...
- 刷新linux硬盘存储接口
#!/bin/bash for i in /sys/class/scsi_host/*; do echo "- - -" > $i/scan; done 简写 for i i ...
- 提高生产力:Web开发基础平台WebCommon的设计和实现
Web开发中,存在着各种各样的重复性的工作.为了提高开发效率,不在当码农,我在思考和实践如何搭建一个Web开发的基础平台. Web开发基础平台的目标和功能 1.提供一套基础的开发环境,整合了常用的框架 ...
- chrome安装插件,安装Postman
1.下载postman插件,可以自己到网上下载,也可以点击http://download.csdn.net/detail/u010246789/9528471 2.解压文件,在解压后的文件夹中找到.c ...