1. /**
  2.  * Created by wyl on 15-3-4.
  3.  */
  4. //Jquery是一个JavaScrioe库，它极大的简化了JavaScript编程
  5. $(document).ready(function(){
  6.     $("p").click(function(){
  7.         $(this).hide();
  8.     });
  9. });
  10. /*
  11. Baidu CDN:
  12. <head>
  13. <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
  14. </script>
  15. </head>
  16.  
  17. 又拍云 CDN:
  18.  
  19. <head>
  20. <script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js">
  21. </script>
  22. </head>
  23.  
  24. 新浪 CDN:
  25. <head>
  26. <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">
  27. </script>
  28. </head>
  29.  
  30. Google CDN:
  31. <head>
  32. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
  33. </script>
  34. </head>
  35.  */
  36. /*
  37. jQuery 语法
  38. jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。
  39.  
  40. 基础语法： $(selector).action()
  41.  
  42. 美元符号定义 jQuery
  43. 选择符（selector）"查询"和"查找" HTML 元素
  44. jQuery 的 action() 执行对元素的操作
  45. 实例:
  46.  
  47. $(this).hide() - 隐藏当前元素
  48.  
  49. $("p").hide() - 隐藏所有段落
  50.  
  51. $("p .test").hide() - 隐藏所有 class="test" 的段落
  52.  
  53. $("#test").hide() - 隐藏所有 id="test" 的元素
  54.  */
  55.  
  56. //文档就绪事件写法一：
  57. $(document).ready(function(){
  58.     //Jquery method go here ......
  59. });
  60. //文档就绪事件写法一：
  61. $(function(){
  62.     //Jquery method go here ......
  63. });
  64.  
  65. //jQuery 中所有选择器都以美元符号开头：$()
  66. //Query 元素选择器基于元素名选取元素。
  67. $("p");
  68. $("h1");
  69. $("div");
  70.  
  71. //jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。
  72. //页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。
  73. //通过 id 选取元素语法如下：
  74. $("#test");
  75. $("#hello");
  76. //Query 类选择器可以通过指定的 class 查找元素。
  77. $(".test");
  78.  
  79. /*
  80. $("*")选取所有元素
  81. $(this)选取当前 HTML 元素
  82. $("p.intro")选取 class 为 intro 的 <p> 元素
  83. $("p:first")选取第一个 <p> 元素
  84. $("ul li:first")选取第一个 <ul> 元素的第一个 <li> 元素
  85. $("ul li:first-child")    选取每个 <ul> 元素的第一个 <li> 元素
  86. $("[href]")    选取带有 href 属性的元素在线实例
  87. $("a[target='_blank']")    选取所有 target 属性值等于 "_blank" 的 <a> 元素
  88. $("a[target!='_blank']"选取所有 target 属性值不等于 "_blank" 的 <a>
  89. $(":button")选取所有 type="button" 的 <input> 元素 和 <button> 元素
  90. $("tr:even")选取偶数位置的 <tr> 元素在线实例
  91. $("tr:odd")    选取奇数位置的 <tr> 元素
  92.  */
  93. //当单击时出现掩藏效果
  94. $(document).ready(function(){
  95.     $("div").click(function(){
  96.         $(this).hide();
  97.     });
  98. });
  99.  
  100. $(document).ready(function(){
  101.     $("p").click(function(){
  102.         $(this).hide();
  103.     });
  104. });
  105.  
  106. //当双击时出现掩藏效果
  107. $(document).ready(function(){
  108.     $("div").dblclick(function(){
  109.         $(this).hide();
  110.     });
  111. });
  112.  
  113. //当鼠标指针穿过元素时，会发生 mouseenter 事件。
  114. //mouseenter() 方法触发 mouseenter 事件，或规定当发生 mouseenter 事件时运行的函数：
  115. $(document).ready(function(){
  116.     $("p").mouseenter(function(){
  117.         alert("Funk you !");
  118.     });
  119. });
  120. //当鼠标指针离开元素时，会发生 mouseleave 事件。
  121. //mouseleave() 方法触发 mouseleave 事件，或规定当发生 mouseleave 事件时运行的函数：
  122. $(document).ready(function(){
  123.     $("#p1").mouseleave(function(){
  124.         alert("mouse leave");
  125.     }) ;
  126. });
  127.  
  128. //当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。
  129. //mousedown() 方法触发 mousedown 事件，或规定当发生 mousedown 事件时运行的函数：
  130. $(document).ready(function(){
  131.     $(".test").mousedown(function(){
  132.         alert("Fuck me !");
  133.     });
  134. });
  135.  
  136. //当在元素上松开鼠标按钮时，会发生 mouseup 事件。
  137. //mouseup() 方法触发 mouseup 事件，或规定当发生 mouseup 事件时运行的函数：
  138. $(document).ready(function(){
  139.     $("p").mouseup(function(){
  140.         alert("HEllo beybey!");
  141.     });
  142. });
  143.  
  144. //hover()方法用于模拟光标悬停事件。
  145. //当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。
  146. $(document).ready(function(){
  147.     $("ul").hover(function(){
  148.         alert("You enter p1");
  149.     }),
  150.         function(){
  151.             alert("Bey! you now leave p1");
  152.         }
  153. });
  154.  
  155. //当元素获得焦点时，发生 focus 事件。
  156. //当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。
  157. //focus() 方法触发 focus 事件，或规定当发生 focus 事件时运行的函数：
  158. $(document).ready(function(){
  159.     $("input").focus(function(){
  160.         $(this).css("backgrand_color","red");
  161.     });
  162.     $("input").blur(function(){
  163.         $(this).css("backgrand_color","green");
  164.     })
  165. });

JQuery自学代码---（一）的更多相关文章

  1. jQuery:自学笔记(5)——Ajax

    jQuery:自学笔记(5)——Ajax 使用Ajax快捷函数 说明 出于简化AJAX开发工作的流程,jQuery提供了若干了快捷函数. 实例 1.显示 test.php 返回值(HTML 或 XML ...

  2. jQuery:自学笔记(4)——事件与事件对象

    jQuery:自学笔记(4)——事件与事件对象 jQuery中的事件 什么是事件 所谓事件,就是被对象识别的操作,即操作对象队环境变化的感知和反应,例如单击按钮或者敲击键盘上的按键. 所谓事件流,是指 ...

  3. jQuery:自学笔记(1)——基础入门

    jQuery:自学笔记(1)——基础入门 认识JQuery 1.jQuery概述 jQuery是一个快速.小巧 .功能丰富的JavaScript函数库.它可以实现“写的少,做的多”的目标. jQuer ...

  4. HTML Select 标签选择后触发jQuery事件代码实例

    页面设计原由: 因为很多客户不知道如何来到我们公司,领导想让我在微信公众号上面做一个链接,客户可以直接通过微信公众号打开地图并导航到我们公司的办公地点. 实现起来并不难,但由于公司有很多办事处,所以需 ...

  5. jquery常用代码集锦

    1. 如何修改jquery默认编码(例如默认GB2312改成 UTF-8 ) 1 2 3 4 5 $.ajaxSetup({     ajaxSettings : {         contentT ...

  6. jQuery概述,代码举例及最新版下载

    jQuery是一个快速的,小巧的,具有强大功能的JavaScript库. 它的基本功能包括: 1)访问和操作DOM元素 2)控制页面样式(可以兼容各种浏览器) 3)对页面事件的处理 4)大量插件在页面 ...

  7. 电商网站jQuery放大镜代码

    分享一款电商网站jQuery放大镜代码.这是一款基于jquery.elevatezoom插件实现的类似淘宝放大镜代码,提供40多种参数,可自由配置多种效果,适合电商或图片类网站使用.效果图如下: 在线 ...

  8. jQuery:自学笔记(3)——操作DOM

    jQuery:自学笔记(3)——操作DOM 修改元素的属性 获取元素属性 设置元素属性 修改元素的内容 说明 有三种方式可以获取HTML元素的内容,分别是 ☐ text():设置或返回所选元素的文本内 ...

  9. jQuery:自学笔记(2)——jQuery选择器

    jQuery:自学笔记(2)——jQuery选择器 基本选择器 说明 jQuery的基本选择器与CSS的选择器相似: 实例 标签选择器 //使用标签选择器更改字体大小 $(div).css('font ...

随机推荐

  1. Maven Build Profiles--reference

    What is Build Profile? A Build profile is a set of configuration values which can be used to set or ...

  2. 神奇的 BlocksKit（1）：源码分析（下）

    私有类 _BKObserver _BKObserver 是用来观测属性的对象,它在接口中定义了 4 个属性: @property (nonatomic,readonly,unsafe_unretain ...

  3. EL表达式中的“+-x/”四种运算符和条件，比较运算符等

    <%@page import="cn.hncu.domain.User"%><%@ page language="java" import=& ...

  4. Java基础知识强化之IO流笔记42：IO流总结（图解）

    1. IO流总结(图解)

  5. iOS9.0之后不支持http请求解决方案

    打开info.plist文件,添加关键字 NSAppTransportSecurity 类型 Dictionary 在 NSAppTransportSecurity 下添加关键字 NSAllowsAr ...

  6. Yii框架页面运行流程

    Yii框架页面运行流程 CComponent | CModel | CActiveRecord.CFormModel(所有模型的父类) | 表名.php(模型) | 入口文件------------- ...

  7. hibernate篇章六--demo（0.准备工作）

    这个demo是学习自:学习不可已 这个章节我们先来说准备工作:Hibernate之第〇解之准备工作 首先: 1.新建java project--hibernate_demo_1: 2.新建src fo ...

  8. using(){},Close(),Dispose()的区别

    //用Close(),Dispose()方式关闭连接 string connString = "Data Source=(local);Initial Catalog=Linq;Integr ...

  9. JS操作CSS样式

    一.样式表(css) 使用样式表可以更好的显示WEB文档,也可以结合javascript从而实现很好的控制样式表. 样式(css)与内容(html): HTML是处理文档结构的,HTML可以实现如何把 ...

  10. 20151212jquery学习笔记--工具函数

    工具函数是指直接依附于 jQuery 对象,针对 jQuery 对象本身定义的方法,即全局性 的函数.它的作用主要是提供比如字符串.数组.对象等操作方面的遍历. 一．字符串操作 在 jQuery 中, ...