锋利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>
转载于:https://www.cnblogs.com/htwdz-qhm/p/3719269.html
锋利Jquery 第一天相关推荐
- 跟我一起学jQuery——第一集
<锋利的JQuery>第二版阅读笔记-第一章 跟我一起学jQuery--第一集 jQuery对象和DOM对象 jQuery的优势与特点 Hello World! jQuery对象和DOM对 ...
- jQuery第一个孩子“这个”
本文翻译自:jQuery first child of "this" I'm trying to pass "this" from a clicked span ...
- jquery交换数组元素位置_跟我一起学jQuery——第一集
<锋利的JQuery>第二版阅读笔记-第一章 jQuery对象和DOM对象 想学习jQuery,首先要学会区分jQuery对象和DOM对象.1)jQuery对象是用jQuery类库的选择器 ...
- Jquery第一章基础、过滤、层次选择器第二节1/2
1. 基础选择器 Basics 1.根据标签名进行选择 var input_query=$("input"); 2.根据id值选取 var text11_query=$(" ...
- jQUery第一课(入门选择器)
思维导图 一.笔记: 1. jQuery是什么?jQuery是一个快速.简洁的JavaScript框架. ...
- jQuery 第一弹
jQuery目录 console.dir jQuery对象和DOM对象 jQuery对象和DOM对象转化 jQuery选择器 基础选择器 层级选择器 jq设置样式 隐式迭代 筛选选择器 筛选方法(重点 ...
- Jquery第一章表格新增功能课后练习第二节2/2
效果图: 源码: <!DOCTYPE html> <html lang="en"> <head><meta charset="U ...
- Jquery第一章环境的搭建和介绍第一节
jquery的优点 jquery体量小,加载速度快,其本身具有的功能使JavaScript应用程序开发人员的工作变得分外轻松.其中最大的亮点是卓越的DOM查询工具,该工具使用为人熟知的CSS选择器语法 ...
- jquery下载教程
jquery下载教程 建议使用google浏览器下载,不建议使用IE浏览器(没有办法生成.js文件,只能复制粘贴) 下载网址 https://docs.microsoft.com/en-us/aspn ...
- JQuery .each()向后
本文翻译自:JQuery .each() backwards I'm using JQuery to select some elements on a page and then move them ...
最新文章
- 【imx6】libipu.so.0说明
- SQL Server 2005,2008 正则表达式 替换函数应用详解
- 六、爬虫中重要的解析库xpath和BeautifulSoup
- C语言入门题-7-1 最大和最小 (10分)
- 2.6 特殊的矩阵和向量
- 一转眼,距 2021 竟然就不到 65 天了,你准备好了么?
- 虚拟机安装BackTrack 5 的教程详解!
- c语言一些简单的程序
- 光电隔离RS485典型电路
- Kde桌面程序启动器程序图标无法显示
- PIXHAWK上安装PX4Flow光流传感器及调试过程
- Tensorflow(八) —— Tensor的合并与切割
- 区块链学习笔记19——ETH难度调整
- sdp ddp内存怎么分_3600超到4266,阿斯加特洛极W3内存超频记录
- 【python爬虫】使用代理IP进行网站爬取
- 商机管理细化直击销售进展难点,激发销售业绩驱动企业规模化增长!
- c语言字符输出程序示例,C语言程序实例
- 电解电容为什么会爆炸?
- 量子纠缠实现高效率“提纯”
- CSS background(背景图片)详解