JavaScript-JQuery

文章目录

• *JavaScript-JQuery*
• • @[toc]
  • <1> 简介
  • <2> JQuery 简介
  • • (1) JQuery 和 JS 对象转化
    • (2) JQuery 事件绑定
  • <3> 选择器
  • • (1) 基本选择器
    • • 1. 标签选择器（元素选择器）
      • 2. id选择器
      • 3. 类选择器
      • 4. 并集选择器
    • (2) 层级选择器
    • • 1.后代选择器
      • 2. 子选择器
    • (3) 属性选择器
    • • 1. 属性名称选择器
      • 2. 属性选择器
      • 3. 复合属性选择器
    • (4) 过滤选择器
    • • 1. 选择首尾元素
      • 2. 非元素选择器
      • 3. 奇偶数选择器
      • 4. 比较索引选择器
      • 5. 标题选择器
    • (5) 表单过滤选择器
    • • 1. 改变输入框的内容
      • 2. 显示复选框的选中数
      • 3. 显示下拉框中的选中数
  • <4> DOM 操作
  • • (1) 内容操作
    • • 1.获取 input 框的 value 值
      • 2. 获取标签体内容 (只去掉最外层一级标签)
      • 3. 获取标签文本内容 (去掉所有标签提取文本内容)
    • (2) 属性操作
    • • 1. `attr():` 获取 / 设置元素 (的固有) 属性
      • 2. `prop():` 获取 / 设置元素 (的自定义) 属性
      • 3. 仅对 class 的属性操作
    • (3) 添加和追加的方法
    • (4) 删除的方法
  • <5> 事件绑定
  • • (1) jquery 标准的绑定方法
    • (2) on 绑定 / off 解除绑定
    • (3) 事件切换
  • <6> 动画
  • • (1) 默认显示 / 隐藏方式
    • (2) 滑动显示 / 隐藏
    • (3) 淡入淡出显示 / 隐藏
  • <7> 循环遍历
  • • (1) for 语句
    • (2) each 语句

<1> 简介

① JQuery 是一个 JS 框架, 用于简化 JS 的开发.
② JQuery 使用前需要导入
③ JQuery 与 JS 对象互不通用, 但可相互转化.

<2> JQuery 简介

(1) JQuery 和 JS 对象转化

jq 转为 js : jq对象[索引] 或者 jq对象.get(索引) (类似于数组)
js 转为 jq : $(js对象)

(2) JQuery 事件绑定

<input type="button" value="click me！" id="b1">

$("#b1/*←-此处可使用选择器*/").click(function() {alert("abc");})//JQuery 中绑定事件的方法

注:
JS 的 window.onload 只能定义一次, 若后面多次定义, 则会覆盖前面的语句仅执行最后面定义的语句;
而 JQuery 的 ${function} 可以定义多次

JQuery 设置 HTML 页面显示的文本的 css 样式:

$(function (){
	$("#div1").css("background-color","red");
});

<3> 选择器

(1) 基本选择器

1. 标签选择器（元素选择器）

$("html标签名") 获得所有匹配标签名称的元素
$(“div”)

2. id选择器

$("#id属性值") 获得与指定id属性值匹配的元素
$("#b1")

3. 类选择器

$(".class的属性值") 获得与指定的class属性值匹配的元素

4. 并集选择器

$("选择器1,选择器2....") 获取多个选择器选中的所有元素,

注: 多个元素可以是不同种类, 只需逗号隔开就好, 例如:
$("span,#two")

(2) 层级选择器

1.后代选择器

$("A B ") 选择A元素内部的所有B元素 (在 A 的儿子、孙子、曾孙子…中寻找 B)

2. 子选择器

$(“A > B”) 选择A元素内部的所有B子元素 (在 A 的儿子中寻找 B)

(3) 属性选择器

1. 属性名称选择器

$(“A[属性名]”) 包含指定属性的选择器

2. 属性选择器

$(“A[属性名=‘值’]”) 包含指定属性等于指定值的选择器

3. 复合属性选择器

$(“A[属性名=‘值’][]…”) 包含多个属性条件的选择器

(4) 过滤选择器

1. 选择首尾元素

:first 获得选择元素中第一个元素
:last 获得选择的元素中的最后一个元素

$("div:first")

2. 非元素选择器

:not(selector) 不包括指定内容的元素
$(“div:not(.one)”)

3. 奇偶数选择器

:even 选择偶数项
:odd 选择奇数项

4. 比较索引选择器

:eq(index) 等于索引的元素
:gt(index) 大于索引的元素
:lt(index) 小于索引的元素
$(“div:lt(3)”)

5. 标题选择器

:header 获得标题（h1~h6 标签标注的）元素
$(":header")

(5) 表单过滤选择器

1. 改变输入框的内容

jQuery 对象的 val() 方法改变表单内可用 < input > 元素的值 (val方法与JS对象的value属性类似)

$("#b1").click(function (){
	$("input[type='text']:enabled").val("aaa");
});

筛选出可用的 (:enable) 输入框 (类型为text的input标签) , 若要筛选不可用的项, 使用 disabled

2. 显示复选框的选中数

alert($("input[type='checkbox']:checked").length);

3. 显示下拉框中的选中数

alert($("#job>option:selected").length);

<4> DOM 操作

(1) 内容操作

1.获取 input 框的 value 值

var val=$("选择器").val();

2. 获取标签体内容 (只去掉最外层一级标签)

var html=$("选择器").html();

3. 获取标签文本内容 (去掉所有标签提取文本内容)

var html=$("选择器").text();

(2) 属性操作

1. attr(): 获取 / 设置元素 (的固有) 属性

removeAttr(): 删除用 attr 设置的属性

2. prop(): 获取 / 设置元素 (的自定义) 属性

removeProp(): 删除用 prop 设置的属性

例:

var name = $("#bj").attr("name");	
$("#bj").attr("discription","didu"); 设置description属性值为"didu"
$("#bj").removeAttr("description");
var checked = $("#hobby").prop("checked");

3. 仅对 class 的属性操作

① addClass(): 快速添加 class 属性值

$("#one").prop("class","second");
=============上下二者等效=============
$("#one").addClass("second");

② removeClass(): 删除 class 属性值

③ toggleClass(): 切换 class 属性值
在 ① addClass(): 和 ② removeClass(): 之间依次切换
如果已经设置属性, 则删除该属性; 若未设置则设置该属性.

(3) 添加和追加的方法

1. append(): 追加到末尾

将B放到A的末尾
$("#A").append($("#B"));

2. prepend(): 追加到开头

将B放到A的开头
$("#A").prepend($("#B"));

3. after(): 插入到后面

将B插入A的后面
$("#A").after($("#B"));

4. before(): 插入到前面

将B插入A的前面
$("#A").before($("#B"));

注:
① 上述方法中的前后对象均为同级兄弟关系
② 注意代码中前后变量的顺序, 与文字顺序相反

(4) 删除的方法

1. remove(): 删除指定元素

 $("选择器或元素名").remove();

2. empty(): 清空指定元素内包含的所有子元素 (但不删除本元素!)
   常见应用: 清空列表

 $("选择器或元素名").empty();

<5> 事件绑定

(1) jquery 标准的绑定方法

$("选择器").click(function(){
	事件内容
});

注: 除 click 之外的其他事件:

(2) on 绑定 / off 解除绑定

$("选择器").on("事件名称",回调函数)

$("#btn").on("click",function (){
	alert("on:我被点击了!");
});
=======================================================
$("选择器").off("事件名称")

(3) 事件切换

$("选择器").toggle(function(){事件1},function(){事件2}...);

注:
① 可以添加多个事件依次切换
② 使用 toggle 切换事件时需要导入 jQuery-migrate.js

<6> 动画

(1) 默认显示 / 隐藏方式

show([speed],[easing],[fn]) : 显示

参数:

speed: 动画的速度 (slow, normal, fast) 或表示动画时长的毫秒值 (如: 1000)
easing: 用来指定切换效果, 默认是 "swing" 表示慢入慢出, 可用参数 "linear" 表示匀速 
fn: 在动画完成时执行函数, 每个元素执行一次.

hide(所传参数同上) : 隐藏
linear(所传参数同上) : 显示和隐藏切换

(2) 滑动显示 / 隐藏

slideDown(所传参数同上) : 显示
slideUp(所传参数同上) : 隐藏
slideToggle(所传参数同上) : 显示和隐藏切换

(3) 淡入淡出显示 / 隐藏

fadeIn(所传参数同上) : 显示
fadeOut(所传参数同上) : 隐藏
fadeToggle(所传参数同上) : 显示和隐藏切换

<7> 循环遍历

(1) for 语句

for (遍历的对象) of (父级容器){
	循环体内容;
}
========================================
例: for(li of citys){...}
循环遍历id为city的表格中的所有li元素

注: 类似于java中的增强for循环

(2) each 语句

(容器).each(function(){...})
========================================
例: 将city表中所有元素弹出对话框显示
city.each(function(){
	alert(this.innerHTML);
})