一、什么是 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基础入门的更多相关文章

  1. jQuery基础入门+购物车案例详解

    jQuery是一个快速.简洁的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是"write Less,Do More",即倡导写更少的代码,做更多 ...

  2. jQuery基础入门（二）

    jQuery 效果 显示和隐藏 在 jQuery 中可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素,以及使用 toggle() 方法能够切换 hide() 和 show() ...

  3. jQuery基础入门（一）

    jQuery是什么? jQuery是一个JavaScript常用的工具函数库.jQuery是一个轻量级的"写的少,做的多"的JavaScript库. jQuery当中包含有以下一些 ...

  4. jquery插件开发基础入门

    jquery插件开发基础入门 入门 编写一个jquery插件开始于给jquery.fn加入新的功能属性,此处添加的对象属性的名称就是你的插件名称 jQuery.fn,myPlugin = functi ...

  5. jQuery Mobile 入门基础教程

    jQuery Mobile是jQuery在手机上和平板设备上的版本.jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架. jQue ...

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

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

  7. jQuery基础知识总结

    1.  jQuery基本概念介绍             1.1 什么是jQuery 一个javascript库,把常用方法写到一个js文件中,需要的时候直接调用即可 学习jQuery就是学习一些方法 ...

  8. SpringMVC基础入门

    一.SpringMVC基础入门,创建一个HelloWorld程序 1.首先,导入SpringMVC需要的jar包. 2.添加Web.xml配置文件中关于SpringMVC的配置 1 2 3 4 5 6 ...

  9. Jquery基础教程第二版学习记录

    本文仅为个人jquery基础的学习,简单的记录以备忘. 在线手册:http://www.php100.com/manual/jquery/第一章:jquery入门基础jquery知识:jquery能做 ...

随机推荐

  1. C#中使用lockbits方法处理图像

    转自 使用lockbits方法处理图像(转) 许多图像处理任务即时是最简单的文件类型转换,例如从32位深度到8位深度的格式转化,直接获得像素阵列要比使用GetPixel和SetPixel等方法的效率高 ...

  2. 使用EXCEL绘制三维地图（超简单的五分钟绘制地图方法，妈妈再也不用担心我不会画地图啦~）

    博主为从区域规划转行地图学的小学渣一枚,最近处理数据希望对结果进行三维可视化,意外发现从小用到大的EXCEL可以绘制地图且功能非常强大,在这里做一下简单介绍,希望可以给看官提供些许帮助.那下面就开始吧 ...

  3. bootstrap 自定义

    在ror工程内 /app/assets/stylesheets/bootstrap_and_overrides.css.less 内覆盖内容 具体参数如下 https://github.com/twb ...

  4. Spring cloud Eureka高可用 - Windows 7 hosts文件立即生效

    hosts 文件所在位置 c:/windows/system32/drivers/etc/hosts 左下角 搜索框 搜索 cmd 弹出命令框 输入 ipconfig /displaydns 显示所有 ...

  5. Django 获取时间 和Linux 本地 系统时间 不一致

    问题描述 Django 中获取的本地时间 ,和系统时间不一致 错误原因 Django在配置文件settings.py 中 默认配置 UTC世界标准时间,而北京时间是东八区,比UTC时间早8个小时. T ...

  6. C++Primer笔记-----day02

    ====================================================================day02=========================== ...

  7. Javascript —— 有向图广度优先搜索

    用Javascript实现有向图的广度优先搜索 刚好遇到一个需求,对于一个有向图,指定一个节点 i 作为起点,输出从 i 出发,可以到达的所有节点,也就是图中以 i 作为起点的子连通片,思考了一下,可 ...

  8. [iOS]UIScrollView嵌套UITableView，超出屏幕的cell点击不了问题

    最初我是用UIScrollView嵌套了一个UIView,然后UIView里面嵌套UITableView,这样cell 就会超出屏幕那一部分点击不了. 解决方法如下,UITableView拖出来,作为 ...

  9. DAVINCI开发原理

    本文中约定: [host] 表示主机PC机Linux [target] 表示目标板Linux DAVINCI开发原理之一----ARM端开发环境的建立(DVEVM) 1. 对DAVINCI平台,TI在 ...

  10. 阿里巴巴Java开发规约扫描插件－Alibaba Java Coding Guidelines 在idea上安装使用教程

    经过247天的持续研发,阿里巴巴于10月14日在杭州云栖大会上,正式发布众所期待的<阿里巴巴Java开发规约>扫描插件!该插件由阿里巴巴P3C项目组研发.P3C是世界知名的反潜机,专门对付 ...