一、什么是 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能做 ...

随机推荐

可以兼容ie6的纯CSS三级鼠标悬停显示/隐藏菜单实现
本来在chrome上用js写的好好的三级显隐菜单,放到ie6上一测试竟然奇葩般的会瞎闪.问题原因至今没参透,可能是我每次响应事件的处理代码过长??总之我是对ie6幻灭了,去网上搜一搜能支持ie6的下拉 ...
jquery 三元运算
三元运算: 条件 ? 条件为真取此值 : 条件为假取此值; var v = $(:check).prop('checked')?faule:true; $(:check).prop('checked ...
**利用列表和super实现有序字典
class MyDict(dict): def __init__(self): self.temp_list = [] super(MyDict,self).__init__() def __seti ...
Java Tutorial
http://www.tutorialspoint.com/java/index.htm
c3p0、dbcp和proxool比较
现在常用的开源数据连接池主要有c3p0.dbcp和proxool三种,其中: hibernate开发组推荐使用c3p0; spring开发组推荐使用dbcp(dbcp连接池有weblogic连接池同样 ...
How to map host ip and port to Hyper-V
1.1 Add an port proxy netsh interface portproxy add v4tov4 listenport=hostport listenaddres=ho ...
redis入门资源收集汇总
redis安装:http://www.redis.io/download redis命令测试平台:http://try.redis.io/ redis桌面管理工具:http://redisdeskto ...
A*搜索概念
启发式搜索:启发式搜索就是在状态空间中的搜索对每一个搜索的位置进行评估,得到最好的位置,再从这个位置进行搜索直到目标.这样可以省略大量无畏的搜索路径,提到了效率.在启发式搜索中,对位置的估价是十分重要 ...
pcl point merge
http://pointclouds.org/documentation/tutorials/pairwise_incremental_registration.php#pairwise-increm ...
[SoapUI] 在某个测试步骤下面增加Script Assertion，运用 messageExchange 获取response content
import com.eviware.soapui.support.GroovyUtils import com.eviware.soapui.support.XmlHolder import org ...

jQuery基础入门

一、什么是 jQuery

二、怎么用 jQuery

三、Jquery页面加载

四、 jquery的选择器

1、基本选择器（使用频率最大）

2、层级选择器

3、 基本过滤选择器

4、 属性选择器

5、表单选择器

jQuery基础入门的更多相关文章

随机推荐

热门专题

3、基本过滤选择器

4、属性选择器