JQuery自学代码---（一）
/**
* 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自学代码---（一）的更多相关文章
- jQuery:自学笔记(5)——Ajax
jQuery:自学笔记(5)——Ajax 使用Ajax快捷函数 说明 出于简化AJAX开发工作的流程,jQuery提供了若干了快捷函数. 实例 1.显示 test.php 返回值(HTML 或 XML ...
- jQuery:自学笔记(4)——事件与事件对象
jQuery:自学笔记(4)——事件与事件对象 jQuery中的事件 什么是事件 所谓事件,就是被对象识别的操作,即操作对象队环境变化的感知和反应,例如单击按钮或者敲击键盘上的按键. 所谓事件流,是指 ...
- jQuery:自学笔记(1)——基础入门
jQuery:自学笔记(1)——基础入门 认识JQuery 1.jQuery概述 jQuery是一个快速.小巧 .功能丰富的JavaScript函数库.它可以实现“写的少,做的多”的目标. jQuer ...
- HTML Select 标签选择后触发jQuery事件代码实例
页面设计原由: 因为很多客户不知道如何来到我们公司,领导想让我在微信公众号上面做一个链接,客户可以直接通过微信公众号打开地图并导航到我们公司的办公地点. 实现起来并不难,但由于公司有很多办事处,所以需 ...
- jquery常用代码集锦
1. 如何修改jquery默认编码(例如默认GB2312改成 UTF-8 ) 1 2 3 4 5 $.ajaxSetup({ ajaxSettings : { contentT ...
- jQuery概述,代码举例及最新版下载
jQuery是一个快速的,小巧的,具有强大功能的JavaScript库. 它的基本功能包括: 1)访问和操作DOM元素 2)控制页面样式(可以兼容各种浏览器) 3)对页面事件的处理 4)大量插件在页面 ...
- 电商网站jQuery放大镜代码
分享一款电商网站jQuery放大镜代码.这是一款基于jquery.elevatezoom插件实现的类似淘宝放大镜代码,提供40多种参数,可自由配置多种效果,适合电商或图片类网站使用.效果图如下: 在线 ...
- jQuery:自学笔记(3)——操作DOM
jQuery:自学笔记(3)——操作DOM 修改元素的属性 获取元素属性 设置元素属性 修改元素的内容 说明 有三种方式可以获取HTML元素的内容,分别是 ☐ text():设置或返回所选元素的文本内 ...
- jQuery:自学笔记(2)——jQuery选择器
jQuery:自学笔记(2)——jQuery选择器 基本选择器 说明 jQuery的基本选择器与CSS的选择器相似: 实例 标签选择器 //使用标签选择器更改字体大小 $(div).css('font ...
随机推荐
- 从源码角度深入理解Toast
Toast这个东西我们在开发中经常用到,使用也很简单,一行代码就能搞定: 1: Toast.makeText(", Toast.LENGTH_LONG).show(); 但是我们经常会遇到这 ...
- Android（java）学习笔记155：如何让你的GridView不再滚动
GridView显示不完整的原因是因为,他的外层也套用了一个滑动的控件,这个解决办法是:重写GridView,是控制GridView不能滚动,就是写一个类继承GridView 代码如下: publ ...
- Asp.Net MVC 实用视频教程
[北盟学习BaMn.Cn] Asp.Net MVC 第01课--创建第一个项目.avi [北盟学习BaMn.Cn] Asp.Net MVC 第02课--自己建一个controller view.avi ...
- 安卓蓝牙技术Bluetooth使用流程（Bluetooth详解）
一:蓝牙设备之间的通讯首要包含了四个进程 设置蓝牙设备 寻觅局域网内也许或许匹配的设备 衔接设备 设备之间的数据传输 二:详细编程完结 1. 发动蓝牙功用 首要经过调用静态办法getDefaultAd ...
- 跨时钟域设计【一】——Slow to fast clock domain
跨时钟域设计是FPGA设计中经常遇到的问题,特别是对Trigger信号进行同步设计,往往需要把慢时钟域的Trigger信号同步到快时钟域下,下面是我工作中用到的慢时钟域到快时钟域的Verilog HD ...
- Java_Iterator-------迭代器配合Listarray使用，具有更多的功能（转载）
转载自:http://www.cnblogs.com/amboyna/archive/2007/09/25/904804.html 迭代器(Iterator) 迭代器是一种设计模式,它是一个对象,它可 ...
- Objective-C 成员变量的访问修饰即成员变量可见性解析
总体来说Objective-C的访问成员变量可见性和C++基本一样,只是多了个@package. 以下是详细说明: 例子: @interface CTPerson : NSObject { @priv ...
- Cesium的api之关于viewer(二)
1.构建一个viewer,如下创建:options的参数根据实际情况,进行设定 var viewer = new Cesium.Viewer('cesiumContainer', { //Start ...
- 互联网金融爬虫怎么写－第一课 p2p网贷爬虫（XPath入门）
版权声明:本文为博主原创文章,未经博主允许不得转载. 相关教程: 手把手教你写电商爬虫-第一课 找个软柿子捏捏 手把手教你写电商爬虫-第二课 实战尚妆网分页商品采集爬虫 手把手教你写电商爬虫-第三课 ...
- 一些简单的帮助类（2）-- JavaSctipt Array Linq
在日程工作中经常会遇到这样的问题 一个JS数组 我们要找出其中 一些符合要求的类容 又或者对数组里的类容求和求平均数之类的一般的做法是循环里面的类容做判断添加到一个新的集合里 var array = ...