1.Jquery 概述
轻量级的 JS 的类库. 对 JS 进行封装. JQuery 的作用: 做页面的特效, 页面异步操作.(使用时首先引入 Jquery 文件{注意版本})
2.jq 的入口函数
jq 是等页面的 DOM 树绘制完成后进行执行. 可以编写多个入口函数.
而 js 的匿名函数, 只能编写一个.
传统的 JS 的方式: 页面加载的事件只能执行一次.
window.onload = function(){}
Jquery 原始写法
- $(document).ready(function(){
- // 在这里写你的代码...
- });
Jquery 简化写法
- $(function(){
- // 在这里写你的代码...
- });
{$(function(){}): 等页面的 DOM 树绘制完成后进行执行.
相当于页面加载的事件, 可以执行多次. 效率比 window.onload 要高.
$ 相当于 JQuery}
3.JQ 对象与 JS 对象相互转换
(1)JS 对象转为 JQ 对象: var jqObj = $(jsObj);
(2)JQ 对象转为 JS 对象:
var jsObj = jqObj[0];
或者 var jsObj = jqObj.get(0);
4.Jquery 选择器
描述:$("选择器")获得的都是数组对象
(1)基本选择器
1. 元素选择器
$("标签名")
2.id 选择器
$("#id 属性值")匹配标签的 id 的属性值
3. 类选择器
$(".class 属性值")匹配标签 class 的属性值
4. 通配符选择器
$("*")匹配所有的标签
5. 并列选择器
$("选择器 1, 选择器 2, 选择器 3")
(2)层级选择器
空格: 元素的后代元素(包含所有后代)
$("div span")匹配 div 下面所有的 span 标签
> : 子元素选择器(只包含儿子)
$("div> span")匹配 div 下面第一层 span 标签
+: 下一个兄弟元素
~: 后面的所有的兄弟元素
(3)基本过滤选择器
:odd 奇数
$("#table tr:odd") 匹配 id="table" 的奇数行
:even 偶数
$("#table tr:even") 匹配 id="table" 的偶数行
:first 第一个
$("#table tr:first") 匹配 id="table" 的第一行
:last 最后一个
$("#table tr:last") 匹配 id="table" 的最后一行
:eq(数字) 第几个(从下标 0 开始)
$("#table tr:eq(3)") 匹配 id="table" 的第四行
(4)属性选择器
选择器[属性]
描述: 匹配选择器中有属性的标签
input[type]: 匹配 input 标签中有 type 属性的标签
选择器[属性 = 属性值]
描述: 匹配选择器中存在属性 = 属性值的标签
input[type='checkbox']: 匹配所有的复选框
(5)表单选择器
1. 表单对象选择器:
:input 匹配所有 input, textarea, select 和 button 元素
:text 匹配所有的单行文本框
:password 匹配所有密码框
:radio 匹配所有单选按钮
:checkbox 匹配所有复选框
:submit 匹配所有提交按钮
:image 匹配所有图像域
:reset 匹配所有重置按钮
:button 匹配所有按钮
:file 匹配所有文件域
:hidden 匹配所有不可见元素, 或者 type 为 hidden 的元素
2. 表单对象属性选择器:
:enabled 匹配所有可用元素
:disabled 匹配所有不可用元素
:checked 匹配选中的 radio/checkbox
:selected 匹配选中的下拉框
5.Jquery 的属性操作
attr 操作非 boolean 属性的属性 ----------$("选择器").attr("src","1.png")
prop 主要用于操作 boolean 属性(checked 和 selected)---------- $("选择器").prop("checked",true);
removeAttr(): 从每一个匹配的元素中删除一个属性
removeProp(): 用来删除由. prop()方法设置的属性集
6.Jquery 的内容操作
html()
1. 获取标签内容体(包含 html 标签) var str = $("idDiv").html(); 获取 id=idDiv 的内容体
2. 设置标签内容体 $("idDiv").html("<span > 覆盖内容</span>") 设置 id=idDiv 的内容体, 会覆盖它原本的内容
val()
1. 获取表单元素的 value 属性(包含选中的 checkbox/radio/select) var v = $("#select").val(); 获取 id=select 选中的下拉框的值
2. 设置表单元素的 value 属性(可以用来选中 checkbox/radio/select) $("#select").val("北京"); 选中 id=select 下面选项 value="北京" 的 < option > 标签
text()
1. 获取标签的纯文本内容(不包含 html 标签) var text = $("idDiv").text(); 获取 id=idDiv 的纯文本内容
2. 设置标签的纯文本内容 $("#idDiv").text("纯文本内容"); 设置 id=idDiv 的纯文本内容
7.Jquery 文档处理
append()-------- 描述:$("#idDiv").append("<span > 追加到 id=idDiv 的后面</span>")
appendTo()----- 描述:$("#idSpan").appendTo("#idDiv"); 将 id=idSpan 的标签移动到 id=idDiv 的后面
remove()-------- 描述:$(".classDiv").remove(); 删除所有 class=classDiv 的所有标签
insertBefore() ------ 把所有匹配的元素插入到另一个, 指定的元素元素集合的前面
insertAfter() -------- 把所有匹配的元素插入到另一个, 指定的元素元素集合的后面
8.Jquery 操作 CSS 样式
css()---------------- 描述:$("#idDiv").css("background","red"); 给 id=idDiv 的标签的 style 属性设置 background:red 的 css 样式
addClass()--------- 描述:$("idDiv").addClass("newClass"); 给 id=idDiv 的标签 class 属性添加 newClass 样式
removeClass()------ 描述:$("#idDiv").removeClass("newClass"); 删除 id=idDiv 标签中 class 中的 newClass
9.Jquery 常用事件
click 点击事件:
$("选择器").click=function(){ }
change 下拉列表改变事件:
$("选择器").change=function(){ }
focus 获得焦点事件:
$("选择器").focus=function(){ }
blur 失去焦点事件:
$("选择器").blur=function(){ }
submit 提交表单事件:
$("选择器").submit=function(){ }注意必须返回 false 才能阻止提交表单
10.Jquery 触发事件
trigger():
描述: 使用 Jquery 触发指定事件 $("#input").trigger("focus"); 触发 id=input 输入项的获得焦点事件, 该方法会执行浏览器默认行为
triggerHandler():
描述: 使用 Jquery 触发指定事件 $("#input").triggerHandler("focus"); 触发 id=input 输入项的获得焦点事件, 该方法会阻止浏览器默认行为
11.Jquery 的事件切换
toggle([speed],[easing],[fn]);-- 单击事件的切换
用于绑定两个或多个事件处理器函数, 以响应被选元素的轮流的 click 事件.
hover([over,]out)
一个模仿悬停事件 (鼠标移动到一个对象上面及移出这个对象) 的方法
over: 鼠标移到元素上要触发的函数
out: 鼠标移出元素要触发的函数
12.Jquery each 循环
1.$.each();
描述: 一般用于循环遍历数组对象
格式:$.each(数组对象, function(i,n){ });---------- 这里 function 代表回调函数
2.$("选择器").each()
描述: 一般用于循环遍历选择器所选择的 JQ 数组对象
格式:$("选择器").each(function(i,n){ });
3. 注意: 在 each 里面使用 this 时代表循环的当前值, 也就是上面的当前循环的 n 的值.
来源: http://www.bubuko.com/infodetail-2633780.html