1、JAVASCRIPT类库,简称为JS库
作用 - 为了简化javascript的开发
目的 - 预定义了很多对象(属性和方法)和函数
特点 - 兼容各大浏览器
2、JQUERY
概述: jQuery其实就是一个JS文件
分类
jQuery - Web版本(最主要)
jQuery UI(User Interface) - 集成UI内容
jQuery Mobile - 移动版本(WebApp)
QUnit - 用于测试
使用jQuery的三个步骤
①在HTML页面中引入jQuery文件
②使用jQuery的选择器定位(获取)页面元素
③利用jQuery的API方法完成需求
3、$(selector) - jQuery的工厂函数,该函数返回jQuery对象
jQuery的约定 - jQuery对象前增加"$"符号
// DOM对象
var username = document.getElementById("username");
// jQuery对象
var $username = $("#id");
4、DOM对象与jQuery对象
DOM对象 - 通过DOM获取的元素,称之为DOM对象
jQuery对象 - 通过jQuery包装DOM后产生的对象
jQuery对象的底层还是DOM对象
DOM对象与jQuery对象的转换
DOM对象转换为jQuery对象:$(DOM对象)
jQuery对象转换为DOM对象:jQuery对象是数组对象
①$jQuery对象[角标] ②$jQuery对象.get(角标)
jQuery对象提供get(index)方法
注意 - DOM对象与jQuery对象之间不能相互调用
例:获得DOM对象
var username = document.getElementById("username"); console.log(username.value);
DOM对象转换成jQuery对象
var $username = $(username); console.log($username.val());
获得jQuery对象
var $username = $("#username"); console.log($username.val());
jQuery对象转换成DOM对象(jQuery对象是数组对象)
var username1 = $username[0]; console.log(username1.value);
jQuery对象提供get(index)方法
var username2 = $username.get(0); console.log(username2.value);
5、jQuery程序语句基本语法
$(选择器字符串) . method (参数行);
选择器 动作(API) 参数
4、选择器 jQuery的根基
①基本选择器
$("div")标签属性
$("#btn") id 属性:
$(".item")class属性:
$("*")全部选择器:
$("#d1,.mini")多个选择器并列使用:
$(".d1.mini")需要同时具有.d1类和.mini类
②层级选择器
$("body div")祖先与后代
$("body>div")父元素与子元素
$("#one+div")选择id为one后的第一个兄弟元素,且必须为div
$("#one~div")选择id为one后面所有div元素
③基本过滤选择器(过滤选择器在选择器前,具有":"符号)
$("div:first")获取div元素中的第一个
$("div:last")获取div元素中的最后一个
$("div:even")获取索引值为偶数的div元素,索引值从0开始!!
$("div:odd")获取索引值为奇数的div元素
$("div:gt(1)")获取索引值大于1的div元素 great than
$("div:lt(1)")获取索引值小于1的div元素 less than
$("div:eq(1)") 获取索引值等于1的div元素 less than
$("div:not('.mini')")获取class不为mini的div元素(包含没有class属性的div元素)
$(":header")获取所有标题元素(h1 - h6) - 不常用
$(":animated")获取当前正在执行动画的元素
④子元素过滤选择器
$("div:nth-child(2)")获取div元素的子元素是第二个
$("div:first-child")获取div元素的第一个子元素
$("div:last-child")获取div元素的最后一个子元素
$("div:only-child")如果哪个div元素只有一个子元素,那么选中
⑤内容过滤选择器
$("div:contains('div11')")文本包含"div11"的div元素
$("div:empty")不包含任何文本内容或子元素的div元素
$("div:parent")包含任何文本内容或子元素的div元素
$("div:has('.mini')") 包含class为mini的div元素的父div元素
⑥可见性过滤选择器
$("div:visible")可见的div元素
$("div:hidden")不可见的div元素
⑦属性过滤选择器
$("div[title]")包含属性title的div元素
$("div[title=text1]")包含属性title=text1的div元素
$("div[title!=text1]")包含属性title!=text1的div元素(包含没有该属性的div元素)
$("div[title^=text]")包含属性title值是以text开始的div元素
$("div[title$=t1]")// 包含属性title值是以t1结束的div元素
$("div[title*=t1]")包含属性title值包含t1的div元素
$("div[title$=t1][id]")多个属性过滤选择器并列使用包含属性title值是以t1结束的,包含id属性的div元素
⑧表单对象属性过滤选择器
$("input:enabled") 改变页面中可用元素的value属性值
$("input:disabled")改变页面中不可用元素的value属性值
$("input[name=love]:checked")被选中的单选框
⑤选择器的建议
不用记 - 会查jQuery的帮助文档即可
多练 - 9个页面