/**

 * Created by wyl on 15-3-4.

 */

//Jquery是一个JavaScrioe库，它极大的简化了JavaScript编程

$(document).ready(function(){

    $("p").click(function(){

        $(this).hide();

    });

});

/*

Baidu CDN:

<head>

<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">

</script>

</head>

又拍云 CDN:

<head>

<script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js">

</script>

</head>

新浪 CDN:

<head>

<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">

</script>

</head>

Google CDN:

<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">

</script>

</head>

 */

/*

jQuery 语法

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

基础语法： $(selector).action()

美元符号定义 jQuery

选择符（selector）"查询"和"查找" HTML 元素

jQuery 的 action() 执行对元素的操作

实例:

$(this).hide() - 隐藏当前元素

$("p").hide() - 隐藏所有段落

$("p .test").hide() - 隐藏所有 class="test" 的段落

$("#test").hide() - 隐藏所有 id="test" 的元素

 */

//文档就绪事件写法一：

$(document).ready(function(){

    //Jquery method go here ......

});

//文档就绪事件写法一：

$(function(){

    //Jquery method go here ......

});

//jQuery 中所有选择器都以美元符号开头：$()

//Query 元素选择器基于元素名选取元素。

$("p");

$("h1");

$("div");

//jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。

//页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。

//通过 id 选取元素语法如下：

$("#test");

$("#hello");

//Query 类选择器可以通过指定的 class 查找元素。

$(".test");

/*

$("*")选取所有元素

$(this)选取当前 HTML 元素

$("p.intro")选取 class 为 intro 的 <p> 元素

$("p:first")选取第一个 <p> 元素

$("ul li:first")选取第一个 <ul> 元素的第一个 <li> 元素

$("ul li:first-child")    选取每个 <ul> 元素的第一个 <li> 元素

$("[href]")    选取带有 href 属性的元素在线实例

$("a[target='_blank']")    选取所有 target 属性值等于 "_blank" 的 <a> 元素

$("a[target!='_blank']"选取所有 target 属性值不等于 "_blank" 的 <a>

$(":button")选取所有 type="button" 的 <input> 元素 和 <button> 元素

$("tr:even")选取偶数位置的 <tr> 元素在线实例

$("tr:odd")    选取奇数位置的 <tr> 元素

 */

//当单击时出现掩藏效果

$(document).ready(function(){

    $("div").click(function(){

        $(this).hide();

    });

});

$(document).ready(function(){

    $("p").click(function(){

        $(this).hide();

    });

});

//当双击时出现掩藏效果

$(document).ready(function(){

    $("div").dblclick(function(){

        $(this).hide();

    });

});

//当鼠标指针穿过元素时，会发生 mouseenter 事件。

//mouseenter() 方法触发 mouseenter 事件，或规定当发生 mouseenter 事件时运行的函数：

$(document).ready(function(){

    $("p").mouseenter(function(){

        alert("Funk you !");

    });

});

//当鼠标指针离开元素时，会发生 mouseleave 事件。

//mouseleave() 方法触发 mouseleave 事件，或规定当发生 mouseleave 事件时运行的函数：

$(document).ready(function(){

    $("#p1").mouseleave(function(){

        alert("mouse leave");

    }) ;

});

//当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。

//mousedown() 方法触发 mousedown 事件，或规定当发生 mousedown 事件时运行的函数：

$(document).ready(function(){

    $(".test").mousedown(function(){

        alert("Fuck me !");

    });

});

//当在元素上松开鼠标按钮时，会发生 mouseup 事件。

//mouseup() 方法触发 mouseup 事件，或规定当发生 mouseup 事件时运行的函数：

$(document).ready(function(){

    $("p").mouseup(function(){

        alert("HEllo beybey!");

    });

});

//hover()方法用于模拟光标悬停事件。

//当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。

$(document).ready(function(){

    $("ul").hover(function(){

        alert("You enter p1");

    }),

        function(){

            alert("Bey! you now leave p1");

        }

});

//当元素获得焦点时，发生 focus 事件。

//当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。

//focus() 方法触发 focus 事件，或规定当发生 focus 事件时运行的函数：

$(document).ready(function(){

    $("input").focus(function(){

        $(this).css("backgrand_color","red");

    });

    $("input").blur(function(){

        $(this).css("backgrand_color","green");

    })

});

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. Java基础知识强化之IO流笔记50：IO流练习之 复制多级文件夹的案例

    1. 复制多级文件夹的案例 需求:复制多级文件夹       数据源:E:\JavaSE\day21\code\demos     目的地:E:\   分析:         A:封装数据源File ...

  2. UIPickerView(选择器)

    UIPickerView也是一个选择器控件,它比UIDatePicker更加通用,它可以生成单列的选择器,也可生成多列的选择器,而且开发者完全可以自定义选择项的外观,因此用法非常灵活. UIPicke ...

  3. 基于u盘安装centos6.0

    本人在dell笔记本上尝试安装centos6.0,与win7形成双系统,安装过程如下: 1.使用ultraliso制作u盘启动盘,启动盘以centos6.0的映像文件为源头制作: 2.制作完成后,删除 ...

  4. 【转】小议Bug敏感度---Bug敏感度的故事（一）

    在测试圈中,相信大家对“Bug敏感度”这一词并不陌生,但是Bug敏感度具体是指什么呢,本文对此关键词进行解读的基础上,对其与软件质量的关系,影响的关键因素,如何提高测试人员的bug敏感度进行分享.(- ...

  5. 纯js写图片轮播插件

    最近终于写成了自己创作的图片轮播插件,使用原生js编写.与目前网上流行的轮播插件相比,功能和效果稍弱,但是使用起来相当方便. 先看html代码 <!DOCTYPE html> <ht ...

  6. python中关于正则表达式四

    []   用来暗示一个字符串集合, 1.在这个集合中:字符串可以被 独特列出,例如[amk]将会匹配'a','m'或者'k'. 2.字符串的范围可以被暗示通过给两个字符串和分开它们用一个'-':例如[ ...

  7. 实战突击： Java Web项目整合开发(PDF)

    实战突击:  Java  Web项目整合开发(PDF)

  8. MySQL中的datetime与timestamp比较

    引用:http://database.51cto.com/art/200905/124240.htm TIMESTAMP列的显示格式与DATETIME列相同.换句话说,显示宽度固定在19字符,并且格式 ...

  9. 初尝 Perl

    本文将阐述以下几方面内容: 1.什么是Perl 2.Perl有什么用 3.Windows 下的Perl环境搭建 4.Perl 版Hello World 5.Perl 语法梗概 6.一些参考资料 什么是 ...

  10. Google Android SDK开发范例------------20141119

    一.Edit和Checkbox完成对登陆密码的查看:添加Edit的setOnCheckedChageListener和对CheckBox的状态通过isCHecked判断 大体代码如下 CheckBox ...