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. jQuery代码实现表格内容可编辑修改

    1.效果及功能说明 表格特效制作jquery表格可编辑任意修改里面的数值,是一种比较人性化的用户设计体验方式 2.实现原理 通过点击事件来触发跳出一个输入框可以在里面输入当这个输入框失去焦点后就把,所 ...

  2. Grep学习笔记

    Grep(Global search Regular Expression and Print out the line)是一种强大的文本搜索工具. 1. 正则表达式的基本组成部分 正则表达式 描述 ...

  3. 20155227 2016-2017-2 《Java程序设计》第四周学习总结

    20155227 2016-2017-2 <Java程序设计>第四周学习总结 教材学习内容总结 继承 继承 继承是Java程序设计语言面向对象的又一重要体现,允许子类继承父类,避免重复的行 ...

  4. cin.get()和cin.getline()之间的区别

    cin.getline()和cin.get()都是对输入的面向行的读取,即一次读取整行而不是单个数字或字符,但是二者有一定的区别. cin.get()每次读取一整行并把由Enter键生成的换行符留在输 ...

  5. http、https 等 常用默认端口号

    ⑴. HTTP协议代理服务器常用端口号:80/8080/3128/8081/9080⑵. SOCKS代理协议服务器常用端口号:1080⑶. FTP(文件传输)协议代理服务器常用端口号:21⑷. Tel ...

  6. iptables详细设置

    1.安装iptables防火墙 怎么知道系统是否安装了iptables?执行iptables -V,如果显示如: iptables v1.3.5 说明已经安装了iptables. 如果没有安装ipta ...

  7. linux arm的存储分布那些事之一【转】

    转自:http://blog.csdn.net/xiaojsj111/article/details/11724081 linux arm的存储分布那些事之一 linux arm 内存分布总览 上图是 ...

  8. Android Bander设计与实现 - 设计

    Binder Android IPC Linux 内核 驱动 摘要 Binder是Android系统进程间通信(IPC)方式之一.Linux已经拥有管道,system V IPC,socket等IPC ...

  9. 二、springcloud之熔断器hystrix

    一.背景 雪崩效应 在微服务架构中通常会有多个服务层调用,基础服务的故障可能会导致级联故障,进而造成整个系统不可用的情况,这种现象被称为服务雪崩效应.服务雪崩效应是一种因“服务提供者”的不可用导致“服 ...

  10. IP地址、域名、域名解析系统相关

    IP地址(Internet Protocol Address) 它来自TCP/IP协议,存在于其中的IP层,用于实现不同计算机之间的通信,类似于门牌号. 设计之处,IP地址是准备给地球上每一台计算机一 ...