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. 【bzoj题解】1001 狼抓兔子

    题目描述 现在小朋友们最喜欢"喜羊羊与灰太狼",话说灰太狼抓羊不到,但抓兔子还是比较在行的,而且现在的兔子还比较笨,它们只有两个窝,现在你做为狼王,面对下面这样一个网格的地形:   ...

  2. PHP 生成、识别二维码及安装相关扩展/工具

    2018-02-20 00:30:26  更新:推荐新扩展(极力推荐) 这篇文章里用的两个二维码扩展都有些问题和麻烦:phpqrcode(生成二维码)的源码有点小 bug: 而 php-zbarcod ...

  3. .net开源框架开源类库（整理）

    源:http://www.cnblogs.com/chinanetwind/p/3715809.html 常用库 Json.NET https://github.com/JamesNK/Newtons ...

  4. Django集成Xadmin list index out of range报错解决方案

    return self.render(context) File "C:\Python36\lib\site-packages\django\template\defaulttags.py& ...

  5. Mac下破解intellij IDEA 2018

    一.在进入下面网站下载破解补丁 http://idea.lanyus.com/ 二.在“应用程序”中找到已经安装的IntelliJ IDEA,在app上右键,选择“显示包内容”,如下图: 将下载的破解 ...

  6. Flask：文件配置方式实践及其中的各种问题记录

    Windows 10家庭中文版,Python 3.6.4,Flask 1.0.2, 提示: 1.请查看本文后面的“18-07-17  11:18重大纠正” ! 2.flask run命令运行时传入参数 ...

  7. ggplot2使用初探

    ggplot2已经成为了R语言中数据可视化的同义词, 这是一个强大的工具, 可以帮助我们制作优良的图表, 创造出令人吃惊的图片, 下面我们一起学习(本博文参考了知乎问题如何使用 ggplot2中黄宝臣 ...

  8. win10 操作配置备忘

    让程序自动启动 如果想要实现应用程序在所有的用户登录系统后都能自动启动,就把该应用程序的快捷方式放到"系统启动文件夹"里: C:\ProgramData\Microsoft\Win ...

  9. 练习题 --- 10种Xpath定位

    写出10种不同的Xpath定位语法

  10. 奇妙的CSS之伪类与伪元素

    我们都知道,在CSS中有很多选择器,例如id(#), class(.),属性[attr],这些虽然可以满足一些需要,但有时候还力有未逮.伪类和伪元素就提供了一个有益的补充,可以使我们更高效编码.伪类和 ...