Jquery1
-
回顾 js_day2
-
阻止默认提交行为 表单 οnsubmit=“return false” 超链 javascript:void(0)
-
事件对象event 获取事件源target 横纵座标clientx clienty
-
事件冒泡 内层事件扩散到外层 IE event.canceIBubble=true,Chrome exent.stopPropagation
-
DOM 文档对象模型
-
将文档看作一颗树,树上对应的节点对象就是页面标签对象
-
节点获取 document.getElementById(“id的属性值”)—>节点对象
-
节点修改 修改属性 obj.属性名="‘值’’ 内部元素innerTextinnerHTMl
-
节点创建 ducoment.createTextNode文本 标签createElement()
-
节点删除 父节点.removeChild(子节点)
-
-
BOM 浏览器对象模型
-
浏览器的一些组件看作是一个对象 window,document,location,history
-
方法
-
window3 提示
-
定时器
-
-
-
-
Jquery 引言
-
概念:是一个JavaScript的框架产品
-
解决javaScript存在的问题
-
编程复杂,语法复杂 获取复杂
-
存在浏览器差异
-
-
-
搭建开发环境
- 在webroot下建js文件夹 引入文件
- jquery-1.8.3.js 学习时使用后 有注释 有源码
- jquery_1.8.3min.js 开发中用的文件小 用户下载快
- 将jquery文件引入当前页面
- script src = “js/jquery-1.8.3.js”
- 语法
- 获取标签文本内容
- $("#标签").text();
- 注意
- 代码的书写要重新定义一个script标签
- 代码要放到引入的文件代码之后
- js的和jquery的对象不是一个,方法和属性不能混用,jquery对象中封装js对象.
- 转化
- js对象转化jquery对象 $(js对象)
- 在webroot下建js文件夹 引入文件
-
Jquery中的选择器(获取标签对象)
-
基本选择器[常用必须掌握]
-
id选择器 通过标签的id属性获取标签对象
语法:$("#id 属性值");
-
类选择器 通过标签class属性值获取标签对象
获取对应的标签对象 将其隐藏jqueryObj.css(“display”:none");
$(".class").css(“display”,“none”);
- 标签选择器 通过标签的标签名获取标签对象
语法:$(“标签名”).css(“display”,“none”);
- 多路选择器 通过多个选择器的组合获取标签对象
语法:${选择器1,选择器2}
-
全选择器
语法$(*);
-
-
层次选择器
-
后代选择器 获取所有的子标签
语法:$(选择器+空格+选择器)
示例:$(“ol+空格+li”).css(“display”,“none”);
-
直接子代选择器 获取父标签的直接子标签
语法:$(选择器>选择器);
示例:$(“ol>li”).css(“display”,“none”);
-
直接兄弟选择器 获取后续第一个兄弟标签对象
语法:$(选择器+选择器)
-
所有兄弟选择器 获取后续所有兄弟标签对象
语法:$(“选择器~选择器”)
注意:
- js中空白文本算一个子节点
- jquery空白文本不算节点
-
-
简单过滤选择器(在获取到一组标签对象之后再次进行筛选)
- : first 获取一组标签中的第一个标签对象
语法:(“选择器 : first”);
- : last 获取一组标签中的最后一个标签对象
语法:(“选择器 : last”);
- : eq(index) 获取一组标签中下标等于 index标签对象
语法:(“选择器 : eq(index)”);
- : gt(index)获取一组标签中下标大于 index标签对象
语法:(“选择器 : gt(index)”);
- : lt(index)获取一组标签中下标小于 index标签对象
语法:(“选择器 : lt(index)”);
- : even 获取一组标签中下标为偶数的标签对象
语法:(“选择器 : even”);
- : odd 获取一组标签中下标为奇数的标签对象
语法:(“选择器 : odd”);
- : not(选择器) 获取一组标签中不包含某个选择器的标签对象
语法:(“选择器 : not(选择器)”);
-
内容过滤选择器(从标签中是否存在内容筛选标签对象
- : empty 获取内部为空的标签对象
- : parent 获取内部有子标签的标签对象
- : contains(text)获取包含指定文本的标签对象
-
可见性过滤选择器
-
hidden:获取所有隐藏的标签对象
语法:$(“标签 : hidden”)
-
visible:获取所有可见的标签对象
语法:$(“标签 : visible”)
-
-
属性过滤选择器(通过标签对象的属性筛选标签对象)
-
获取包含对应属性名的标签对象
语法:$("选择器[属性名])
-
获取包含对应属性名为指定属性值的标签对象
语法:$("选择器[属性名=值])
-
获取包含对应属性名不是属性值的标签对象
语法:$("选择器[属性名!=值])
注意 : 属性名!=值 没有对应的属性也算不等于
-
-
用於单选框和复选框相关的选择器
-
:checked 获取选中的单选框或复选框
示例:$(“input[type =checkbox] : checked”)
-
-
获取下拉列表相关的选择器
- :selected 获取用户选中的列表项
-
表单相关选择器(便捷获取表单元素使用)
- : text
- : file
- : image
- : button
- : hidden
- …
标签的遍历
-
for循环遍历
- 遍历过程中获取的对象时 js原生DOM对象 需要转换成jquery对象
-
Each遍历
-
数组对象.each(function(){
//遍历过程中的操作
当前元素$(this).text();
} );
-
注意: 获取的对象时 js原生DOM对象 需要转换成jquery对象
-
页面结构的操作
-
页面元素的创建
-
Js:document.createTextNode()
document.createElement()
-
jquery:$(“标签”)
$("<标签>文本</标签>")
将对象放置到页面中parentObj.append();
-
-
页面元素的删除
- 父标签对象.empty(子标签对象) 清空标签内部的元素
- 父标签对象.remove(子标签对象) 删除标签本身连带删除子标签
-
页面元素的修改
-
input的value属性的修改
获取:$()obj.val() 获取input框的value属性值
修改:$()obj.val(“值”)
-
标签文本的获取和修改
$()obj.text()获取文本信息
$()obj.text(“值”)修改文本信息
$()obj.html() 获取内部标签对象
$()obj.html(“值”) 修改内部标签对象
-
标签样式的获取和修改
$()obj.css(“属性名”) 获取属性名对应的属性值
$()obj.css(‘属性名’’,“属性值”) 修改对应属性的属性值
注意支持链式调用#()obj.css().css();
-
给标签添加移除class属性
$()obj.addClass() 添加Class属性
$()obj.removerClass() 移除class属性
-
操作标签的属性值获取和修改
$()obj.attr(“属性名”) 获取标签对应的属性值
$()obj.attr(“属性名”,“属性值”) 修改标签对象的属性值
$()obj.prop(“属性名”) 获取标签对应的属性值
$()obj.prop(“属性名”,“属性值”) 修改标签对象的属性值
-
方法: 获取当前标签对象的父标签对象 parent()
-
-