JQuery（1）
来源：互联网 发布：可爱p图软件 编辑：程序博客网 时间：2024/05/17 04:18
一、JQuery是什么？
1.宗旨：写更少的代码，做更多的事。
2.轻量级框架，简洁的js库，使用户能够更方便的处理HTML、document、event实现动态效果，并且方便的为网站提供ajax交互。
3.最大的优势是它的文档说明很全，而且各种应用也说的很详细，同是还有许多成熟的插件可供选择。
二、JQuery案例
1.引入jQuery插件。
2.在jsp页面加入jquery-1.10.2.js
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><c:set var="path" value="${pageContext.request.contextPath}"></c:set><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>My JSP 'demo1.jsp' starting page</title> <script type="text/javascript" src="${path}/js/jquery-1.10.2.js"></script> <script type="text/javascript" > //1.先定义主函数（界面一加载就触发这个方法，而使用事件需要页面加载完成才能触发） //Jquery的主函数的含义在于把整个文档加载完毕再去执行主函数 //有两种方式： //1. $(document).ready(function{ //DOM对象 var div1 = document.getElementById("div1"); alert(div1); }); //2.（一般是用这种方式） $(function(){ //DOM对象 var div1 = document.getElementById("div1"); alert(div1); }) </script> </head> <body> <div id="div1"></div> </body></html>三.什么是JQuery对象 1.jQuery对象就是通过JQuery包装DOM对象后产生的对象。 2.JQuery对象是JQuery独有的。JQuery对象只能使用JQuery里的方法，DOM对象只能使用DOM里面的方法。 3.DOM对象转换成JQuery对象
$(DOM对象) 4.JQuery对象装换成DOM对象(Jquery对象其实是一个数组)
（1）JQuery对象[index]
（2）JQuery对象.get(index)
function myclick(){ //获取DOM对象 var myname = document.getElementById("myname"); //DOM对象转换成JQuery对象 var jq_myname = $(myname); alert(jq_myname.val()); //获取JQuery对象(jquery对象其实是一个数组) var jq_password = $("#password"); //把JQuery对象转换成DOM对象，两种方式： //1.jq_password[index] //var password = jq_password[0]; //2.jq_password.get(0) var password = jq_password.get(0); alert(password.value); }四.JQuery选择器
1.选择器是jquery的根基，在JQuery中，对事件处理，遍历DOM和Ajax操作都依赖与选择器。
2.选择器的优点：
写法简介：
$("#id")等价于document.getElementById("id");
$("tagName")等价于document.getElementByTagName("tagName")；
3.基本选择器
（1）id选择器：$("#id")，返回值 单个元素的组成的集合
（2）Element选择器：$("tagName")，返回值 集合元素。tagName其实就是HTML已经定义的标签元素例如div、input等。
（3）class选择器：$(".class"),返回值 集合元素。
（4）*：$("*"),返回值 集合元素，匹配所有元素。多用于结合上下文来搜索。
（5）selector1,selector2,…,selectorN：$("div,span,p.myClass"),返回值 集合元素。说明：将每一个选择器匹配到的元素合并后一起返回，可以指定任意多个选择器，并将匹配到的元素合并到一个结果中，其中p.myClass是表示匹配元素<p class="myClass"/>
注：
function myclick(){ //获取所有的input标签 var jq_input = $("input"); //得到每一个标签：不能使用普通for（）循环，需要使用each（） /* for(var i=0;i<jq_input.length;i++){ var curr_input = jq_input[i]; //jq_input[i]会将JQuery对象转换成DOM对象，就不能使用JQuery的方法 alert(curr_input.value); } */ //使用each jq_input.each(function(){ //获取每一个JQuery对象 var jq_obj = $(this);//this代表当前DOM对象 alert(jq_obj.val()); if(jq_obj.val()=="b"){ //each 返回false的时候就跳出循环 return false; } }); }4.层次选择器 如果想使用DOM元素之间的层次关系来获取元素，例如后代元素，子元素，相邻元素，兄弟元素等等，则使用层次选择器。 1.ancestor descendant：$("form input"),返回值 集合元素，在给定的祖先元素下匹配所有后代元素，与下边的$("form>input")区分 2.parent>child：$("form>input"),返回值 集合元素，在给定的父元素下匹配所有的子元素。 3.prev+next：$("label+next"),返回值 集合元素，匹配所有紧接在prev元素后的next元素。注意一定是紧跟的，其后不能是其他元素，否则寻找不到。 4.prev~siblings：$("form~input"),返回值 集合元素。匹配prev元素之后的所有同辈元素（不包含该元素和该元素之前的元素）。注：而JQuery方法siblings()与前后位置无关，只要同辈节点就可以选取。
function myclick(){ //1.只取得了form标签下的及其后代的所有input标签 /* var jq_input = $("form input"); alert(jq_input.length);//6 jq_input.each(function(){ var jq_obj = $(this); alert(jq_obj.val()); }); */ //2.只取得了form标签下子元素中的input标签 /* var jq_input = $("form>input"); alert(jq_input.length);//3 jq_input.each(function(){ var jq_obj = $(this); alert(jq_obj.val()); }); */ //3.只取得了id为div1标签后紧跟的input标签 /* var jq_input1 = $("#div1 + input"); alert(jq_input1.length);//0 jq_input1.each(function(){ var jq_obj = $(this); alert(jq_obj.val()); }); */ //4.只取得了class为form的标签后的所有兄弟元素中的input标签 /*var jq_input1 = $(".form ~ input"); alert(jq_input1.length);//2 jq_input1.each(function(){ var jq_obj = $(this); alert(jq_obj.val()); });*/ }5.过滤选择器 过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素，该选择器都以“：”开头。 按照不同的过滤规则，过滤选择器可以分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器。 （1）基本过滤选择器
1 ：first
$(“tr:first”);返回值 单个元素组成的集合 ，匹配找到的第一个元素
2 :last
$(“tr:last”);返回值 集合元素，匹配找到的最后一个元素
3 :not(selector)
$(“input:not(:checked)”);返回值 集合元素 ，去除所有与给定选择器匹配的元素，有点类似于“非”，意思是没有被选中的input（当input的type=“checked”）$("input:checked")//选中的
4 :even
$(“tr:even”);返回值 集合元素；匹配所有索引值为偶数的元素，从0开始计数，js的数组都是从0开始计数，所以table中的第一个tr就为偶数0.
5 :odd
$(“tr:odd”)返回值 集合元素；匹配所有索引值为奇数的元素，和：even对应。
6 :eq(index):$(“tr:eq(0)”);返回值 集合元素。匹配一个给定索引值的元素，eq(0)就是获取第一个tr元素。
7 :gt(index):$(“tr:gt(0)”);返回值 集合元素。匹配所有大于给定索引值的元素。
8 :lt(index):$(“tr:lt(2)”);返回值 集合元素。匹配所有小于给定索引值的元素。
$(function(){ //1.查询第一个tr标签 /* var jq_tr = $("tr:first"); alert(jq_tr.html()); */ //2.查询最后一个tr标签 /* var jq_tr = $("tr:last"); alert(jq_tr.html()); */ //3.查询没有被选中的标签 /* var jq_tr = $("input:not(:checked)"); alert(jq_tr.length); jq_tr.each(function(){ var jq_obj = $(this); alert(jq_obj.val()); }); */ /* var jq_tr = $("option:not(:selected)"); alert(jq_tr.length); jq_tr.each(function(){ var jq_obj = $(this); alert(jq_obj.val()); }); */ //4.查询td中所有的偶数标签 /* var jq_td = $("td:even"); alert(jq_td.length); jq_td.each(function(){ var jq_obj = $(this); alert(jq_obj.html()); }); */ //5.查询td中所有的奇数标签 var jq_td = $("td:odd"); alert(jq_td.length); jq_td.each(function(){ var jq_obj = $(this); alert(jq_obj.html()); }); //6.查询td中指定索引值的标签 /* var jq_td = $("td:eq(0)"); alert(jq_td.length); jq_td.each(function(){ var jq_obj = $(this); alert(jq_obj.html()); }); */ //7.查询td中大于指定索引值的标签 /* var jq_td = $("td:gt(0)"); alert(jq_td.length); jq_td.each(function(){ var jq_obj = $(this); alert(jq_obj.html()); }); */ //8.查询td中小于指定索引值的标签 var jq_td = $("td:lt(3)"); alert(jq_td.length); jq_td.each(function(){ var jq_obj = $(this); alert(jq_obj.html()); }); }); <table> <tr> <td>第一行第一列</td> <td>第一行第二列</td> <td>第一行第三列</td> </tr> <tr> <td>第二行第一列</td> <td>第二行第二列</td> <td>第二行第三列</td> </tr> <tr> <td>第三行第一列</td> <td>第三行第二列</td> <td>第三行第三列</td> </tr> </table> <input type="checkbox" value="足球" checked="checked">足球<br> <input type="checkbox" value="篮球">篮球<br> <input type="checkbox" value="网球">网球<br> <select> <option value="1" selected="selected">1</option> <option value="2">2</option> <option value="3">3</option> </select>全选 $("td input").attr("checked","checked");反选 $("td input").each(function(){ //获取属性状态 var checkedState = $(this).attr("checked"); if(checkedState == "checked"){ //移除 $(this).removeAttr("checked"); }else{ $(this).attr("checked","checked"); } }); （2）属性过滤选择器（自定义属性校验） 属性过滤选择器是通过元素的属性来获取相应的元素 1.[attribute]：$(“div[id]”);返回值 集合元素。匹配包含给定属性的元素，例子中选取所有带id属性的div标签。 2.[attribute=value]：$(“input[name=’newsletter’]”).attr(“checked”,true);返回值 集合元素。匹配给定的属性是某个特定值得元素，例子中选取了所有name属性值是newsletter的input元素。 3.[attribute!=value]：$(“input[name！=’newsletter’]”).attr(“checked”,true);返回值 集合元素。匹配所有包含指定的属性，且属性值不等于特定值的元素，此选择器相当于：not（[attr=value]）。 4.[attribute^=value]：$(“input[name^=’news’]”)；返回值 集合元素；匹配给定的属性是以某些值开始的元素。 5.[attribute 6.[attribute*=value]：$(“input[name*=’man’]”);返回值 集合元素；匹配给定属性是以包含某些值得元素。 7.[attributeFilter1][attributeFilter2][attributeFilterN]：$(“input[id][name=’man’]”)返回值 集合元素。
复合属性选择器需要同时满足多个条件是使用。
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><c:set var="path" value="${pageContext.request.contextPath}"></c:set><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>属性过滤选择器</title> <script type="text/javascript" src="${path}/js/jquery-1.10.2.js"></script> <script type="text/javascript"> $(function(){ }); function myclick(){ //1.匹配所有input标签中包含ID属性的标签 /* var jq_inputId = $("input[id]"); alert(jq_inputId.length); jq_inputId.each(function(){ var jq_curr = $(this); alert(jq_curr.val()); }); */ //2.匹配所有input标签中包含ID属性且属性值为password的标签 /* var jq_inputId = $("input[id='password']"); alert(jq_inputId.length); jq_inputId.each(function(){ var jq_curr = $(this); alert(jq_curr.val()); }); */ //3.匹配所有input标签中包含type属性，且属性值不为checkbox //var jq_inputId = $("input[type!='checkbox']"); /* var jq_inputId = $("input:not([type='checkbox'])"); alert(jq_inputId.length); jq_inputId.each(function(){ var jq_curr = $(this); alert(jq_curr.val()); }); */ //4.匹配所有input标签中type属性值以ch开头的标签 /* var jq_inputId = $("input[type^='ch']"); alert(jq_inputId.length); jq_inputId.each(function(){ var jq_curr = $(this); alert(jq_curr.val()); }); */ //5.自定义属性选择器校验 var jq_inputId = $("input[reg]"); alert(jq_inputId.length); jq_inputId.each(function(){ var val = $(this).val(); var reg = $(this).attr("reg"); var tip = $(this).attr("tip"); //校验 var regExp = new RegExp(reg); if(!regExp.test(val)){ alert(tip); } }); //6.匹配input标签属性type中以box结尾的标签 /* var jq_inputId = $("input[type$='box']"); alert(jq_inputId.length); alert(jq_inputId.length); jq_inputId.each(function(){ var jq_curr = $(this); alert(jq_curr.val()); }); */ //7.匹配input标签属性type中包含d字母的标签 /* var jq_inputId = $("input[type*='d']"); alert(jq_inputId.length); jq_inputId.each(function(){ var jq_curr = $(this); alert(jq_curr.val()); }); */ //7.复合属性选择器 /* var jq_inputId = $("input[type*='d'][value][name='sex']"); alert(jq_inputId.length); jq_inputId.each(function(){ var jq_curr = $(this); alert(jq_curr.val()); }); */ } </script> </head> <body> <div id="div1"></div> <form action="" class="form"> 用户名：<input type="text" id="myname" reg="^\d{6,8}$" tip="请输入6到8位数字"><br> 密码：<input type="password" id="password" reg="^\w{6,8}$" tip="请输入6到8位字母"><br> <div> <input type="checkbox" value="篮球">篮球<br> <input type="checkbox" value="足球">足球<br> <input type="checkbox" value="网球">网球<br> </div> <input type="button" value="提交" onclick="myclick()"> </form> <input type="radio" value="男" name="sex">男<input type="radio" value="女" name="sex">女<br><br> 简介：<textarea></textarea> </body></html> （3）子元素过滤选择器 1 :nth-child( index/even/odd/rquation)：$(“ul li:nth-child(2)”);返回值 集合元素；匹配其父元素下的第N个或者奇偶元素，与基本过滤中的eq()有些类似，不同的地方就是eq()从0开始，而这一个从1开始。 2 :first-child：$(“ul li:first-child”); 返回值 集合元素。匹配第一个子元素。 3 :last-child：$(“ul li:last-child”);返回值 集合元素。匹配最后一个子元素。 4 :only-child：$(“ul li:only-child”);返回值 集合元素。如果某个元素是父元素中唯一的子元素，那么就会被匹配，如果父元素中含有其他的元素，那就不会被匹配。意思就是只有一个子元素才会被匹配。
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><c:set var="path" value="${pageContext.request.contextPath}"></c:set><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>属性过滤选择器</title> <script type="text/javascript" src="${path}/js/jquery-1.10.2.js"></script> <script type="text/javascript"> $(function(){ }); function myclick(){ //1.nth-child( index/even/odd/rquation)匹配其父元素下的第N个或者奇偶元素(从1开始) /* var js_input = $("ul li:nth-child(2)"); alert(js_input.html()); */ //2.first-child匹配第一个子元素。 /* var js_input = $("ul li:first-child"); alert(js_input.html()); */ //3.last-child匹配第一个子元素。 /* var js_input = $("ul li:last-child"); alert(js_input.html()); */ //3.only-child如果该元素是父元素中唯一一个元素，则被匹配。 var js_input = $("ul li:only-child"); alert(js_input.html()); } </script></head><body> <ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> <li>列表项4</li> </ul> <input type="button" value="点击" onclick="myclick()"/></body></html> 例子1.给所有的p标签添加onclick()事件
<title>给所有p标签添加onclick事件</title> <script type="text/javascript" src="${path}/js/jquery-1.10.2.js"></script> <script type="text/javascript"> //一般不选用这种方式 /* var myclick = function(){ alert("0"); } */ $(function(){ /* $("p").attr("onclick","myclick()"); */ $("p").click(function(){ alert($(this).html()); }); }); </script> 例子2隔行变色
$("ul li:even").css({background:"green",color:"red"}); 例子3输出选中多选框的个数
function myclick(){ var count = $("input:checked").length; alert(count); }- jquery 插件（六） jquery UI(1)
- jquery 插件（六） jquery UI(1)
- jQuery细讲（1）：jQuery对象
- 1、jQuery基础（jQuery构造器）
- jQuery（1）--入口模块jQuery()
- 使用 jQuery （1）
- jquery 性能（1）
- jquery 学习（1）
- jQuery（1）
- JQuery------技巧（1）
- jQuery 选择器（1）
- JQuery技术（1）
- Jquery选择器（1）
- jquery 总结（1）
- jquery总结（１）
- Jquery使用（1）
- jQuery学习心得（1）
- jquery笔记（1）
- android自定义异常日志收集器
- openvswitch使用手册
- python分布式rpc框架zerorpc安装及使用教程
- 斐波那契数列及系列问题
- 集合操作
- JQuery（1）
- Spring AOP 四大通知
- 第一个HTML程序
- ImageView中XML属性src和background的区别
- 数据仓库概述
- dll的def文件与__declspec(dllexport)导出函数方式比较
- Linux下安装chromium
- ln: 创建符号链接 “include/asm”: 不支持的操作
- html5canvas:教你实现知乎登录动态粒子背景
