jQuery
需要下载一个Jquery库
https://jquery.com/
$ = jQuery
页面加载完则执行
js: οnlοad=function(){}
jQuery: $(function(){})
基本选择器来获得元素
1、id选择器 : $("#id值")
2、class选择器 : $(".class值")
3、标签选择器 : $("标签名")
$(this)代表的是操作的那一个元素
jquery中的事件注册
jquery对象.去掉on的事件(function(){})
<p id="p1">我中国</p>
<script>
$(function() {
// 为p标签注册点击事件
$("#p1").click(function() {
alert();
})
})
</script>
jquery控制属性和样式
属性：标签中自带的那些属性：比如 font标签中的size/color
样式：css中的样式，比如font-size..
1 操作属性的语法
设置单个 ：jquery对象.attr("属性","值")
设置多个: jquery对象.attr({"属性1":"值1","属性2":"值2"......})
获取: jquery对象.attr("属性")
2 操作样式的语法
设置单个 ：jquery对象.css("属性","值")
设置多个: jquery对象.css({"属性1":"值1","属性2":"值2"......})
获取: jquery对象.css("属性")
jquery控制特殊属性
表单元素的 checked 、disabled、selected等
把jquery对象,attr() 改为 jquery对象.prop()
console.log($("#c").prop("checked"));
jquery的选择器和过滤器
目的：找元素
1 基本选择器： id 、class、标签
2 并集、交集
2.1并集:通过逗号分隔 ,类似于或者 console.log($(".x,div,#s2"));
2.2交集：通过无符号分隔 ,类似于并且 console.log($("div.x#d1"));
顺序：标签、类、id
3 层次选择器
3.1 找子孙后代 $("选择器1 选择器2")
3.2 找第一级的所有儿子 $("选择器1 > 选择器2")
3.3 找后面第一个兄弟 $("选择器1 + 选择器2")
3.4 找后面的所有兄弟 $("选择器1 ~ 选择器2")
4 基本过滤器
4.1 获得第一个元素 $("选择器:first")
4.2 获得最后一个元素 $("选择器:last")
4.3 获得偶数元素 $("选择器:even") 下标从0开始
4.4 获得奇数元素 $("选择器:odd") 下标从0开始
4.5 获得指定元素 $("选择器:eq(n)") 下标从0开始
5 内容过滤器
根据内容筛选(是否包含) $("选择器:contains(内容)")
6 属性过滤器
根据属性进行过滤
6.1$("选择器[属性1=值1][.......]") 属性等于
6.2$("选择器[属性1!=值1][.......]") 属性不等于
6.3$("选择器[属性1^=值1][.......]") 属性以。。开头
6.4$("选择器[属性1$=值1][.......]") 属性以..结尾
6.5$("选择器[属性1*=值1][.......]") 属性包含
7 子元素过滤器
7.1$("选择器:first-child") 获取元素的爸爸的第一个儿子
7.2$("选择器:last-child") 获取元素的爸爸的最后个儿子
7.3$("选择器:nth-child(n)") 获取元素的爸爸的指定儿子 下标从1开始
$("li:nth-child(1)").css("background-color", "orange")
8 表单元素状态过滤器(checked、selected、disabled…)
$("选择器:checked") 获取被勾选的元素
$("选择器:selected") 获取选择的元素
jquery操作value和innerHTML
jquery操作
//获得
var 命名 = jquery对象.val();
//赋值
jquery对象.val("值");
//获得
var 命名 = jquery对象.html();
//赋值
jquery对象.html("值")；
//获得
var 命名 = jquery对象.text();
//赋值
jquery对象.text("值")
jquery对象.eq(i)—>返回的是jquery元素
jquery节点
以下所有节点都是jquery对象
1 创建节点
var 节点=$("<标签 属性=''></标签>");
var 节点=$("<标签 属性=''/>");
2 追加节点 （如果追加的是已存在的节点则为移动）
父追加子 父节点.append(子节点/新节点)
同级追加 子节点.after(新节点)
子节点.before(新节点)
$(function() {
$("#btn").click(function() {
//创建节点
//方式一
var li = $("<li>" + $("#txt").val() + "</li>");
//方式二
var lia = $("<li></li>").html($("#txt").val());
//追加节点
//方式一
$("#ul").append($("<li>" + $("#txt").val() + "</li>"));
//方式二
$("#ul").append(li);
$("#ul").append(lia);
})
})
3 删除 -- 把当前的节点给删除
节点对象.remove();
4 清空 --- 把当前节点里面的内容清空
节点对象.empty()
5 克隆
节点对象.clone();---返回一个和该节点相容的节点对象
6 让表单元素默认选中
节点.val(["value值",....])
<input type="radio" name="sex" id="" value="男" >
<input type="radio" name="sex" id="" value="女">
<input type="checkbox" name="" id="" value="吃饭">
<input type="checkbox" name="" id="" value="睡觉">
<input type="checkbox" name="" id="" value="打豆豆">
<select name="" id="sel">
<option value="a">aa</option>
<option value="b">bb</option>
</select>
$("input[type=radio]").val(["女"])
$(input[type=checkbox]").val(["吃饭", "打豆豆"])
$("#sel").val(["b"]);
7 找爸爸
7.1 节点.closest("选择器") ---->找到该节点的最近的一个满足选择器的父节点
7.2 节点.parents("选择器")-->找到该节点的满足选择器的所有父节点
8 找儿子
8.1 节点.children(选择器)获取第一级所有儿子
8.2 节点.find(选择器) 获取满足选择器的子节点(无视层级:儿子、孙子都可以)
9 找兄弟
9.1 找上一个兄弟 节点.prev(选择器) 只能找相邻的元素
9.2 找下一个兄弟 节点.next(选择器) 只能找相邻的元素
9.3 找相邻所有兄弟 节点.siblings(选择器)
jquery on 的用法 --操作动态生成节点
父元素.on('去掉on的事件类型','操作的那个元素对象',function(){})
第二个参数：可以直接用“”，也可以用$()
$("#btn2") 或 "#btn2"
<button id="btn">生成一个动态按钮</button>
<div id="d">
</div>
<script>
$(function() {
$("#btn").click(function() {
//创建按钮
var btn = $("<button id='btn2'>新按钮</button>");
//追加
$("#d").append(btn);
})
$("#d").on("click", $("#btn2"), function() {
alert(123);
})
})
</script>
jquery的合成事件
语法 :如果是鼠标进入和离开，则我们可以使用合成事件
对象.hover(function(){鼠标进入的代码},function(){鼠标离开的代码})
trigger --触发
当我们去操作一个事件时，可以通过trigger去触发另一个事件
对象.trigger('事件')
<button id="btn">生成一个动态按钮</button>
<script>
$(function() {
$("#btn").click(function() {
alert("点击");
//触发div的鼠标进入事件
$("div").trigger("mouseover");
})
$("div").mouseover(function() {
$(this).css("background-color", "red");
})
</script>
jquery动画
隐藏显示动画
1 正常:
对象.show(毫秒) 显示
对象.hide(毫秒) 隐藏
2 淡入淡出
对象.fadeIn(毫秒) 显示
对象.fadeOut(毫秒) 隐藏
3 延申和收缩
对象.slideDown(毫秒) 显示
对象.slideUp(毫秒) 隐藏
自定义动画
对象.animate(样式,毫秒[,function(){}])
样式: {"属性1":"值1",.....}
这里的样式是描述的最终的状态
1 简单运动
$("div").animate({
"left": "1000px"
}, 2000)
2 累加运动
$("div").animate({
"left": "-=200px"
}, 2000)
***注意：有的属性不支持动画
停止动画
对象.stop(true)
能够停止正在执行或将要执行的所有动画
mouseenter和mouseleave
mouseenter:鼠标进入事件,可以阻止冒泡 ,但是mouseover却不能
mouseleave：鼠标离开事件 ,可以阻止冒泡,但是mouseout却不能
<div id="d1"><div id="d2"></div></div>
<script>
$("#d1").mouseenter(function() {
console.log("进入");
})
$("#d1").mouseleave(function() {
console.log("离开");
})
</script>
jquery循环
节点循环
jquery对象.each(function(i,o){})
i:代表下标
o:代表循环中的每一个元素(js对象) ,this:代表循环中的每一个元素(js对象)
$(o):代表循环中的每一个元素(jquery对象),$(this):代表循环中的每一个元素(jquery对象)
数据循环
$.each(arr,function(i,o){}) 替代for
var arr = [1, 2, 3, 4];
$.each(arr, function(i, o) {
console.log(i + ":" + o);
})
<!-- 平常用法 -->
for(var i=0;i<arr.length;i++){
console.log(i+":"+arr[i]);
}
附加：
1 ==和===的区别?
==：值相同
===：值和类型相同
2 return可以单独使用么，如果能，代表什么意思?
只能出现在函数中:
情况1：
return 值 --返回
情况2：
return ； 代表终止当前函数
什么叫闭包
闭包就是函数内部的函数
特点：能够保存局部遍历，不被GC回收
为什么要使用闭包？
因为函数执行完毕后，GC会回收掉里面的所有的局部变量，但是如果在该函数中再定义一个函数则里面的函数就升级为闭包，而根据闭包的特性，就能够让外部函数中定义的局部变量一直保存再内存中，从而不会被GC回收
js使用闭包就能够获取i
var cs = document.getElementsByTagName("input");
for (var i = 0; i < cs.length; i++) {
(function() {
var xx = i;
cs[i].onclick = function() {
alert(xx+":"+i);
}
})()
}
jquery直接使用即可
$("input").each(function(i, o) {
$(o).click(function() {
console.log(i);
})
})
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
