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能做 ...
随机推荐
- C#操作并口
http://www.doc88.com/p-2794713468912.html http://blog.csdn.net/pengqianhe/article/details/8021072 ht ...
- Shiro异常处理总结
出自:https://blog.csdn.net/goodyuedandan/article/details/62420120 一.Spring MVC处理异常有3种方式: (1)使用Spring-M ...
- Python列表的生成
要生成list [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],我们可以用range(1, 11): >>> range(1, 11) [1, 2, 3, 4, 5, ...
- 深入探究jvm之GC的算法及种类
一.GC基本概念 GC(Garbage Collection)垃圾收集,1960年最早在List中使用.在Java中GC回收的对象是堆空间和永久区,可以有效避免程序员人为造成内存泄漏问题.将堆空间和永 ...
- Ajax 简单实例，其实就是js里面内容有些不同而已（转载）
这些时间,瞎子也看得见,AJAX正大踏步的朝我们走来.不管我们是拥护也好,反对也罢,还是视而不见,AJAX像一阵潮流,席转了我们所有的人. 关于AJAX的定义也好,大话也好,早有人在网上发表了汗牛充栋 ...
- kali linux：wireshark不能被root用户启用的解决方案
启动wireshark后,报错: 该界面提示在init.lua文件中使用dofile函数禁用了使用超级用户运行wireshark.这是因为wireshark工具是使用Lua语言编写的,并且在kali ...
- html学习代码
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
- $(window).load()和$(document).ready()
一.前言 我们在编写前端代码的js文件时,往往是会先写一个$(function(){}),然后才会在大括号里面继续写我们自己的代码.当时并不能理解为什么要添加这样一个东西,只是把它当做一个标签一样添加 ...
- vim的vim-addons的问题
最近急切想把vim变成IDE,这个过程的毕竟之路就是装插件,vim有自己的插件管理软件装起插件来相当方便,首先安装这个软件: sudo apt-get install vim-addon-manage ...
- [erlang 001] erlang中的错误及异常处理
一. erlang中的错误 1. 分类 1) 编译错误:主要是编译器检测出的代码语法错误: 2) 逻辑错误:是指程序没有完成预期的工作,属于开发人员的问题: 3) 运行时错误:是指erlang运行时抛 ...