关于java:jQuery

一、jQuery 概述
1、什么是 jQuery
jQuery：是一门轻量的、收费开源的 JS 函数库

document.getElementById(“user”).value
$(“#user”).val();
jQuery 能够极大地简化 JS 代码
jQuery 核心思想: 写的更少, 但做的更多

轻量的：一个框架或者技术对咱们我的项目的侵入水平是非常低的（反过来说，咱们的我的项目或代码对该技术的依赖水平是非常低的）

2、jQuery 劣势
1) 能够极大地简化 JS 代码
2) 能够像 CSS 选择器一样获取元素
3) 能够通过批改 CSS 款式来管制页面的成果
oDiv.style.backgroundColor = “red”;
$(“div”).css(“background-color”, “red”);
4) 能够兼容罕用浏览器(谷歌 / 火狐 / 苹果 / 欧朋)

3、如何引入 jQuery
jquery-1.8.3.js: 未压缩的(262kb), 学习或钻研或在我的项目上线之前
jquery-1.8.3.min.js: 压缩之后的(92kb), 我的项目上线

在 head 或 body 标签外部增加 script 标签, 通过 script 标签引入 jQuery 的函数库文件
<!– 引入 jQuery 的函数库文件 –>
<script src=”js/jquery-1.8.3.min.js”></script>

在引入 jQuery 函数库文件时，如果文件引入门路谬误，则会导致文件引入失败

var oDiv = jQuery(“#demo”);
var oDiv = $(“#demo”);
jQuery == $，因而, 调用 jQuery()函数等价于调用 $()函数

4、文档就绪事件函数
文档就绪事件函数: 该函数会在浏览器加载完所有的 html 元素后立刻执行
1、JS 提供的文档就绪函数:
window.onload = function(){
// 这里的代码会在浏览器加载完所有的 html 元素后立刻执行
}

2、jQuery 提供的文档就绪函数:
简写模式:
$(function(){

// 这里的代码会在浏览器加载完所有的 html 元素后立刻执行

})
残缺写法:
$(document).ready(function(){

// 这里的代码会在浏览器加载完所有的 html 元素后立刻执行

});

3、什么时候该用文档就绪事件函数?
如果要获取元素, 获取元素的代码执行时, 元素还没有被浏览器加载, 必定是获取不到的!
此时, 能够将获取元素的代码放在文档就绪事件函数中, 因为这个函数是在浏览器加载完所有的 html 元素后立刻执行, 此时所有元素都曾经被加载了, 在这个函数中获取任何元素都能够获取到!

只有获取元素的代码是在元素加载后执行, 就能够获取(不论应用什么形式!)

JS 的和 jQuery 的文档就绪事件函数，在执行时，jQuery 会更快，因为 jQuery 会在页面元素自身加载完就执行，如果元素里有内容，它是不加载的。jQuery 这个文档就绪事件函数能够写多个，然而 JS 的只能写一个。

二、jQuery 选择器
0、为元素绑定点击事件的几种形式：
形式一: 在元素上通过 onclick 属性为元素绑定点击事件
只有点击这个元素, 就会触发点击事件, 执行 testFn()函数

形式二: (JS)通过代码获取元素, 返回的是示意该元素的 JS 对象,
再通过【对象.onclick】属性为元素绑定点击事件。
只有点击这个元素, 就会触发点击事件, 执行前面的 function 函数
var oB1 = document.getElementById(“b1”);
oB1.onclick = function(){
alert(“JS:b1 按钮被点击了。。。”);
}
形式三: (jQuery)通过选择器获取元素, 返回的是示意该元素的 jQuery 对象,
再通过【对象.click】函数为元素绑定点击事件。
$(“#b1”).click(function(){
alert(“jQuery:b1 按钮被点击了。。。”);
} );

1、根本选择器

1)元素名选择器
    $("div") -- 匹配所有的 div 元素
    $("span") -- 匹配所有的 span 元素
2)class 选择器
    $(".mini") -- 匹配所有 class 值为 mini 的元素
    $("span.mini") -- 匹配所有 class 值为 mini 的 span 元素
    <span class="mini">...</span>
    <span class="mini">...</span>
    <div class="mini">...</div>
    <div class="mini">...</div>

3)ID 选择器

$("#one") -- 匹配 id 值为 one 的元素

4)多元素选择器

$("div,span,.mini,#one") -- 匹配所有的 div, 所有的 span, 以及所有 class 为 mini, 以及 id 值为 one 的元素

2、层级选择器
1) 后辈选择器

$("div span") -- 匹配所有 div 外部的 span 元素
$("#box1 input") -- 匹配 id 值为 box1 元素外部的所有 input 元素

2)相邻兄弟选择器
相邻兄弟: 如果两个元素是紧挨着, 并且具备雷同的父元素, 这两个元素就是相邻兄弟
能够通过相邻兄弟选择器选中前面紧邻的兄弟元素

$("#two+span") -- 匹配 id 值为 two 的元素前面紧邻的 span 兄弟元素
$("#two").next("span") -- 匹配 id 值为 two 的元素前面紧邻的 span 兄弟元素
$("#two").prev("span") -- 匹配 id 值为 two 的元素后面紧邻的 span 兄弟元素
-----------------------
<span>000</span>
<div id="#two"></div>
<span>111</span>
-----------------------
$("#two").nextAll() -- 匹配 id 为 two 的元素前面所有的兄弟元素
$("#two").nextAll("div") -- 匹配 id 为 two 的元素前面所有的 div 兄弟元素
$("#two").prevAll("div") -- 匹配 id 为 two 的元素后面所有的 div 兄弟元素
$("#two").siblings("div") -- 匹配 id 为 two 的元素前、后所有的 div 兄弟元素

3、根本过滤选择器
依据下标匹配元素:

$("div").eq(n) -- 示意匹配所有 div 中的第 n + 1 个 div 元素
$("div:eq(n)") -- 示意匹配所有 div 中的第 n + 1 个 div 元素

$("div:first") -- 匹配所有 div 中的第一个 div 元素
$("div").eq(0) -- 匹配所有 div 中的第一个 div 元素

$("div:last") -- 匹配所有 div 中的最初一个 div 元素
$("div").eq($("div").length-1 ) -- 匹配所有 div 中的最初一个 div 元素
$("div").eq(-1) -- 匹配所有 div 中的最初一个 div 元素

4、表单选择器

$(":input") -- 匹配所有的表单项元素(包含 input、select、textarea、button)
$(":text") -- 匹配所有一般文本输入框
$(":password") -- 匹配所有明码输入框
$(":radio") -- 匹配所有单选框
$(":checkbox") -- 匹配所有复选框
$(":radio:checked") -- 匹配所有被选中的单选框
$(":checkbox:checked") -- 匹配所有被选中的复选框

调错步骤:
1)按 f12, 看浏览器的控制台 (Console) 窗口中有没有谬误提醒
如果有, 依据错误信息进行排查!
2)也能够在程序中增加 debugger 断点!

三、
1、html 元素操作

(1)创立 html 元素
    $("<div></div>") -- 创立一个 div 元素, 返回一个 jQuery 对象
    $("<div> 这是一个 div 元素 </div>") -- 创立一个蕴含内容的 div 元素, 返回一个 jQuery 对象
    $("<input type='text'/>") -- 创立文本输入框, 返回一个 jQuery 对象

(2)增加子元素 — append()

$("body").append("<table><tr><td> 这是一个 td 元素 </td></tr></table>");
-- 往 body 中增加一个表格元素

var $div = $("<div> 这是一个 div 元素 </div>");
$("body").append($div) -- 往 body 中增加一个 div 元素

(3)删除元素 — remove()

$("div").remove() -- 删除所有匹配的 div 元素

(4)替换元素 — replaceWith()

$("div").replaceWith("<p> 我是来替换 div 的 p 元素!!</p>")

2、html 内容 及 值的操作

<div>div111</div>
<input type="text"/>
<select>...</select>

html()函数 — 获取元素的所有内容(包裹在开始标签和完结标签中的所有内容)

如果通过选择器匹配了多个元素, 只能获取第一个元素的内容
html()函还能够设置元素的内容, 如果通过选择器匹配了多个元素, 则会给所有元素设置内容
-- 在 js 中对应的是 innerHTML 属性

text()函数 — 获取元素中的所有文本内容(值获取文本, 不获取标签)

如果通过选择器匹配了多个元素, 能够将所有元素外部的文本都返回
text()函数还能够为元素的设置文本内容(只能设置文本)
-- 在 js 中对应的是 innerText 属性(这个属性在局部浏览器中不兼容)

val()函数 — 获取表单项元素的 value 值 或者是 为表单项元素设置 value 值

表单项元素: input/select/option/textarea

3、html 元素属性 或者 css 属性操作

<div name="aaa" style="border:2px solid red"></div>

prop()函数 — 获取元素的某一个属性值, 或者为元素设置属性值
attr() 函数 — 能够获取元素的属性值, 或者为元素设置属性值
prop() 和 attr()的区别:
(1) prop 函数是在 jquery1.6 版本之后才呈现, 用于获取或设置元素的属性 (固有属性) 值,

    比方: input 元素的 id,class,name,type 等属性都是固有属性
    比方: 为 input 指定一个 aaa 属性, 这个叫做自定义属性
attr 函数是在 jquery1.6 版本之前就有的函数, 用于获取或设置元素的属性 (自定义属性) 值

css()函数 — 能够获取或设置元素的 css 款式

4、动画函数
show() — 设置元素为显示状态 \, 等价于 css(“display”\, “block|inline”);
hide() — 设置元素为暗藏状态, 等价于 css(“display”, “none”);
toggle() — 切换元素的显示状态, 如果元素自身是显示的, 则会变成暗藏状态, 如果元素自身是暗藏的, 则会变成显示状态

slideToggle() — 切换元素的显示状态, 如果元素自身是显示的, 则会变成暗藏状态, 如果元素自身是暗藏的, 则会变成显示状态

5、parent()/parents()/find()
parent() — 获取以后元素的父元素, 相似于 js 中的 parentNode 属性
parents(“tr”) — 获取以后元素的所有的先人元素
$(“:checked”).parent().parent();
$(“:checked”).parents(“tr”)

find() — 获取以后元素外部指定的后辈元素
$(“div”).find(“span”) — 获取所有 div 元素外部的 span 元素
$(“div span”) — 获取所有 div 元素外部的 span 元素