jQuery
概述
是js的一种函数库
特点
写的少,做的多,可以兼容低版本的浏览器,支持链式编程或链式调用和隐式迭代
链式编程
$(this).siblings().slideDown()
$(this).siblings().parent().siblings().children("ul").slideUp();
# 头一样的代码可以拼接在同一行
$(this).siblings().slideDown().parent().siblings().children("ul").slideUp();
隐式迭代
eg:10个button被点击时
$("button").click(function(){ #$(选择器) 创建jQuery对象
alert("btn")
alert($) 返回一个匿名函数
})
<button></button>
<button></button>
<button></button>
<button></button>
<button></button>
<button></button>
<button></button>
<button></button>
<button></button>
入口函数
$() ===> document.getElementById()/
$(this)
$("#btn")
存放一个html标签
$("<div>
<p>
哈哈哈
</p>
<div>")
第一种(不常用)
$(document).ready(function(){
//执行的代码块
alert(1);
})
第二种(全代码)
<style>
div{
width: 100px;
height: 100px;
background: pink;
/* display: none; */
}
input{
width: 50px;
height: 30px;
background: green;
border: 1px black solid;
outline: none;
}
</style>
<script src="./jQuery/jquery-1.12.4.min.js"> </script>
<script>
// 这是入口函数的开始地方
$(function(){
$("#btn").click(function(){
$("div").toggle(500);
})
}) #等同于$(document).ready(function(){//do something}) 表示准备document对象好了的时候执行该回调函数
</script>
</head>
<body>
<!-- <label for="">点击按钮</label> -->
<label for="">按钮</label>
<input type="button" id="btn">
<div></div>
</body>
jq控制html
$(function(){
alert($('div').html());
alert($('div').html(哈哈));
alert($('div').html("<p>123</p>"));
})
<div>测试</div>
jq控制css
$(function(){
alert($('div').css("color","red"));
alert($('div').css("color"));
alert($('div').css({'color':'red',"font-size":'25px'}));
})
<div>测试</div>
js常用的选择器方法
this 关键字 代指当前发生动作的那个标签(事件)
html() 获取内容
stop() 停止之前的事件
index() 索引值
show() 显示
hide() 隐藏
toggle() 双向性
addClass() 添加类
removeClass() 删除类
toggleClass() 双向性
jq中常用的选择器
第一种
和CSS中的选择器一样
$(".mydiv,#btn,p")
第二种
选择出来之后的元素进行筛选
has() 选中父级执行命令 eg: <div> <p>hahha </p> <span> heheh</span></div> 执行的是div标签
not() 除()的其他的都可以
eq() 获取下标一般和index()绑定来使用
第三种
选择出来之后的元素进行转移
prev() 上面的一个
prevAll() 上面的所有
next() 下面的一个
nextAll() 下面的所有
parent() 父级
siblings() 兄弟级
children() 孩子级
find() 选中父级执行命令 eg: <div> <p>hahha </p> <span> heheh</span></div> 执行的是p标签标签
first()
last()
动画效果
animate() 其中有四个参数
第一个参数 以字典的形式存储{"width":500,"font-size":20}
第二个参数 延时时间默认400ms
第三个参数 曲线函数(swing(变速)/linear(匀速))
第四个参数 是一个回调函数俗称(匿名函数)function(){"opacity":0.6} 存放当前动画结束后要发生的事件
slideUp() 向上卷起
slideDown() 向下展开
slideToggle() 双向性
fadeIn() 淡入效果
fadeOut() 淡出效果
fadeToggle() 双向性
fadeTo(0.2) 设置透明度为0.2
访问已有的属性
prop() 获取属性 prop("href") 获取href的值
prop("href","http://www.baidu.com") 修改其中的内容
访问自定义的属性
attr() 获取属性 attr("mycode") 获取mycode的值
val() 获取input标签的值,相当于prop("value")
each(function(event){}) 自带一个形参event是each的默认参数
和鼠标(mouse)事件有关的事件机制
blur() 失去焦点
focus() 获取焦点
change() 改变其中的内容
click() 点击事件
mouseover() 鼠标进入(包含子元素)
mouseout() 鼠标离开(包含子元素)
mouseenter() 鼠标进入(不包含子元素)
mouseleave() 鼠标离开(不包含子元素)
// hover 中的两个匿名函数mouseenter和mouseleave
hover(function(){},function(){})
ready()
submit() 数据提交
和键盘有关的事件
keyup() 弹起
keydown() 按下
表单提交 submit()
表单提交一般不会用$("from"),因为form标签有可能在一个页面有多个,为了保证唯一性,一般推荐使用id选择器$("#myform"),也不是直接提交的,需要加条件判断
$("#myform").submit(function(event){
if(aa && bb && cc ){
// 条件成立需要执行的代码块
alert("提交成功")
}
else{
// 阻止表单默认提交
return false
// event.preventdefault()
}
})
正则表达式(用的是原生js中的)
创建
var re = new RegExp(aa,bb) // aa 匹配规则,bb 正则的参数
var re = /匹配规则/正则的参数
正则变量.test(数据)
// 获取input框中的内容
var re = /^\w{6,20}$/ // 匹配用户名输入是否是合法的标识符
var vals = $("#input01").val()
// 验证正则能否成功匹配
re.test(vals)
事件冒泡
是一种客观存在的现象，父子级标签且都绑定相同的事件,触发子级命令的时候会逐层传递到父级
如何阻止事件冒泡的行为
$("#btn").click(function(event){
// event.stopPropagation() 不推荐使用
return false
})
事件委托
一般都委托给这个标签的父标签(指的是一般不会发生改变的父标签)
delegate()中有三个参数
注:第一个参数和第二个参数都以字符串的形式存在
第一个参数
事件正实发生在谁身上
第二个参数
事件属性(click,mouseover)
第三个参数
匿名函数function(){}
优点
提高代码的执行效率
可以给未来元素绑定命令(指的是用程序增加的标签命令)
eg:
$("ul").delegate("li","click",function(){
alert($(this).index());
})
<ul>
<li>文字1</li>
<li>文字2</li>
<li>文字3</li>
...
</ul>
on() 只可以给未来元素绑定命令
有两个参数
第一个参数
事件属性
第二个参数
匿名函数function(){}
节点操作
js内置的DOM
是一种内置的结构化的表现手法,通过这个结构化表现手法把所有的标签实现了一个倒树状结构图
如下图
DOM(document object model) 文档操作模型
标签 = 元素 = 标记 < 节点(标签,标签的属性,标签的内容)
常见的节点操作的方法
html() 比较强大
下面的()中写的都是要操作的元素
append() 子级的后面追加
prepend() 子级的前面追加
after() 同级的后面追加
before() 同级的前面追加
下面的()中写的是要往哪个地方添加(目的地)
appendTo()
prependTo()
insertAfter()
insertBefore()
remove() 删除
empty() 清空
eg:
第一步:声明变量保存节点数据
第二步:使用追加函数将节点追加到相应的位置
var $li = $("<li>hhaha</li>")
$("ul").append($li)
$li.appendTo($("ul"))
<div>
// 第四个增加的位置 before()/insertBefore()
<ul>
// 第二个增加的位置 prepend()/prependTo()
<li></li>
// 第一个增加的位置 append()/appendTo()
</ul>
// 第三个增加的位置 after()/insertAfter()
</div>
原生的JS对象
创建的方式
第一种方式
var pre = new Object()
pre.name = "zhangsan"
pre.age = 25
pre.say = function(){
// 方法的定义
alert("hhaha")
}
alert(this.name)
pre.say()
第二种方式
var obj = {
"name":"laowang",
"age":25,
"say":function(){
// 定义方法
alert("hahha")
}
}
浙公网安备 33010602011771号