1、初识jQuery

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title>初始jQuery</title>
  <!--
  初识jQuery: 就是一个简洁的javaScript框架！ 设计理念： write less do more!
   
  使用jQuery: 引入需要的js库！
   
  jquery-1.8.3.js 开发版 便于阅读 200kb
  jquery-1.8.3.min.js 生产版 压缩了文件 100kb
  -->
  </head>
  <body>
   
  <div id="myDiv"></div>
  <a href="javascript:" onclick="changeDiv();" name="haha">点击改变div的背景</a>
   
   
   
  <!-- 引入需要的js库 必须位于第一个位置-->
  <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
  <script type="text/javascript" src="../js/01base.js"></script>
  <script type="text/javascript" src="../js/02function.js"></script>
   
  </body>
  </html>
   
  <!--
  window.onload 和 $(document).ready() 区别
  01.执行时机不同
  window.onload必须等待网页中所有的元素加载完毕，才会执行！
  $(document).ready()网页中的html结构加载完成之后就会执行，有可能图片，视频，音频还没有加载完毕！
  02. window.onload在页面中只能书写一次
  $(document).ready()可以书写N个
  03. window.onload没有简写方式
  $(document).ready() 简写方式是 $(function(){ })
  -->

2、显示和隐藏

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title>显示和隐藏</title>
   
  <style type="text/css">
  div{
  display: none; /*默认让所有的div隐藏*/
  }
  li{
  list-style: none;/*去掉li前面的标记*/
  }
   
  </style>
   
  </head>
  <body>
  <ul>
  <li>
  <a href="#">可爱的小猫咪1</a>
  <div><img src="../images/cat.jpg" height="50px" width="50px"/></div>
  </li>
  <li>
  <a href="#">可爱的小猫咪2</a>
  <div><img src="../images/cat.jpg" height="50px" width="50px"/></div>
  </li>
  <li>
  <a href="#">可爱的小猫咪3</a>
  <div><img src="../images/cat.jpg" height="50px" width="50px"/></div>
  </li>
  </ul>
   
  <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
  <script type="text/javascript" src="../js/03showAndHidden.js"></script>
   
   
  </body>
  </html>

3、html和text

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title>html和text</title>
  </head>
  <body>
   
  <div id="myDiv"></div>
   
  <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
  <script type="text/javascript" src="../js/04htmlAndText.js"></script>
   
  </body>
  </html>

4、链式操作

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title>链式操作</title>
   
  <style type="text/css">
  div{
  width: 50px;
  height: 50px;
  border: 1px solid red;
  }
  </style>
  </head>
  <body>
  <h1>标题</h1>
  <div>第2个盒子</div>
  <div>第3个盒子</div>
  <div>第4个盒子</div>
   
   
  <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
  <script type="text/javascript" src="../js/05link.js"></script>
  </body>
  </html>

5、动态增加类样式

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title>动态增加类样式</title>
   
  <style type="text/css">
  div{
  width: 50px;
  height: 50px;
  border: 1px solid red;
  }
  /*事先书写完毕*/
  .haha{
  background-color: pink;
  }
   
  </style>
  </head>
  <body>
  <div>第1个盒子</div>
  <div>第2个盒子</div>
  <div>第3个盒子</div>
  <div>第4个盒子</div>
   
  <script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script>
  <script type="text/javascript" src="../js/06addClass.js"></script>
   
   
   
   
  </body>
  </html>

6、Dom和jquery互换

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title>Dom和jquery互换</title>
  <!--
  所有通过js的getElement系列获取的对象！我们称之为DOM对象！
  那么这个DOM对象不可能用jquery中的方法！
  $("选择器")这种方式获取的对象！我们称之为jQuery对象！
  jQuery对象也不能使用DOM对象的方法！
  这两个对象 分别有 自己的一套方法！ 不能混用！ 除非转换成对应的对象！
  -->
  </head>
  <body>
   
   
  <div id="myDiv">第一个盒子</div>
  <div id="second">第2个盒子</div>
   
   
  <script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script>
  <script type="text/javascript" src="../js/07changeAll.js"></script>
  </body>
  </html>

7、over和enter的区别

<!DOCTYPE html>
  <head>
  <meta charset="UTF-8">
  </head>
  <body>
  <p>不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。</p>
  <p>只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。</p>
  <div class="over" style="padding:20px;width:40%;float:left">
  <h2 style="">被触发的 Mouseover 事件：<span></span></h2>
  </div>
  <div class="enter" style="padding:20px;width:40%;float:right">
  <h2 style="">被触发的 Mouseenter 事件：<span></span></h2>
  </div>
   
  <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
  <script type="text/javascript">
  x=0;
  y=0;
  $(document).ready(function(){
  $("div.over").mouseover(function(){
  $(".over span").text(x+=1);
  });
  $("div.enter").mouseenter(function(){
  $(".enter span").text(y+=1);
  });
  });
  </script>
   
  </body>
  </html>

JavaQuery的更多相关文章

  1. JavaQuery操作对象

    1.jQuery操作的分类 <!DOCTYPE html>   <html>   <head lang="en">   <meta cha ...

  2. JavaQuery选择器

    1.基本选择器 <!DOCTYPE html>   <html>   <head lang="en">   <meta charset=& ...

  3. Jquery学习笔记，全面实用,需要的可以留下邮箱，给大家发原稿文档

    JQuery 第一章:Jquery概念介绍 1.1 Jquery介绍 (1)并不是一门新语言.将常用的.复杂的操作进行函数化封装,直接调用,大大降低了使用JavaScript的难度,改变了使用Java ...

随机推荐

  1. 有用的JavaScript开发小建议

    这篇文章将向你分享一些不为人知的但很有用的JavaScript小建议,对那些刚涉及使用JavaScript编程语言的初级开发者应该有很大的帮助. 1. 用数组长度截取数组 我们都知道,对象都是通过使用 ...

  2. [转]天才计算机程序员 －－ fabrice bellard

    这位老兄就是用javascript写linux的那位,他的主页是:http://bellard.org/ 上面有他的几个作品,包括qemu,ffmpeg,tcc等. 这个世界从来不缺天才,只缺乏利用天 ...

  3. bzoj 1044 [HAOI2008]木棍分割（二分+贪心，DP+优化）

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=1044 [题意] n根木棍拼到一起,最多可以切m刀,问切成后最大段的最小值及其方案数. ...

  4. caffe的特殊层

    每次写博客都带有一定的目的,在我看来这是一个记录的过程,所以尽量按照循序渐进的顺序逐步写,前面介绍的CNN层应该是非常常用的,这篇博客介绍一下某些特殊的layer,但是由于特殊的layer都带有一定的 ...

  5. HDU 3065 病毒侵袭持续中 (AC自动机）

    题目链接 Problem Description 小t非常感谢大家帮忙解决了他的上一个问题.然而病毒侵袭持续中.在小t的不懈努力下,他发现了网路中的"万恶之源".这是一个庞大的病毒 ...

  6. 《区块链100问》第78集：EOS是什么？

    EOS是一个区块链开发平台,具有可扩展性强.支持大规模商业应用等特点. 首先,EOS采取DPoS共识算法及其他技术手段预期实现每秒百万级别交易请求,将能够支持数千个商业级的DAPPs. 以太坊是一条公 ...

  7. 使用ubifs格式的根文件系统

    配置内核,使其支持ubifs文件系统 1)Device Drivers  --->Memory Technology Device (MTD) support  --->UBI - Uns ...

  8. redis学习笔记之redis简介

    redis简介 Redis是一个开源的,高性能的,基于键值对的缓存与存储系统,通过设置各种键值数据类型来适应不同场景下的缓存与存储需求.同事redis的诸多高层级功能使其可以胜任消息队列,任务队列等不 ...

  9. C# 各种类型的转换

    /// <summary> /// 一些常用的方法 /// 1.一些高效的转换方法 /// </summary> public class Util { #region Obj ...

  10. 【写在NOIP前】

    快NOIP了,感觉自己得总结一下吧. 1.要自信啊,相信自己啊,我明明还是有些实力的是吧. 哪怕之前被教练怎么怼,自己别放弃啊 一定要注意心态吧,考试的时候怎么都不能慌,你不会的题也不会有多少人会做的 ...