【前端模块】第37天——Jquery
原创
文章标签 jquery 选择器 jquery对象 文章分类 Hadoop 大数据
©著作权归作者所有：来自51CTO博客作者一片白纸的原创作品，请联系作者获取转载授权，否则将追究法律责任
回顾:
js:
组成部分:
ECMAScript
BOM
DOM
变量声明 var 变量名=初始化值;
数据类型:
原始类型
Undefined Null
String Number Boolean:伪对象
通过typeof运算符可以判断出属于那种原始类型
typeof 值|变量
引用类型
Boolean Number
String
常用属性:length
常用方法:
substring
split
replace
Array
常用属性:length
注意:
array长度可以变化
array可以存放任意值
Math
Date
RegExp 常用方法:test()
直接量语法:
/正则表达式/
全局
decodeURI 解码
eval 计算字符串,解析成js代码执行
运算符:
关系运算符
等性运算符 == ===
语句:
选择 循环
////////////////////////////////
BOM(浏览器对象模型)
window:窗口
常用属性:
获取其他的四个对象
window.location....
常用方法:
消息框
alert confirm prompt
定时器
setInterval 周期
setTimeout 延迟
打开关闭
open close
location:定位
location.href:设置或者获取url
history:历史
go()
///////////////////////////////
事件和函数
掌握的事件:
焦点:
onfocus
onblur
表单事件
onsubmit
onchange 改变
页面或者元素加载
onload
最常用的方式:
window.onload=function(){};
单击
onclick
函数:
方式1:
function 函数名(参数列表){
函数体
}
方式2:
匿名函数
例如:window.onload=function(){};
事件绑定函数:
方式1:通过元素的事件属性
若参数为this:是将当前的dom对象传递给了函数
方式2:派发事件
dom对象.onxxx=function(){};
///////////////////////////////////////////
DOM(文档对象模型)
就是我们的html代码加载到内存中会形成一棵document树
节点:
文档节点 document
元素节点 element
属性节点 attribute
文本节点 text
获取一个元素节点:通过document获取
四个
操作元素的属性
dom对象.属性
操作元素的标签体
dom对象.innerHTML
////////////////////////
以前通过js获取对象的时候
var obj=document.getElementById("id");
funtion getId(id){
return document.getElementById("id");
}
$("选择器")===>获取元素
//////////////////////////
js类库:
对常用的方法和对象进行封装,方便我们使用.
jQuery:
案例1-弹出广告
技术:
定时器
jQuery
///////////////////////////
jquery和html的整合
jquery是单独的js文件
通过script标签的src属性导入即可
获取一个jquery对象
$("选择器") 或者 jQuery("选择器")
dom对象和jquery对象之间的转换
dom对象===>jquery对象
$(dom对象)
jquery对象===>dom对象
方式1:
jquery对象[index]
方式2:
jquery对象.get(index)
页面加载:
js:
window.onload=function(){}//在一个页面中只能使用一次
jquery 在一个页面中可以使用多次
方式1:
$(function(){...})
方式2:
$(document).ready(function(){});
派发事件:
$("选择器").click(function(){...});
等价于 原生js中
dom对象.onclick=function(){....}
掌握事件:
focus
blur
submit
change
click
jquery中效果:
隐藏或展示
show(毫秒数) hide(毫秒数)
滑入或滑出
slideDown(毫秒数):向下滑入
slideUp(毫秒数):向上滑出
淡入或淡出
fadeIn(int):淡入
fadeOut(int):淡出
/////////////////////
案例1-步骤分析
1.页面加载成功之后$(function(){...}) 开始一个定时器 setTimeout();
2.编写展示广告方法
获取div,然后调用效果方法
设置另一个定时器 隐藏
3.编写隐藏广告的方法
获取div,然后调用效果方法
////////////////////////////////////
选择器总结:
基本选择器★
$("#id值") $(".class值") $("标签名")
了解:$("*")
理解:获取多个选择器 用逗号隔开
$("#id值,.class值")
层次选择器 ★
a b:a的所有b后代
a>b:a的所有b孩子
a+b:a的下一个兄弟(大弟弟)
a~b:a的所有弟弟
基本过滤选择器:★
:frist 第一个
:last 最后一个
:odd 索引奇数
:even 索引偶数
:eq(index) 指定索引
:gt(index) >
:lt(index) <
内容过滤:
:has("选择器"):包含指定选择器的元素
可见过滤:
:hidden 在页面不展示元素 一般指 input type="hidden" 和 样式中display:none
:visible
属性过滤器:★
[属性名]
[属性名="值"]
表单过滤:
:input 所有的表单子标签 input select textarea button
//input
////////////////////////
案例2-隔行换色
技术分析:
1.页面加载成功
2.获取所有的奇数行 添加一个css
3.获取所有的偶数行 添加一个css
属性和css操作总结:
对属性的操作:
attr():设置或者获取元素的属性
方式1:获取
attr("属性名称")
方式2:设置一个属性
attr("属性名称","值");
方式3:设置多个属性 json
attr({
"属性1":"值1",
"属性2":"值2"
})
removeAttr("属性名称"):移除指定属性
//添加class属性的时候
// attr("class","值");
addClass("指定的样式值"); 相当于 attr("class","指定的样式值");
removeClass("指定的样式值");
对css操作:操作元素的style属性
css():获取或者设置css样式
方式1:获取
css("属性名")
方式2:设置一个属性
css("属性名","值")
方式3:设置多个
css({
"属性1":"值1",
"属性2":"值2"
});
获取元素的尺寸:
width()
height()
/////////////////////////////
案例3-全选或者全不选
需求:
就是将内容中复选框的选中状态和最上面的复选框状态保持一致
步骤分析:
1.确定事件 复选框的单击事件
2.函数中
a.获取该复选框的选中状态 attr(获取不了checked属性)|prop
b.获取所有的复选框修改他们的状态
注意:
若jquery版本>1.6 统一使用 prop操作元素的属性
/////////////////////////
/////////////////////////
/////////////////////////
/////////////////////////
案例4-省市联动
步骤分析:
1.确定事件 省份的下拉选变化的时候 change
2.编写函数
a.获取当前省份的value值
b.通过数组获取该省下的所有市 返回值:数组
c.遍历数组,拼装成option元素 追加到市下拉选即可
注意:每次改变的时候初始化市的值.
///////////////////////////
技术:
遍历数组
数组.each(function(){});
$.each(遍历数组,function(){});
注意:
each的function中可以加两个参数 index和dom
index是当前遍历的索引值
dom指代的是当前遍历的dom对象(开发中一般使用this即可)
//////////////////////////////
设置或者获取value属性
jquery对象.val():获取
jquery对象.val("...."):设置
/////////////////////////////////////////
设置获取获取标签体的内容
html()
text()
xxxxx():获取标签体的内容
xxxxx("....."):设置标签体的内容
设置的区别:
html:会把字符串解析
text:只做为普通的字符串
获取的区别:
html:获取的html源码
text:获取只是页面展示的内容
//////////////////////////////////////////////
创建一个元素: $("")
///////////////////////
文档操作:
内部插入
a.append(c):将c插入到a的内部(标签体)后面
a.prepend(c):将c插入到a的内部的前面
appendTo
prependTo
外部插入
a.after(c):将c放到a的后面
a.before(c):将c放到a的前面
a.insertAfter(c)
a.insertBefore(c)
删除
empty() 清空元素
remove() 删除元素
/////////////////////////////////
/////////////////////////////////
/////////////////////////////////
案例5-左右移动
步骤分析:
1.确定事件 单击事件
2.编写函数:
移动一个:
右边的下拉选追加一个 左边的选中的第一个
移动多个:
左边选中的 追加到右边的下拉选中
移动全部:
将左边的所有option追加到右边的下拉选中
技术分析:
表单对象属性过滤选择器
:enabled 可用的
:disabled 不可用
:checked 选中的(针对于单选框和复选框的)
:selected 选中的(针对于下拉选)
///////////////////////////////////////////////////
///////////////////////////////////////////////////
///////////////////////////////////////////////////
上午回顾:
js类库:
对常见的方法和对象进行了封装,方便开发.
jquery和html的整合
script标签的src属性导入即可
获取jquery对象
$("选择器") jQuery("选择器")
dom对象和jquery对象之间的转换
dom>>>jquery
$(dom对象)
jquery>>>dom
方式1:
jquery对象[index]
方式2:
jquery对象.get(index)
jquery中的选择器:
基本选择器★
$("#id值") $(".class值") $("标签名") $("#one,#two,.mini")
层次选择器★
a b:后代
a>b:孩子
a+b:大弟弟
a~b:弟弟们
基本过滤选择器
:frist :last
:odd :even
:eq(index) :gt|lt..
内容过滤
:has(选择器)
可见性过滤
:visible
:hidden 指代是 input type=hidden 和 display:none
表单的过滤
:input
属性选择器:
[属性]
[属性=值]
表单对象属性过滤选择器
:enabled 可用的
:disabled 不可用
:checked 选中的(针对于单选框和复选框的)
★:selected 选中的(针对于下拉选)
///////////////////////////
派发事件:
jquery对象.事件(function(){.....});
例如:
$("#btn1").click(function(){.....});
/////////////////////////
页面加载成功
$(function(){
......
})
$(document).ready(function(){
////
});
///////////////////////////
属性和css
attr():设置或者获取属性(1.6版本之前)
attr("属性名"):获取
attr("属性名","值"):设置一个
attr({
"属性名":"值",
"属性名":"值"
})
prop():和attr用法一致(1.6版本之后)
(了解)addClass("存在的样式")
removeAttr()
(了解)removeClass()
css():设置获取获取元素的样式
css("属性"):获取
css("属性","值"):设置
css({
"":"",
"":"",
"":""
}):设置多个
width()
height()
/////////////////////////////////////
文档处理:
内部插入(2组方法 任意掌握一组)
外部插入(2组方法 任意掌握一组)
删除(empty remove)
//////////////
val html text
val :设置或者获取values属性
html:获取或者设置标签体内容
////////////////////
遍历数组
方式1:
jquery对象.each(function(){});
方式1:
$.each(jquery对象,function(){});
/////////////////////////
在jquery中创建元素
$("").prop(属性).html(内容)
////////////////////////////
- 赞
- 收藏
- 评论
- *举报
Original: https://blog.51cto.com/u_11037231/5582643
Author: 一片白纸
Title: 【前端模块】第37天——Jquery
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/508317/
转载文章受原作者版权保护。转载请注明原作者出处！