一: 前端:
HTML: 展示数据:
CSS: 美化页面:
JS: 添加动态的效果:
模拟对象:
var obj={};
function Person(){
}
new Person();
事件驱动:
脚本语言: 浏览器从上往下依次解析:
二:
1: 基本介绍: Jquery: js库, 对js的部分封装。
2: 优点:
a: write less do more
b: 坚决了浏览器的兼容性问题:
c: 提供了很详细的文档说明
d:提供了成熟的插件供客户选择;
…
3: 开发步骤:
(1) 导入外部的js库:
(2)开发页面:
a: 通过srcipt标签,将js库引入:
b: $(function(){ … });
二: js对象和jquery对象:
1:获得方式: 获得js对象:
document.getElementById();
//H5新添加的方法:
document.querySelector(“选择器”);
document.getElementsByName(“name”);//返回的是一个数组:
document.getElementsByTagName(“tagName”);
js对象: 只能使用js的方法和属性:
Ele.innerHTML;
Ele.val;
Ele.id;
2: 获得jquery对象:
$(“#idValue”); //能够获得一个jquery对象:
$(“HTML”); 通过标签选择器获得一个jquery对象:
$(“.classValue”);通过类选择器获得一个jquery对象:
3: js对象和jquery对象的相互转换:
a:jquery对象是对js对象的再次封装:
js—>jquery:
语法:
$(“js对象”);//获得一个jquery对象:
互相转换的代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.8.3.js">
</script>
<script type="text/javascript" src="../js/0-print.js">
</script>
</head>
<body>
<div id="div1">
这是一个盒子标签。22
</div>
<script>
/*
* 使用传统的方式获得div对象:
* document.getElementById("");
* divEle: js对象:
*
* js对象使用的是js的方法和属性:
*
*/
/*var divEle = document.getElementById("div1");
// var divEle2= document.querySelector("#div1");
alert(divEle2.innerHTML);*/
/*
* 通过jquery、获得:
*
*/
//这句话的意思: 获得了一个jquery对象: 使用jquery的方法和属性:
var $div= $("#div1");
//alert("jquery对象"+$div.html())
//获得一个js对象:
var divEle = document.getElementById("div1");
// 使用jquery对象的方法:
//js转换成jquery :
print("<br/>");
document.write($(divEle).text());
/*
* jquery---》js对象:
*/
var $div = $("div");//本质上是一个数组: 数组当中的某个元素就是js对象:
// $[idnex]; //js对象:
var divEle = $div[0];
//使用js对象的方方法和属性:
print("<hr/>");
print(divEle.innerHTML);
//方式二: $div对象:
var divEle3= $div.get(0);
print(divEle3.innerHTML);
</script>
</body>
</html>
b: jquery对象本身是一个数组, 数组当中封装了多个js对象:
只需要获得其中的某个元素, 就是一个js对象:
方式一:
$[index]; //获得一个js对象:
案例: $div[0];
方式二:
$.get(index); 使用了jquery的对象的方法, 获取数组当中的某个元素。
总结: 两种对象使用都比较频繁, 在实际开发的过程当中, 经常互相转换。
this: js对象: 只能js的方法和属性:
$(this); //获得了额一个jquery对象:
三: js对象和 jquery对象的区别:
(1)获得方式不同:
(2) js: 对象没有任何的提示信息:
jquery: 有合理的提示信息:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.8.3.js">
</script>
</head>
<body>
<input type="text" name="" id="input1" value="vvv" />
<script type="text/javascript">
//js形式:
//alert(document.getElementById("inputl").value);
//js文件当中存在错误, 不会提示任何的错误信息 : 浏览器的控制台可以调试:
// alert( $("#inputl").val()); //jquery对错误有一定的提示信息:
</script>
</body>
</html>
四: jquery 学习的重点:
a: 选择器:
b: jquery提供的API方法:
c: 事件
d: jquery 对ajax的封装:
五: 选择器:
a: 基本选择器:
b: 层级选择器:
c: 内容选择器:
几个骚操作的代码如下:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
</head>
<style type="text/css">
/* *代表所有的元素 */
*{
font-size:10px;
}
</style>
<body>
<div id="div1ID">div1</div>
<div id="div2ID">div2</div>
<span class="myClass">span</span>
<p>p</p>
<script type="text/javascript">
//1)查找ID为"div1ID"的元素个数 id
//alert( $("#div1ID").size());
//2)查找DIV元素的个数
// alert( $("div").size());
//3)查找所有样式是"myClass"的元素的个数
// alert( $(".myClass").size());
//4)查找所有DIV,SPAN,P元素的个数 //组合选择器:
// alert( $("span,div,p").size());
//5)查找所有ID为div1ID,CLASS为myClass,P元素的个数
alert( $("#div1ID,.myClass,p").size());
</script>
</body>
</html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
</head>
<body>
<input type="radio" value="z"/>
<input type="radio" value="e"/>
<input type="radio" value="y"/>
<form>
<input type="text" value="a"/>
<table>
<tr>
<td>
<input type="checkbox" value="b"/>
</td>
</tr>
</table>
</form>
<input type="radio" value="ccccccccc"/>
<input type="radio" value="d"/>
<input type="radio" value="e"/>
<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>
</body>
</html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
</head>
<body>
<ul>
<li> <p>list item 1 </p></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>
<tr><td>line3[4]</td></tr>
<tr><td>line3[3]</td></tr>
<tr><td>line3[5]</td></tr>
</table>
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<p>p</p>
<script type="text/javascript">
//1)查找UL中第一个LI元素的内容
//html()要用于html/jsp,不能用在xml 获得元素包括标签:
//text()既能用于html/jsp,且能用于xml text:只获得最里层的文本的内容:
// alert($("ul li:first").html()); // input value val();
// alert($("ul li:first").text());
//2)查找UL中最后个元素的内容
//alert($("ul li:last").text());
//4)查找表格的索引号为1、3、5...奇数行个数,索引号从0开始
// alert($("table tr:odd").size());
//5)查找表格的索引号为2、4、6...偶数行个数,索引号从0开始
// alert($("table tr:even").size());
//6)查找表格中第二行的内容,从索引号0开始,这是一种祖先 后代 的变化形式
//html():强调的是标签中的内容,即便标签中的子标签,也会显示出来
//text():强调的是标签中的文本内容,即便标签中的子标签,也只会显示出文本内容,不会显示子标签
// 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>加上红色背景色,且文字加蓝色
// alert($(":header").size());
// $(":header").css("background-color","red").css("color","blue");
//3)查找所有[未]选中的input为checkbox的元素个数
//获得所有的checkbox 对象:
//alert($(":checkbox").size());
//alert($(":checkbox:not(:checked )").size());
//
alert($("input:not(:checked )").size());
// body > table > tbody > tr:nth-child(6) > td
</script>
</body>
</html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.3.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>
<div></div>
<p></p>
<p></p>
<script type="text/javascript">
//1)查找所有包含文本"John"的div元素的个数
// :contains('文本的内容') 内容选择器在使用的时候, 不能有空格:
//alert($("div:contains('John')").size());
//2)查找所有p元素为空的元素个数
//alert($("p:empty").size());Malcom John Sinclair
J. Ohn
//3)给所有包含p元素的div元素添加一个myClass样式
//$("div:has(p)").addClass("myClass");
//4)查找所有含有子元素或者文本的p元素个数,即p为父元素
//alert( $("p:parent").size());
</script>
</body>
</html>
<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() );
//2)查找所有可见的tr元素的个数
//alert( $("table tr:NOT(:hidden)").size() );
alert( $("table tr:visible").size() );//提倡
</script>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<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" />
<!--
<input type="checkbox" name="letternews" value="Hot Fuzz"/>
<input id="myID" type="checkbox" name="letnewster" value="Cold Fusion" />
<input type="checkbox" name="accNEWSept" 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","true");
/*
请问:在JS中如下符号表示什么意思
1)=/==/===
2)!=/!==
明天讲解
*/
//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*='news']").attr("checked","checked");
//7)找到所有含有id属性,并且它的name属性是以"letter"结尾的input元素,并将其选中
$("input[id][name$='letter']").attr("checked","true");
</script>
</body>
</html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
</ul>
<ul>
<li>Marry</li>
</ul>
<ul>
<li>Jack</li>
</ul>
<script type="text/javascript">
/*1)迭代[each]每个ul中第1个li元素中的内容,索引从1开始
$("ul li:first-child").each(function(){
alert( $(this).text() );
});
*/
/*2)迭代每个ul中最后1个li元素中的内容,索引从1开始
$("ul li:last-child").each(function(){
alert( $(this).text() );
});
*/
/*4)迭代每个ul中第2个li元素中的内容,索引从1开始
$("ul li:nth-child(2)").each(function(){
alert( $(this).text() );
});*/
//3)在ul中查找是唯一子元素的li元素的内容
$("ul li:only-child").each(function(){
alert( $(this).text() );
});
</script>
</body>
</html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<form>
<input type="button" value="Input Button"/><br/>
<input type="checkbox" /><br/>
<input type="file" /><br/>
<input type="hidden" name="id" value="123"/><br/>
<input type="image" src="../images/lb.jpg" width="25px" height="25px"/><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() );//10,找input标签
//alert( $(":input").size() );//13,找input标签和select/textarea/button
//2)查找所有文本框的个数
//alert( $(":text").size() );
//3)查找所有密码框的个数
//alert( $(":password").size() );
//4)查找所有单选按钮的个数
//alert( $(":radio").size() );
//5)查找所有复选框的个数
//alert( $(":checkbox").size() );
//6)查找所有提交按钮的个数
//alert( $(":submit").size() );
//7)匹配所有图像域的个数
//alert( $(":images").size() );
//8)查找所有重置按钮的个数
//alert( $(":reset").size() );
//9)查找所有普通按钮的个数
//alert( $(":button").size() );
//10)查找所有文件域的个数
//alert( $(":file").size() );
//11)查找所有input元素为隐藏域的个数
//alert( $(":input:hidden").size() );
</script>
</body>
</html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<form>
<input type="text" name="email" disabled="disabled" />
<input type="text" name="password" disabled="disabled" />
<input type="text" 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 id="provinceID">
<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() );
alert( $("#provinceID option:NOT(:selected)").size() );
</script>
</body>
</html>