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. 10 款非常棒的CSS代码格式化工具推荐

    如果你刚开始学习CSS,这意味着你的很多代码或结构可能需要优化,比如你可能过多使用了类.添加了多余的间隔或空行等等,这将导致代码臃肿.混乱,可读性和执行效率将大大降低. 本文为你整理了几款CSS工具, ...

  2. SpringCloud微服务简介（一）

    Spring Cloud简单认识 微服务英文名称Microservice,Microservice架构模式就是将整个Web应用组织为一系列小的Web服务.这些小的Web服务可以独立地编译及部署,并通过 ...

  3. 最小主义：我的Musca桌面环境

    我现在有一个非常简单实用的桌面环境了:Musca + conky + trayer. 当然Musca运行时需要dmenu,其实也不是非dmenu不可,据说 dzen 也不错. 我现在用的是dmenu. ...

  4. 网摘关于BarCodeControl控件

    简介 BarCodeControl是一个用户制作条形码的控件. MicrosoftBarcodeControl9.0是可以在MicrosoftOfficeAccess窗体和报表中显示条码符号的Acti ...

  5. 汇编与C语句

    ---恢复内容开始--- 汇编与C语句 4.1C语句与汇编 学习了汇编语言之后,就需要将常用的C语言代码结构与相应的汇编语言联系起来.这样就可以在分析汇编语言的时候,明白它的意思.C语言中函数过程的调 ...

  6. [转]QVector与QByteArray——Qt的写时复制(copy on write)技术

    我们在之前的博文QVector的内存分配策略与再谈QVector与std::vector——使用装饰者让std::vector支持连续赋值中简单聊了聊QVector内存分配和赋值方面的一点东西,今天接 ...

  7. SQL 注入，永不过时的黑客技术

    SQL 注入,永不过时的黑客技术 TalkTalk的信息泄漏事件导致约15万人的敏感信息被暴露,涉嫌造成这一事件的其中一名黑客使用的并不是很新的技术.事实上,该技术的「年纪」比这名15岁黑客还要大两岁 ...

  8. 2016.6.17——Remove Duplicates from Sorted Array

    Remove Duplicates from Sorted Array 本题收获: 1.“删除”数组中元素 2.数组输出 题目: Given a sorted array, remove the du ...

  9. PATH变量重复

    命令: export PATH=$(echo $PATH | tr : "\n"| sort | uniq | tr "\n" :) Code: awk -F: ...

  10. html5学习之canvas

    Canvas画布 1.绘图方法 ctx.moveTo(x,y) 落笔ctx.lineTo(x,y) 连线ctx.stroke() 描边 ctx.beginPath(): 开启新的图层 演示: stro ...