javaweb_day04-day05 学习笔记 —— jQuery

jQuery

• 是javascript的框架，简化开发过程，提高开发效率。
• 使用jquery，要先导入jquery.js文件，不向下兼容。

1. 语法

$(document).read(function(){
方法体；
});
简化为：
$(function(){
方法体；
});

js和jq保证文档结构加载完成之后再进行处理的两个方法：

• load() 打开页面时，不显示文档内容
  • window.onload 事件要等到DOM文档结构加载完成以及各种图片、视频等外部资源都加载完成后才会执行。
  • window.onload 事件若有多个，后面的会覆盖前面的，只能执行一次。
• == ready()== 打开页面时，显示文档内容
  • ready 函数只需在DOM文档结构加载完成后就会执行。
  • ready 函数有多个时，浏览器会根据它们在页面中出现的先后顺序依次执行。

2. jq 和 js 之间的转换

• js 转 jq 对象 ：$ ()
  var nameNode = document.getElementById(“name”);
  alert($(nameNode).val());
• jq 转 js 对象 :
  • 方法一 jq[0]
    var nameNode = $("#name")[0];
    alert(nameNode.value);
  • 方法二 .get(0)
    var nameNode = $("#name").get(0);
    alert(nameNode.value);

3. 事件处理

click

4. 获取节点对象

• 通过选择器

  • 基本选择器
    • $("#id") id选择器
    • $(".div2") 类选择器
    • $(“div,.div1,#id2”) 分组选择器
    • $(“div”) 元素选择器
    • $("*")
  • 层级选择器
    • $(“div p”) div下的所有p
    • $(“div > p”) div下的所有子代p
    • $(“div + p”) 紧跟着div的第一个p
    • $(“div ~ p”) div之后的所有兄弟p
  • 基本过滤选择器
    • $(“div : first”) 第一个div
    • $(“div : last”) 最后一个div
    • $(“div : eq(index = 0)”) 第一个div
    • $(“div : even”) 偶数个的div，从0开始
    • $(“div : odd”) 奇数个的div
    • $(“div : not(.one)”) 去除class值为one的div
  • 内容选择器
    • $(“div : contains(“abc”)”) 文本包含abc的div
    • $(“div : empty”) 文本为空的div
    • $(“div : parent”) 有子元素或文本的div
    • $(“div : has( p)”) 有元素p的div
  • 可见性选择器
    • $(“div : hidden”) 隐藏的div
    • $(“div : visible”) 可见的div
  • 子选择器
    • $(“div : first-child”) 所有div下的第一个子节点
    • $(“div : last-child”) 所有div下的最后一个子节点
    • $(“div : nth-child(index = 1)”) 所有div下的第一个子节点，从1开始
    • $(“div : only-child”) div下的唯一节点
  • 属性选择器
    • $(“div[id]”) 含有id属性的div
    • $(“div[id = ‘abc’]”)
    • $(“div[id != ‘abc’]”)
    • $("div[id ^= ‘abc’] ") 以abc开头
    • $(“div[id $= ‘abc’]”) 以abc结尾
    • $(“div[id *= ‘abc’]”) 包含abc
  • 表单选择器
    • $(": text") 所有文本框
    • $(": password") 所有密码框
    • …
  • 表单属性选择器
    • $(“input : checked”) 所有选中的input中的复选框元素
    • $(“select option : selected”) 所有选中的select下的option
    • $(“input : disabled”) 所有不可用的input
    • $(“input : enabled”) 所有可用的input

• 通过方法

  • parent() 获取父节点
  • parents() 获取父辈节点
  • next() 后面紧跟着的兄弟节点
  • nextAll()
  • prev() 前面紧跟着的兄弟节点
  • prevAll()
  • sibilings() 除了自己的所有兄弟
  • find()

5. 操作节点

5.1 显示和隐藏

• show()
• hide()
• toggle()

5.2 获取和设置文本

• html() 获取文本，包含标签对
• text() 获取文本，不包含标签对

5.3 设置属性

• attr() 获取复选框选中前的状态
• prop() 获取复选框选中的状态

5.4 添加和删除节点

• append() 添加节点
• remove() 删除节点，包括标签对
• empty() 删除内容，不包括标签对

练习

5.5 设置样式的方法

css()

5.6 操作样式的方法

• addClass()
• removeClass()
• hasClass() 判断当前节点是否包含节点

练习：注册表单的验证

设计样式:

五个框获取焦点时的提示信息：

name、pw的格式验证：

pwconfirm、email的格式验证：

phone的格式验证、按钮提交：