一、重点问题
jquery 选择器查出的是一个集合
docoment id 查出的为具体标签
只要用jquery选择器查询出来的就是jquery的对象,jquery中装的是一个一个的document对象
js里面的事件前面都加on 而jquery则不带on
a链接默认有手型
设置手型 cursor: pointer;
在tomcat中root为默认项目
二、课堂知识
第一章 初识jQuery
- jQuery概述
jQuery是一个快速、简洁的JavaScript代码库。jQuery设计的宗旨是"Write Less,Do More",即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript操作方式,优化HTML文档操作、事件处理、动画设计和Ajax交互.
- jQuery的优势
- 轻量级
- 强大的选择器
- 出色的 DOM 操作的封装
- 可靠的事件处理机制+
- 完善的 Ajax
- 出色的浏览器兼容性
- 链式操作方式
- jQuery的环境配置
- 引入jQuery库文件
<script src="jquery-1.12.2.min.js"></script>
- CDN引入
CDN的全称是Content Delivery Network,即[内容分发网络](https://baike.baidu.com/item/内容分发网络/4034265), 使用户就近获取所需内容,降低网络拥塞,提高用户访问响应速度和命中率
1、百度CDN <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
2、新浪CDN <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
3、Google CDN <script src="http://ajax.google apis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
4、Microsoft CDN <script src="http://ajax.htmlnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js"></script>
- jQuery入门HelloWorld
<script type="text/javascript">
/**
* 当前页面全部加载完成之后在执行此方法
方式一
*/
$(function(){
alert("Hello jQuery!!!");
});
方式二
window.omload = function(){
}
方式三
$(document).ready(function(){
});
</script>
- jQuery对象
1、jQuery对象就是通过jQuery核心对象包装了DOM对象后产生的对象
2、jQuery对象是jQuery独有的.如果一个对象是jQuery对象,那么它就可以使用jQuery里的方法
3、jQuery 对象无法使用 DOM 对象的任何方法, 同样 DOM 对象也不能使用jQuery里的任何方法
4、jQuery的命名一般情况会在变量名称前加$
第二章 jQuery的选择器/以及CSS样式(jQuery文档使用)
- 实现内容的隔行换色
- HTML代码
<table border="1">
<thead>
<tr>
<th>收费单位</th>
<th>付款方式</th>
<th>结算方式</th>
<th>状态</th>
</tr>
</thead>
<tbody>
<tr><td>**教育xx分公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
<tr><td>**教育xx分公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
<tr><td>**教育xx分公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
<tr><td>**教育xx分公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
<tr><td>**教育xx分公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
<tr><td>**教育xx分公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
<tr><td>**教育xx分公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
</tbody>
</table>
- jQuery代码
$("tbody tr:even").css("background-color","red");
$("tbody tr:odd").css("background-color","green");
第三章 jQuery的DOM对象和jQuery对象的转换
<button id="btn">我是一个按钮</button>
//使用jQuery选择器获取jQuery对象
var $btn = $("#btn");
console.log($btn);
//将jQuery对象转换成DOM对象
console.log($btn[0]);//方式一
console.log($btn.get(0)); //方式二
//将DOM对象转成jQuery对象
console.log($($btn[0]));
第四章 jQuery节点创建
<table border="1"></table>
//创建<tr></tr>
var trEle = $("<tr></tr>");
var thEle1 = $("<th>ID</th>");
var thEle2 = $("<th>名字</th>");
var thEle3 = $("<th>性别</th>");
trEle.append(thEle1);
trEle.append(thEle2);
trEle.append(thEle3);
var trEle2 = $("<tr></tr>");
var tdEle1 = $("<td>1001</td>");
var tdEle2 = $("<td>张三</td>");
var tdEle3 = $("<td>男</td>");
trEle2.append(tdEle1);
trEle2.append(tdEle2);
trEle2.append(tdEle3);
console.log(trEle[0]);
$("table").append(trEle);
$("table").append(trEle2);
第五章 设置和获取HTML文本值(jQuery文档)
调用html text 方法 设置文本值
第六章 jQuery的事件函数
1、blur -> 失去焦点
2、click -> 单击事件
3、focus -> 获取焦点
4、mousemove -> 移到指定元素
5、mouseout -> 从指定元素移开
第七章 jQuery的效果
- 基本
1、show -> 展示 用jquery对象去调用
2、hide -> 隐藏 用jquery对象去调用
网友评论