- 节点:元素节点 属性节点 文本节点
- dom 文档对象模型
- console.log(“听课”); 输出括号里的内容
- alert(“你好”) 弹出弹出框
- document.title 获取文档标题.
- toggleClass 添加删除类名
- $(".box").bind(“click”,function(){
$(this).css(“background-color”,“yellow”) 事件绑定
}) <script src="script/jquery.js"></script>
引用 写在body里面 结构下面
<script><br> $(".box") 格式 </script>
<script src="script/jquery.js"></script>
- 放在head里面
$(function(){
$(".box").css("background-color","red"); 放在head里面
});
-
$(".box").css(“background-color”,“green”); 改变颜色
-
过滤选择器:
$(“div:last”) 选择下面的 最后一个
$(“div:first”) 选择上面的 第一个
li:first-child" 改变列表的第一个
li:last-child" 改变列表的最后一个
li:nth-child(3)" 可选择的 -
$(".box").css({“background”:“red”,“width”:“200px”,“height”:“300px”}) 样式
-
click() 点击事件
-
$(".box").click(function(){
$(".box").css(“background-color”,“yellow”); 点击变色
}); -
$(this) 这个元素
-
.height() 方法 改变元素的高度
$(“p”).height(“200px”); -
在jQuery中,attr()函数和prop()函数都用于设置或获取指定的属性,它们的参数和用法也几乎完全相同。
attr()函数主要依赖的是Element对象的getAttribute()和setAttribute()两个方法。prop()函数主要依赖的则是JS中原生的对象属性获取和设置方式。
.attr() 获取或改变属性节点(元素节点 属性节点 文本节点)
$(this).attr(“src”,“images/2.jpg”) -
.index() 获取相对应元素的索引值
$(this).index(); -
var ind = $(this).index(); var 变量 ind 变量名(不能用数字) = 赋值
-
var src = “images/” + ind +".jpg"; 目标路径
-
.addClass() 添加一个类 括号里是类名 加双引号("") 没有点(.)
-
$(this).addClass(“active”);
-
.siblings() 同级元素
-
.removeClass() 删除类名
-
.hide() 隐藏(单位毫秒)
$(".box").hide(2000) -
.show() 显示 (单位毫秒)
$(".box").show(2000) -
.fadeIn() 渐入
$(".box").fadeOut(2000); -
.fadeOut() 渐出
$(".box").fadeIn(2000); -
.slideUp(2000) 上卷
$(".box").slideUp(2000); -
.slideDown(2000) 下拉
$(".box").slideDown(2000); -
.toggle() 切换隐藏和显示
$(".box").toggle(2000); -
.fadeToggle() 切换渐出和渐入
$(".box").fadeToggle(2000); -
.slideToggle() 切换上卷和下拉
$(".box").slideToggle(2000); -
.animate() 自定义动画
$(".box").animate
({marginLeft:“200px”,width:“300px”,height:“350px”,opacity:“0.5”},2000);
- .mouseenter() 鼠标移入事件
$(".box").mouseenter(function(){
$(this).css(“background-color”,“yellow”)
-
.mouseleave() 鼠标移出事件
-
.find() 寻找子孙级的元素
-
.stop() 结束之前的动画
-
eq() 根据索引匹配相关元素
var ind = $(this).index();
$(“div”).eq(ind)
-
dom 文档对象模型
-
.append() 在文本后面追加内容
-
.prepend() 在元素的前边添加
-
.before(li) 被选元素的前面添加
-
.after(li) 别选元素后边添加
-
.parent() 父级元素
-
.remove() 删除被选元素以及子级元素
$(".list span").click(function(){
$(this).parent().remove();
});
-
.empty() 清空 .清空被选子级元素
-
.val() 设置或获文本值取
var val = $("#txt").val(); -
.text() 获取或改变文本节点 添加文本节点
-
.clone() 复制节点
$(this).clone(true).appendTo(“ul”); 加ture后添加的也能被复制
-
.appendTo() 追加到
.appendTo(“ul”) -
.wrap() 包裹节点
")
$(“strong”).wrap(" -
.replaceWith() 替换节点
$(“p”).replaceWith§; -
.bind 事件绑定
$(".box").bind(“click”,function(){
$(this).css(“background-color”,“yellow”)
})
.blur() 失去焦点时触发事件 -
.focus()
获取焦点事件
.focus(function(){
$(this).css(“background-color”,“yellow”)
});
- .change() 当文本域被使用时触发该事件
$(".txt").change(function(){
$(this).css(“background-color”,“yellow”)
})
- .unbind() 事件解绑 ()里的参数是事件类型
$("#btn1").unbind(“click”);
- .delegate() 事件委托
第一个参数是委托的元素对象
第二个参数是事件类型
第三个参数是一个函数
$(“ul”).delegate(".del",“click”,function(){
$(this).parent().remove();
})
-
.mousemove() 鼠标移动事件
-
.event 事件对象,纪录时间当前的状态
event.pageX; 获取x轴坐标
event.pageY; 获取y轴坐标
- .fadeTo 设置元素透明度 遮层
$(this).fadeTo(400,0.5)
$(this).fadeTo(400,1)
-
.scroll() 滚动事件
-
$(document) 浏览器文本对象
var z; 全局变量 $(".list option").click(function(){ z = $(this) }); $(".btn").click(function(){ $(".list1").append(z) z.appendTo(".list1") });
-
.scrollTop() 获取向上滚动距离
-
if(判断条件){
执行语句1 判断语句
}else{
执行语句2
}
当满足小括号里的判断条件,
就执行语句1
否则执行语句2 -
$(window).scroll 滚动事件用 windows
$(“html,body”).animate({scrollTop:350}) 用于文档某个元素
$(".my-check").attr(“checked”,true) 全选 true 真
$(".my-check").attr(“checked”,false) 全部选 false 假
- .each() 为每一个匹配的元素执行函数 循环
.prop 设置属性节点
( t h i s ) . p r o p ( " c h e c k e d " , ! (this).prop("checked",! (this).prop("checked",!(this).prop(“checked”))
! 非 反的
odd 奇数行
even 偶数行
.on() 事件绑定
$(“input”).on(“click”,function(){
})
.load 加载时的效果
this 是 html 对象
$(this) jquery 方法
x++ 加1
x-- 减1
.mouseover 鼠标移入事件
不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件。
只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。
mouseout 鼠标移出事件
不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件。
只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件。
var x=0
$(".plus").click(function(){
var num = ++x 点击加1
$(“span”).text(num)
});
$(".btn").click(function(){
if (x>0) {
var num = --x
$(“span”).text(num) 点击减1
} else{};
});
resize 尺寸
KaTeX parse error: Expected '}', got 'EOF' at end of input: … if ((this).width()>700) {
$(“ul”).css(“display”,“block”)
} else{};
});