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. HDU 2095 find your present (2) 动态链表

    解题报告:输入一个n,后面紧跟着输入n个数,输入的这n个数中,除了有一个数的个数为奇数外,其它的数的个数都是偶数个,现在要你找出这个个数为奇数的这个数. 看起来好像很简单的样子,不过,这题的重点不在这 ...

  2. Java 8 Lambda表达式，让你的代码更简洁

    Lambda表达式是Java 8一个非常重要的新特性.它像方法一样,利用很简单的语法来定义参数列表和方法体.目前Lambda表达式已经成为高级编程语言的标配,像Python,Swift等都已经支持La ...

  3. python作业堡垒机(第十三周)

    作业需求: 1. 所有的用户操作日志要保留在数据库中 2. 每个用户登录堡垒机后,只需要选择具体要访问的设置,就连接上了,不需要再输入目标机器的访问密码 3. 允许用户对不同的目标设备有不同的访问权限 ...

  4. UNIX网络编程 第3章 套接字编程简介

    套接字结构类型和相关的格式转换函数

  5. 20155303 2016-2017-2 《Java程序设计》第十周学习总结

    20155303 2016-2017-2 <Java程序设计>第十周学习总结 目录 学习内容总结 网络编程 数据库 教材学习中的问题和解决过程 代码调试中的问题和解决过程 代码托管 上周考 ...

  6. linux系统时钟和硬件时钟不一致

    在做DB2 集群复制的时候要求两台主机时间相互一致. 但是在一台主机上系统时间和硬件时间相差12个小时左右:手动同步后,重启后又相差12个小时左右. 为什么会是这样的,先介绍下系统时钟和硬件时钟的区别 ...

  7. 正则表达式基础->

    描述:(grep) 正则表达式是一种字符模式,用于在查找过程中匹配指定的字符.在大多数程序里,正则表达式都被置于两个正斜杠之间,它匹配被查找的行中任何位置出现的相同模式 基础正则表达式 正则表达式 描 ...

  8. Android基于XMPP Smack Openfire下学习开发IM(一)实现用户注册、登录、修改密码和注销等

    http://blog.csdn.net/h7870181/article/details/8653865 以前学习过用Scoket 建立聊天,简单的建立聊天是没问题的,但如果要实现多人复杂的聊天,后 ...

  9. go语言项目汇总

    Horst Rutter edited this page 7 days ago · 529 revisions Indexes and search engines These sites prov ...

  10. 夜神模拟器调试android studio项目

    这几天为了android studio也是醉了,先是R文件丢失忙活一下午,各种百度谷歌,最后终于解决这个小问题,没想到在启动avd这个问题上更是棘手,网上的方法试了,主要有三种,上篇博文http:// ...