jquery入门学习01
Posted sihai_1991
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery入门学习01相关的知识，希望对你有一定的参考价值。
一:什么是jQuery？为什么要使用jQuery？
1.jQuery是一个优秀的实用javascript库，内部封装了很多实现的函数和对象.
2.jQuery是目标是：写少代码，做多事情，是相对于原始javascript+dom的方式而言.3.jQuery是开源的js实用库.
4.jQuery分为min版和非min版，min版适合真正发布Web应用，非min版适合学习使用.
5. jQuery在主流的浏览器中可以使用.
6. jQuery能够做dom能做的一切事情.
7. jQuery文档齐全，便用学习.
8. 提倡对每个元素节点设置一个id属性.
9. jQuery没有将所有的javascript进行封闭，jQuery只争对它所关注的领域进行封装.
二:jQuery的开发步骤？
1.$username.val() vs value属性
2.$username.html() vs innerHTML属性
3.个人代码约束
dom对象 inputElement inputText
jquery对象 $input inputText
4.开发步骤
1)在需要使用jquery技术的页面中（html/jsp)，通过<script>标签引用jquery库
2)使用jquery常用API（重点）
代码实现（jQuery体验入门）
jquery.jsp:
<head>
<title></title>
<!-- 引入js文件 -->
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
</head>
<body>
<input id="domID" type="button" value="dom的属性">
<input id="jqueryID" type="button" value="jquery的属性">
<div id="divID">哈哈</div>
</body>
<script type="text/javascript">
//dom方式获取value的属性值
var inputElement = document.getElementById("domID");
var inputText = inputElement.value;
alert(inputText);
//jquery方式获取value的属性值
var $input = $("#jqueryID");
var inputText = $input.val();
alert(inputText);
//获取div的内容
var $div = $("#divID");
var divText = $div.html();
alert(divText);
</script>三:DOM对象和jQuery对象相互转换
1）按照dom规则，通过javascript语法创建出来的对象，叫dom对象2）用jquery语法创建出来的对象，叫jquery对象。
3）jquery对象是对dom对象的封装，dom中大部份属性，在jquery封装后，都变化了方法，更加符合OO的设计规则
4）dom对象转成jquery对象 $(dom对象) 返回值：jquery对象
5）jquery对象可以看作是一个封装dom对象的数组，如果只有一个dom对象的话，下标位于0处
方式一:jquery对象[0] 返回值：dom对象
方式二:jquery对象.get(0) 返回值：dom对象
Dom对象转换成jquery对象：
dom2jquery.jsp
<head>
<title></title>
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
</head>
<body>
<input type="button" id="inputID" value="dom转成jQuery对象">
</body>
<script type="text/javascript">
//dom转成jQuery对象
//创建dom对象
var inputElement = document.getElementById("inputID");
//把dom对象转成jquery对象
var $input = $(inputElement);
//操作jQuery对象的API
var inputText = $input.val();
alert(inputText);
//jQuery转成dom对象
var inputElement = document.getElementById("inputID");
var $input = $(inputElement);
var inputText = $input.val();
alert(inputText);
</script>jquery对象转成dom对象的二种方式：
<body>
<div id="divID">hello jquery</div>
</body>
<script type="text/javascript">
//创建jquery对象
var div1 = $("#divID");
//jquery对象转成dom对象方法一
var divElement = div1[0];
var divText = divElement.innerHTML;
alert(divText);
</script><body>
<div id="divID">hello jquery</div>
</body>
<script type="text/javascript">
//jquery对象转成dom对象方法二
var div2 = $("#divID");
var divElement = div2.get(0);
var divText = divElement.innerHTML;
alert(divText);
</script>四:DOM操作与jQuery操作对错误的处理方式的比较
jquery定位元素节点有三种方式：
方式一：通过id，例如：$("#divID") --------- > getElementById("divID")
方式二：通过标签名，例如：$("div")------------> getElementsByTagName("div")方式三：通过样式名，例如：$(".oneClass")
代码体现如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>DOM操作与jQuery操作对错误的处理方式的比较</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
.oneClass
font-size: 44px;
color: red
</style>
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
</head>
<body>
<input type="text" id="usernameID" value="[这就是jQuery]" />
<div id="divID" class="oneClass">这是div中的内容</div>
<script type="text/javascript">
//通过"#id"定位<input>
//var $input=$("#usernameID");
//var inputText=$input.val();
//alert(inputText);
//通过"标签名"定位<input>
//var $input=$("input");
//var inputText=$input.val();
//alert(inputText);
//通过"样式名"定位<div>
//var $div=$(".oneClass");
//var divText=$div.html();
//alert(divText); <span style="font-family: Arial, Helvetica, sans-serif;"> </span>
<body>
<input type="text" id="inputID" value="这是jQuery"/>
<div id="divID" class="oneClass">这是div中的内容</div>
</body>
<script type="text/javascript">
//dom错误处理和jquery错误处理
//dom错误处理
var inputID = document.getElementById("inputID");
if(inputID != null)
var inText = inputID.value;
alert(inText);
else
alert("查无此元素节点!");
//jquery错误处理
var inputElement = $("#inputID");
var inputText = inputElement.val();
//alert(inputText);
</script>需要注意的是：jquery对象只能调用jquery对象的方法或属性，不能调用dom对象的方法或属性，反之一样。
五：jQuery九类选择器【在网页中获取你需要的节点(参见jQueryAPI.chm手册)】1）基本选择器
$("#div1ID")
$("div")
$(".myClass")
$("div,span,p")
$("#div1ID,.myClass,p")
<body>
<div id="div1ID">div1</div>
<div id="div2ID">div2</div>
<span class="myClass">span</span>
<p>p</p>
</body>
<script type="text/javascript">
//1)查找ID为"div1ID"的元素个数
//alert($("#div1ID").size());
//alert($("#div2ID").size());
//2)查找DIV元素的个数(标签名大小写不敏感，但id属性值大小写敏感)
//alert($("div").size());
//3)查找所有样式是"myClass"的元素的个数(标签名大小写不敏感，但class属性值大小写敏感)
//alert($(".myClass").size());
//4)查找所有DIV,SPAN,P元素的个数
//alert($("div,span,p").size());
//5)查找所有ID为div1ID,CLASS为myClass,P元素的个数
alert($("#div1ID,.myClass,p").size());
</script>
2）层次选择器
$("from input")祖先 后代$("form>input")父亲 孩子
$("form+input")第一个兄弟
$("form~input")所有兄弟
<body>
<form>
<input type="text" value="a"/>
<table>
<tr>
<td>
<input type="checkbox" value="b"/>
</td>
</tr>
</table>
</form>
<input type="radio" value="a"/>
<input type="radio" value="d"/>
<input type="radio" value="e"/>
</body>
<script type="text/javascript">
//1)找到表单form下[后代]所有的input元素的个数
//alert($("form input").size());
//2)找到表单form下所有的子级[第一级孩子]input元素个数
//alert($("form>input").size());
//3)找到表单form同级[兄弟]第一个input元素的value属性值
//alert($("form+input").val());
//4)找到所有与表单form同级[兄弟]的input元素个数
alert($("form~input").size());
</script>3）增强基本选择器
$("ul li:first")
$("ul li:last")
$(":checkbox:not(:checked)")找查所有未选中的复选框
$(":checkbox:checked")找查所有选中的复选框
$("table tr:even")，索引号为偶数
$("table tr:odd")，索引号为奇数
$("table tr:eq(0)"，从0开始
$("table tr:gt(1)"
$("table tr:eq(1)"
$(":header")
<body>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
<input type="checkbox" checked/>
<input type="checkbox" checked/>
<input type="checkbox"/>
<table border="1">
<tr><td>line1[0]</td></tr>
<tr><td>line2[1]</td></tr>
<tr><td>line3[2]</td></tr>
</table>
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<p>p</p>
<script type="text/javascript">
//1)查找UL中第一个元素的内容
//alert($("ul li:first").html());
//2)查找UL中最后个元素的内容
//alert($("ul li:last").html());
//3)查找所有未选中的input元素个数
//alert($(":checkbox:not(:checked)").size());
//4)查找表格的1、3、5...奇数行个数，索引号，从0开始
//alert($("table tr:even").size());
//5)查找表格的2、4、6...偶数行个数，索引号，从0开始
//alert($("table tr:odd").size());
//6)查找表格中第二行的内容，从索引号0开始
//alert($("table tr:eq(1)").html());
//7)查找表格中第二第三行的个数，即索引值是1和2，也就是比0大
//alert($("table tr:gt(0)").size());
//8)查找表格中第一第二行的个数，即索引值是0和1，也就是比2小
//alert($("table tr:lt(2)").size());
//9)给页面内所有标题<h1><h2><h3>加上红色背景色
//$(":header").css("color","red");
</script>4）内容选择器：
$("div:contains('John')")
$("p:empty")
$("div:has(p:has(span))")
$("p:parent")
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<style type="text/css">
.myClass
font-size:44px;
color:blue
</style>
</head>
<body>
<div><p>John Resig</p></div>
<div><p>George Martin</p></div>
<div>Malcom John Sinclair</div>
<div>J. Ohn</div>
<p></p>
<p></p>
<div></div>
<script type="text/javascript">
//1)查找所有包含文本"John"的div元素的个数
//alert($("div:contains('John')").size());
//2)查找所有p元素为空的元素个数
//alert($("p:empty").size());
//3)给所有包含p元素的div元素添加一个myClass样式
// alert($("div:has(p:has(span))").size());
//4)查找所有含有子元素或者文本的p元素个数,即p为父元素
alert($("p:parent").size());
</script>5）可见性选器
$("table tr:hidden")
$("table tr:visible")
<table border="1" align="center">
<tr style="display:none">
<td>Value 1</td>
</tr>
<tr>
<td>Value 2</td>
</tr>
<tr>
<td>Value 3</td>
</tr>
</table>
<script type="text/javascript">
//1)查找隐藏的tr元素的个数
//alert($("table tr:hidden").size());
//alert($("tr:hidden").size());
//2)查找所有可见的tr元素的个数
alert($("tr:visible").size());
</script>$("div[id]")
$("input[name='newsletter']")
$("input[name!='newsletter']")
$("input[name^='news']")
$("input[name$='letter']")
$("input[name*='letter']")
$("input[id][name$='letter']")
<div>
<p>Hello!</p>
</div>
<div id="test2"></div>
<input type="checkbox" name="newsletter" value="Hot Fuzz" />
<input id="myID" type="checkbox" name="newsletter" value="Cold Fusion" />
<input type="checkbox" name="newsaccept" value="Evil Plans" />
<script type="text/javascript">
//1)查找所有含有id属性的div元素个数
//alert($("div[id]").size());
//2)查找所有name属性是newsletter的input元素，并将其选中
//$("input[name='newsletter']").attr("checked","checked");
//3)查找所有name属性不是newsletter的input元素，并将其选中
//$("input[name!='newsletter']").attr("checked","checked");
//4)查找所有name属性以'news'开始的input元素，并将其选中
//$("input[name^='news']").attr("checked","checked");
//5)查找所有name属性以'letter'结尾的input元素，并将其选中
//$("input[name$='letter']").attr("checked","checked");
//6)查找所有name属性包含'news'的input元素，并将其选中
//$("input[name*='ws']").attr("checked","checked");
//7)找到所有含有id属性，并且它的name属性是以"letter"结尾的，并将其选中
$("input[id][name$='letter']").attr("checked","checked");
</script>7）子元素选择器：
$("ul li:first-child")
$("ul li:last-child")
$("ul li:only-child")
$("ul li:nth-child(1)")从1开始
<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
</ul>
<ul>
<li>Jack</li>
</ul>
<script type="text/javascript">
//1)迭代每个ul中第1个li元素中的内容,索引从1开始
//$("ul li:first")---size---1
//$("ul li:first-child")size---3
//$("ul li:first-child").each(function()
// //此时this表示<li>元素节点
// //将this这个dom对象转成jquery对象
// alert($(this).html());
//
//);
$("ul li:nth-child(2)").each(function()
alert($(this).html());
);
//2)迭代每个ul中最后1个li元素中的内容,索引从1开始
//$("ul li:last-child").each(function()
// alert($(this).html());
//);
//3)在ul中查找是唯一子元素的li元素的内容
//$("ul li:only-child").each(function()
// alert($(this).html());
//);
</script>8）表单选择器：
$(":input")
$(":text")
$(":password")
$(":radio")
$(":checkbox")
$(":submit")
$(":image")
$(":reset")
$(":button")
$(":file")
$(":input:hidden")
<form>
<input type="button" value="Input Button"/><br/>
<input type="checkbox" /><br/>
<input type="file" /><br/>
<input type="hidden" /><br/>
<input type="image" /><br/>
<input type="password" /><br/>
<input type="radio" /><br/>
<input type="reset" /><br/>
<input type="submit" /><br/>
<input type="text" /><br/>
<select><option>Option</option></select><br/>
<textarea></textarea><br/>
<button>Button</button><br/>
</form>
<script type="text/javascript">
//1)查找所有input元素的个数
//alert($(":input").size());
//2)查找所有文本框的个数
//alert($(":text").size());
//3)查找所有密码框的个数
//alert($(":password").size());
//4)查找所有单选按钮的个数
//alert($(":radio").size());
//5)查找所有复选框的个数
//alert($(":checkbox").size());
//6)查找所有提交按钮的个数
//alert($(":submit").size());
//7)匹配所有图像域的个数
//alert($(":image").size());
//8)查找所有重置按钮的个数
//alert($(":reset").size());
//9)查找所有普通按钮的个数
//alert($(":button").size());
//10)查找所有文件域的个数
//alert($(":file").size());
//11)查找所有input元素为隐藏域的个数
//alert($(":input:hidden").size());
alert($("input[type='hidden']").size());
</script>9）表单对象属性选择器：
$("input:enabled")
$("input:disabled")
$(":checkbox:checked")
$(":checkbox:not(:checked)")
$("select option:selected")
$("select option:selected")
<form>
<input name="email" disabled="disabled" />
<input name="password" disabled="disabled" />
<input name="id" />
<input type="checkbox" name="newsletter" checked="checked" value="Daily" />
<input type="checkbox" name="newsletter" value="Weekly" />
<input type="checkbox" name="newsletter" checked="checked" value="Monthly" />
<select>
<option value="1">北京</option>
<option value="2" selected="selected">广州</option>
<option value="3">上海</option>
</select>
</form>
<script type="text/javascript">
//1)查找所有可用的input元素的个数
//alert($("input:enabled").size());
//2)查找所有不可用的input元素的个数
//alert($("input:disabled").size());
//3)查找所有选中的复选框元素的个数
//alert($(":checkbox:checked").size());
//4)查找所有未选中的复选框元素的个数
//alert($(":checkbox:not(:checked)").size());
//5)查找所有选中的选项元素的个数
//alert($("select option:selected").size());
//6)查找所有选中的选项元素的内容
//alert($("select option:checked").html());
//alert($("select option:selected").html());
</script>六：jQuery中常用方法（上）【在网页中操作需要的节点】
1）val()：取得标签的value属性值
2）html()：取得标签之间的文本值
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<script type="text/javascript">
$("p").each(function()
//为每一个<p>元素节点添加单击事件
$(this).click(function()
//获取每一个<p>元素节点的内容
alert($(this).html());
)
);
</script>4）css("background-color","red")：设置背景色
5）css("color","red")：设置前景色，即字体色
<table border="1" align="center">
<tr>
<th>用户名</th>
<th>密码</th>
</tr>
<tr>
<td>张三</td>
<td>123456</td>
</tr>
<tr>
<td>李四</td>
<td>654321</td>
</tr>
<tr>
<td>王五</td>
<td>162534</td>
</tr>
</table>
<script type="text/javascript">
$("table tr:first").css("background-color","pink");
$("table tr:gt(0):odd").css("background-color","yellow");
$("table tr:gt(0):even").css("background-color","blue");
</script> 7）attr("checked","checked")
8）each(函数)
9）click(函数)
<input type="checkbox" value="篮球"/>篮球
<input type="checkbox" value="排球"/>排球
<input type="checkbox" value="羽毛球"/>羽毛球
<input type="checkbox" value="乒乓球"/>乒乓球
<input type="button" value="选中的个数"/>
<input type="button" value="迭代显示选中的value"/>
<script type="text/javascript">
$(":button:first").click(function()
alert($(":checkbox:checked").size())
);
$(":button:last").click(function()
$(":checkbox:checked").each(function()
alert($(this).val());
);
);
</script>以上是关于jquery入门学习01的主要内容，如果未能解决你的问题，请参考以下文章