jQuery基础入门
一、什么是 jQuery
Jquery它是javascript的一个轻量级框架，对javascript进行封装，它提供了很多方便的选择器。供你快速定位到需要操作的元素上面去。还提供了很多便捷的方法。
二、怎么用 jQuery
jquery-1.8.3.js：一般用于学习阶段。
jquery-1.8.3.min.js：用于项目使用阶段
注：Jquery它是一个库(框架)，要想使用它，必须先引入！
在<head>标签中引入代码：
<script src="../../js/jquery-1.8.3.js"></script>
例：获取元素----------------$(“#id”);
Jquery函数的使用-------$(function(){});
三、Jquery页面加载
注：在js给的onload只能赋一个值，如果对此赋值，后面的讲覆盖前面的。
在就Query ready可以使用多次，多个页面加载将依次执行。
四、 jquery的选择器
1、基本选择器（使用频率最大）
- id选择器：$(“#id名称”);
- 元素选择器：$(“元素名称”);
- 类选择器：$(“.类名”);
- 通配符：* -----所有的元素
- 多个选择器共用(并集)
代码演练：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>基本选择器</title>
<link rel="stylesheet" href="../../css/style.css" />
<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
<script>
$(function(){
$("#btn1").click(function(){
$("#one").css("background-color","pink");
}); $("#btn2").click(function(){
$(".mini").css("background-color","pink");
}); $("#btn3").click(function(){
$("div").css("background-color","pink");
}); $("#btn4").click(function(){
$("*").css("background-color","pink");
}); $("#btn5").click(function(){
$("#two,.mini").css("background-color","pink");
});
});
</script> </head>
<body>
<input type="button" id="btn1" value="选择为one的元素"/>
<input type="button" id="btn2" value="选择样式为mini的元素"/>
<input type="button" id="btn3" value="选择所有的div元素"/>
<input type="button" id="btn4" value="选择所有元素"/>
<input type="button" id="btn5" value="选择id为two并且样式为mini的元素"/>
<hr/>
<div id="one">
<div class="mini">
111
</div>
</div> <div id="two">
<div class="mini">
222
</div>
<div class="mini">
333
</div>
</div> <div id="three">
<div class="mini">
444
</div>
<div class="mini">
555
</div>
<div class="mini">
666
</div>
</div> <span id="four"> </span>
</body>
</html>
2、层级选择器
- ancestor descendant: 在给定的祖先元素下匹配所有的后代元素(儿子、孙子、重孙子)
- parent > child : 在给定的父元素下匹配所有的子元素(儿子)
- prev + next: 匹配所有紧接在 prev 元素后的 next 元素(紧挨着的，同桌)
- prev ~ siblings: 匹配 prev 元素之后的所有 siblings 元素(兄弟)
代码演练：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>层级选择器</title>
<link rel="stylesheet" type="text/css" href="../../css/style.css"/>
<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
$("body div").css("background-color","gold");
}); $("#btn2").click(function(){
$("body>div").css("background-color","gold");
}); $("#btn3").click(function(){
$("#two+div").css("background-color","gold");
}); $("#btn4").click(function(){
$("#one~div").css("background-color","gold");
});
});
</script> </head>
<body>
<input type="button" id="btn1" value="选择body中的所有的div元素"/>
<input type="button" id="btn2" value="选择body中的第一级的孩子"/>
<input type="button" id="btn3" value="选择id为two的元素的下一个元素"/>
<input type="button" id="btn4" value="选择id为one的所有的兄弟元素"/> <hr/>
<div id="one">
<div class="mini">
111
</div>
</div> <div id="two">
<div class="mini">
222
</div>
<div class="mini">
333
</div>
</div> <div id="three">
<div class="mini">
444
</div>
<div class="mini">
555
</div>
<div class="mini">
666
</div>
</div> <span id="four"> </span>
</body>
</html>
3、 基本过滤选择器
$('li').first() 等价于：$(“li:first”)
代码演练：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>基本过滤选择器</title>
<link rel="stylesheet" href="../../css/style.css" type="text/css"/>
<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
<script>
$(function(){
$("#btn1").click(function(){
$("body div:first").css("background-color","red");
}); $("#btn2").click(function(){
$("body div:last").css("background-color","red");
}); $("#btn3").click(function(){
$("body div:odd").css("background-color","red");
}); $("#btn4").click(function(){
$("body div:even").css("background-color","red");
});
});
</script> </head>
<body>
<input type="button" id="btn1" value="body中的第一个div元素"/>
<input type="button" id="btn2" value="body中的最后一个div元素"/>
<input type="button" id="btn3" value="选择body中的奇数的div"/>
<input type="button" id="btn4" value="选择body中的偶数的div"/> <hr/>
<div id="one">
<div class="mini">
111
</div>
</div> <div id="two">
<div class="mini">
222
</div>
<div class="mini">
333
</div>
</div> <div id="three">
<div class="mini">
444
</div>
<div class="mini">
555
</div>
<div class="mini">
666
</div>
</div> <span id="four"> </span>
</body>
</html>
Normal
0
7.8 磅
0
2
false
false
false
EN-US
ZH-CN
X-NONE
/* Style Definitions */
table.MsoNormalTable
{mso-style-name:普通表格;
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-priority:99;
mso-style-parent:"";
mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
mso-para-margin:0cm;
mso-para-margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:10.5pt;
mso-bidi-font-size:11.0pt;
font-family:"Calibri","sans-serif";
mso-ascii-font-family:Calibri;
mso-ascii-theme-font:minor-latin;
mso-hansi-font-family:Calibri;
mso-hansi-theme-font:minor-latin;
mso-bidi-font-family:"Times New Roman";
mso-bidi-theme-font:minor-bidi;
mso-font-kerning:1.0pt;}
4、 属性选择器
代码演练：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>层级选择器</title>
<link rel="stylesheet" href="../../css/style.css" />
<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
<script>
$(function(){
$("#btn1").click(function(){
$("div[id]").css("background-color","red");
}); $("#btn2").click(function(){
$("div[id='two']").css("background-color","red");
}); });
</script> </head>
<body>
<input type="button" id="btn1" value="选择有id属性的div"/>
<input type="button" id="btn2" value="选择有id属性的值为two的div"/> <hr/>
<div id="one">
<div class="mini">
111
</div>
</div> <div id="two">
<div class="mini">
222
</div>
<div class="mini">
333
</div>
</div> <div id="three">
<div class="mini">
444
</div>
<div class="mini">
555
</div>
<div class="mini">
666
</div>
</div> <span id="four"> </span>
</body>
</html>
5、表单选择器
代码演练：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单选择器</title> </head>
<body>
<input type="button" id="btn1" value="选择所有input元素" />
<input type="button" id="btn2" value="选择文本框" />
<br/>
<form>
<input type="text" /><br />
<input type="checkbox" /><br />
<input type="radio" /><br />
<input type="image" /><br />
<input type="file" /><br />
<input type="submit" />
<input type="reset" /><br />
<input type="password" /><br />
<input type="button" /><br />
<select><option/></select><br />
<textarea></textarea><br />
<button></button>
</form>
</body>
</html>
jQuery基础入门的更多相关文章
- jQuery基础入门+购物车案例详解
jQuery是一个快速.简洁的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是"write Less,Do More",即倡导写更少的代码,做更多 ...
- jQuery基础入门（二）
jQuery 效果 显示和隐藏 在 jQuery 中可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素,以及使用 toggle() 方法能够切换 hide() 和 show() ...
- jQuery基础入门（一）
jQuery是什么? jQuery是一个JavaScript常用的工具函数库.jQuery是一个轻量级的"写的少,做的多"的JavaScript库. jQuery当中包含有以下一些 ...
- jquery插件开发基础入门
jquery插件开发基础入门 入门 编写一个jquery插件开始于给jquery.fn加入新的功能属性,此处添加的对象属性的名称就是你的插件名称 jQuery.fn,myPlugin = functi ...
- jQuery Mobile 入门基础教程
jQuery Mobile是jQuery在手机上和平板设备上的版本.jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架. jQue ...
- jQuery:自学笔记(1)——基础入门
jQuery:自学笔记(1)——基础入门 认识JQuery 1.jQuery概述 jQuery是一个快速.小巧 .功能丰富的JavaScript函数库.它可以实现“写的少,做的多”的目标. jQuer ...
- jQuery基础知识总结
1. jQuery基本概念介绍 1.1 什么是jQuery 一个javascript库,把常用方法写到一个js文件中,需要的时候直接调用即可 学习jQuery就是学习一些方法 ...
- SpringMVC基础入门
一.SpringMVC基础入门,创建一个HelloWorld程序 1.首先,导入SpringMVC需要的jar包. 2.添加Web.xml配置文件中关于SpringMVC的配置 1 2 3 4 5 6 ...
- Jquery基础教程第二版学习记录
本文仅为个人jquery基础的学习,简单的记录以备忘. 在线手册:http://www.php100.com/manual/jquery/第一章:jquery入门基础jquery知识:jquery能做 ...
随机推荐
- Rhythmk 一步一步学 JAVA (17):Servlet 文件上传
1.环境 : JDK 1.6 , Tomcat 7.0 2.第三方类库: commons-fileupload-1.3.1.jar commons-io-2.4.jar 3.web.xml配置: &l ...
- 太白老师day6 1.代码块 2.is==id 3.小数据池
1.代码块: 一个模块一个函数一个类,一个文件都是代码块 在交互模式下, 每一行都是一个代码块 2. is == 内存地址 就是id门牌号 在内存中id是唯一,如果两个变量指向的id相同,那么他们在内 ...
- 阻塞IO,非阻塞IO,异步IO和非异步IO 的区别
最近在研究java IO.NIO.NIO2(或者称AIO)相关的东西,有些概念还是要明确下. 按照<Unix网络编程>的划分,IO模型可以分为:阻塞IO.非阻塞IO.IO复用.信号驱动IO ...
- shell 脚本的坑
最近都在写shell脚本,免不了遇到每个新手都要填的坑,在这里简单记录一下. test语句的坑 test语句在shell脚本里用的非常多,像if语句后面的其实都是test语句,也是新手最容易遇到坑的地 ...
- IOS 键盘的显示与关闭
在每一个IOS应用中,几乎不可避免的要进行文本输入操作,例如要求用户填写登陆注册信息,进行话题的评论回复,等等.用到的文本输入组件有UITextField,UITextView,对于这两个组件的相关属 ...
- 面试------Android 版本之前的差异（常见，欢迎补充）。
不管你技术如何,只要背点这个,能忽悠倒一片.. 1.WebView JS漏洞 ,Android4.2之前 ,解决办法,不用addJavascriptInterface,webchrome的onJsPr ...
- jsp table td自动换行
<TABLE style="word-wrap: break-word; word-break: break-all;">
- SpringBoot整合ActiveMQ快速入门
Spring Boot 具有如下特性: 为基于 Spring 的开发提供更快的入门体验 开箱即用,没有代码生成,也无需 XML 配置.同时也可以修改默认值来满足特定的需求. 提供了一些大型项目中常见的 ...
- C#根据url生成唯一的key
根据url生成唯一的idkey,记录并分享: public class UrlToUniqueKey { ); , ] { { 0L, 0L }, { -4611686018427387904L, - ...
- 使用 XML-RPC 为 C++ 应用程序启用 Web 服务
http://www.ibm.com/developerworks/cn/webservices/ws-xml-rpc/ 引言 Internet 现在的受欢迎程度越来越高,由于这个原因及其固有的优势, ...