JAVAWEB---JQurey

一、重点问题

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对象去调用