jQuery
为了简化JavaScript的开发，一些JavaScript程序库诞生了。JavaScript程序库封装了很多预定义的对象和实用函数，能帮助使用者轻松地建立有高难度交互的页面，并且兼容各大浏览器。jQuery是什么:是一个JavaScript程序库。
为了简化JavaScript的开发，一些JavaScript程序库诞生了。JavaScript程序库封装了很多预定义的对象和实用函数，能帮助使用者轻松地建立有高难度交互的页面，并且兼容各大浏览器。jQuery是什么:是一个JavaScript程序库。
jQuery优势
1>轻量级，使用灵巧(只需引入一个js文件)
2>强大的选择器(模仿CSS选择器更精确、灵活)
3>出色的DOM操作的封装(动态更改页面样式/页面内容,添加、移除等)
4>可靠的事件处理机制(动态添加响应事件)
5>提供基本网页特效(提供已封装的网页特效方法)
6>完善的Ajax
7>易扩展、插件丰富
讲解$(function(){})
a. 是jQuery别名。如 ()也可jQuery()这样写,相当于页面初始化函数，当页面加载完毕，会执行jQuery()。
b. window.onload
$(window).load(function(){}) 类似于
(function())== (document).ready(function(){})
ready要比onload先执行
window.onload = function () {alert(‘onload’); }; $(document).ready(function() { alert(‘ready’);});
jQuery对象和DOM对象
1.JavaScript中的getElementsByTagName或者getElementById来获取元素节点。像这样得到的DOM元素就是DOM对象。DOM对象可以使用JavaScript中的方法
例如：var domObj = document.getElementById(“id”);//获得dom对象
varobjHtml = domObj.innerHTML;//使用js中的属性–innerHTML
\2. jQuery对象就是通过jQuery包装DOM对象后产生的对象。
jQuery对象是jQuery独有的。如果一个对象是jQuery对象，那么就可以使用jQuery里的方法。
例如：$(“#foo”).html();//获取id为foo的元素内的html代码，html()是jQuery中的方法，等同于document.getElementById(“foo”).innerHTML
jQuery对象和DOM对象的相互转换
DOM对象转成jQuery对象
对于一个DOM对象，只需要用 ()把DOM对象包装起来，就可以获得一个jQuery对象了。方式为 （DOM对象）。
var foo = document.getElementById(“foo”);
var foo= (foo);
jQuery对象不能使用DOM中的方法，但如果对jQuery对象所提供的方法不熟悉，或者jQuery没有封装想要的方法，不得不使用DOM对象的时候，有以下两种处理方法。
jQuery提供了两种方法将一个jQuery对象转换成DOM对象，即[index]和get（index）。
（1）jQuery对象是一个类似数组的对象，可以通过[index]的方法得到相应的DOM对象。
var foo= (“#foo”);
var foo = $foo[0];
（2）另一种方法是jQuery本身提供的，通过get(index)方法得到相应的DOM对象。
var foo= (“#foo”);
var foo = $foo.get(0);
### jQuery有哪些功能(API)
1>选择器
2>筛选（过滤器）
3>CSS
4>事件
5>效果
6>AJax
jQuery选择器
选择器是jQuery的根基，在jQuery中，对事件处理、遍历DOM和Ajax操作都依赖于选择器,jQuery的行为规则都必须在获取到元素后才能生效。
jQuery选择器分为：
基本选择器 ；
层级选择器 ；
常用伪类选择器: 可以看作是一种特殊的类选择符;
一、基本选择器
包括ID选择器，标签选择器，类选择器，通配选择器和组选择器5种
a. ID选择器：$(“#id”) 根据给定的ID匹配一个元素。
如果选择器中包含特殊字符，可以用两个反斜杠转义。
b. 标签选择器：$(“element”) 根据给定的元素名匹配所有元素
c. 类选择器：$(“.className”) 根据给定的类匹配元素。
d. 通配选择器：$(“*”) 匹配指定上下文中所有元素
e. 组选择器：$(“selector1,selector2,selectorN”)特点：无数量限制，以逗号分隔 (逐个匹配，并将匹配到的元素合并到一个结果内返回)
案例：
<h4 id="title"> 论语 </h4>
<div id="divDemo">子在川上曰：
<p class="pDemo">“逝者如斯夫！</p>
<p class="pDemo">不舍昼夜。”</p>
<p class="pDemo1">“逝者如斯夫！</p>
<p class="pDemo2">不舍昼夜。”</p>
</div>
1, 通过基本选择器获取并打印这首诗的标题
2, 将class为pDemo1的p元素的背景颜色设置为黄色
3, 将class为pDemo2的p元素的字体颜色设置为红色
4, 将class为pDemo的第一个p元素的字体大小设置为25px
5, 将所有文字的字体设置为”微软雅黑”
层级选择器
jQuery层级选择器—-包含后代选择器、子选择器、相邻选择器、兄弟选择器4种
a.包含选择器：$(“ab”)在给定的祖先元素下匹配所有后代元素。 (不受层级限制)
b.子选择器：$(“parent> child”) 在给定的父元素下匹配所有子元素
c.相邻选择器：$(“prev + next”) 匹配所有紧接在prev元素后的next元素。等同于next()方法
d.兄弟选择器：$(“prev~ siblings”) 匹配prev元素之后的所有sibling元素。等同于nextAll()方法
案例：
<!--包含选择器/子选择器/兄弟选择器/相邻选择器-->
<div class="main">
<span>1<img src="img/1.jpg"/> </span>
2<img src="img/1.jpg"/>
</div>
3<img src="img/1.jpg">
4<img src="img/1.jpg">
<div>
5<img src="img/1.jpg">
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(function(){
//$(".main img").css("border","5px solid red");
//$(".main > img").css("border","5px solid blue");
//$(".main + img").css("border","5px solid blue");
$(".main ~ img").css("border","5px solid blue");
});
</script>
伪类选择器：
选择器 说明
:first 匹配找到的第1个元素
:last 匹配找到的最后一个元素
:eq(index) 匹配一个给定索引值的元素
:even 匹配所有索引值为偶数的元素
:odd 匹配所有索引值为奇数的元素
:gt(index) 匹配所有大于给定索引值的元素
:lt(index) 匹配所有小于给定索引值的元素
:not 去除所有与给定选择器匹配的元素
鼠标事件：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
#box{
border: 1px;
width: 900px;
overflow: hidden;
margin: 0 auto;
}
p{
border: 1px solid black;
width: 60px;
height: 60px;
margin: 5px;
line-height: 60px;
text-align: center;
float: left;
box-sizing: border-box;
}
p:hover{
cursor: default;
}
.p_selected{
border: 0px;
}
</style>
<script type="text/javascript">
$(function(){
$('p:lt(10)').click(function(){
$('p').removeClass('p_selected');
$(this).addClass('p_selected');
})
$('p:nth-child(11)').click(function(){
var index = $('.p_selected').index() + 2;
console.log(index)
bat = 'p:nth-child(' + index + ')';
if(index>10){
alert("已经是最后一页了!");
$('p').removeClass('p_selected');
$('p:nth-child(10)').addClass('p_selected');
}else{
$('p').removeClass('p_selected');
$(bat).addClass('p_selected');
}
})
$('p:nth-child(12)').click(function(){
$('p').removeClass('p_selected');
$('p').eq(-3).addClass('p_selected');
})
})
</script>
</head>
<body>
<div id="box">
<p class="p_selected">1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
<p>下一页</p>
<p>尾页</p>
</div>
</body>
</html>
添加元素:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
table{
border:1px solid black;
}
td{
border: 1px solid black;
}
</style>
<script type="text/javascript">
$(function(){
$('button').click(function(){
$('table').append('<tr></tr>');
$('tr').last().append('<td>'+ $('#id').attr('value') + '</td>');
$('tr').last().append('<td>'+ $('#name').attr('value') + '</td>');
$('tr').last().append('<td>'+ $('#tel').attr('value') + '</td>');
$('tr').last().append('<td>删除</td>');
$('tr>td').last().click(function(){
$(this).parent().remove();
})
})
})
</script>
</head>
<body>
<div id="info">
ID:<input id='id' type="text" />
姓名:<input id='name' type="text" />
电话:<input id='tel' type="text" />
<button id='button'>提交</button>
</div><br />
<table>
<tr>
<td>Id</td>
<td>Name</td>
<td>Tel</td>
<td>操作</td>
</tr>
</table>
</body>
</html>
4621
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
