jquery教程

jquery教程

1.选择网页元素

• $() 参数：css选择器形式的字符串
• 通过id名选择 $("#div1")
• 通过class名选择 $(".div1")
• 通过标签名选择 $(“div”)
• 通过name选择 $("[name = hello]")
• 选择同一元素中的第一个 $(“li:first”)
• 选择同一元素中的最后一个 $(“li:last”)
• 选择同一元素中的奇位数 $(“li:odd”)
• 选择同一元素中的偶位数 $(“li:even”)
• 指定同一元素中的某一个 $(“li:eq（2）”) 或 $(“li”).eq（2）
• 通过过滤选择 $(“li”).filter(".box")

2.函数
$(function(){ })
等价于
window.onload = function(){ }

给节点添加事件
$(“li”).click(function(){ })

链式操作
给同一个节点添加不同事件时：
例：
$(function(){
$(“li”).click(function(){
this.style.backgroundColor = ‘red’;
}).mouseover(function(){
this.style.backgroundColor = ‘black’;
}).mouseout(function(){
this.style.backgroundColor = ‘blue’;
}).css(“backgroundColor”, ‘pink’);
});

3.取值赋值一体化
①css样式
取值：$("#div1").css(“width”);
赋值单个样式： $("#div1").css(“width”, “300px”);
赋值多个样式：
$("#div1").css({
width: 300,
height: “300px”,
“backgroundColor”: ‘orange’
})

②标签间内容
取值： $("#div1").html();
赋值： $("#div1").html(“hello world”);

③输入框内值
取值：$("#div1").html();
赋值： $(“input”).val(“xxx”);

4.几种常用方法
1.filter 过滤
例：
找出li节点中class = box的：$(“li”).filter(".box")

2.not 相当于filter的反义词
例：
找出li节点中class != box的：$(“li”).not(".box")

3.has 拥有
例：
找出拥有class=box的子节点的div节点
$(“div”).has(".box")

4.next() 找到当前节点的下一个兄弟节点
例：
$("#div2").next()

5.prev() 找到当前节点的上一个兄弟节点
例：
$("#div2").prev()

6.find() 查找子节点
例：
$(“div”).find(".box")

7.eq(下标) 通过下标获取想要的元素
例：
$(“div”).eq(1)
或
$(“div:eq(2)”)

8.index() 返回当前这个节点在其兄弟节点中的下标
例：
$("#div1").index();

9.css 处理css样式
取值：
例：
$("#div1").css(“width”);

赋值单个样式：
例：
$("#div1").css(“width”, “300px”);

赋值多个样式：
例：
$("#div1").css({
width: 300,
height: “300px”,
“backgroundColor”: ‘orange’
})

10.attr 处理行间样式
取值：
例：
$(“div”).attr(“class”)

赋值单个行间样式：
例：
$(“div”).attr(“title”, “xxx”);

赋值多个行间样式：
例：
$(“div”).attr({
title: “xxx”,
name: ‘yyy’,
class: ‘box’
})

11.addClass 新增css样式
例：
$("#div1").addClass(“box3 box4 box2”);
※添加class时，如果其中有重复的会自动去重

12.removeClass 删除css样式
例：
$("#div1").removeClass(“box2 box3”);
※删除class时，如果没有class，也会自动去掉

13.获取宽的方法
width() 获取width

innerWidth() 获取width + padding

outerWidth() 获取width + border + padding

outerWidth(true) 获取width + border + padding + margin

14.获取高的方法
同上

15.节点操作方法
insertBefore()
例：
$(“span”).insertBefore( $(“div”))
找到span节点，插入到div节点的前面

insertAfter()
例：
$(“div”).insertAfter( $(“span”))
找到div节点，插入span节点的后面

appendTo()
例：
$(“span”).appendTo( $(“div”))
找到span节点，插入到div的子节点的末尾

prependTo()
例：
$(“span”).prependTo( $(“div”))
找到span节点，插入div节点的子节点的首位

remove()
例：
$(“div”).remove()
找到节点并删除

before()
例：
$("div").before($(“span”))
div前面是span

after()

append()

prepend()

※前五种方法主体是前者，后四种主体是后者

16.on 绑定事件
给 单个事件 绑定 单个函数
例：
$(“div”).on(“click”, function(){
alert(“单击1”);
})
参数：①事件，②函数

给 多个事件 绑定 同一函数
例：
$(“div”).on(“click mouseover”, function(){
alert(“单击1”);
})
参数：①多个事件，②函数

给 多个事件 绑定 不同函数
例：
$(“div”).on({
click: function(){
alert(“单击”);
},
mouseover: function(){
$(this).css(“backgroundColor”, ‘red’);
}
})
参数：对象

添加事件委托
例：
$(“ul”).on(“click”, “li.box”, function(){
$(this).css(“backgroundColor”, ‘red’);
})
参数：①事件，②触发对象，③函数

17.off 取消事件绑定
取消 所有事件
例：
$(“div”).off();

取消 某个事件
例：
$(“div”).off(“click”);

取消 某个事件 上 某个函数
例：
$(“div”).off(“click”, show);
※必须带函数名

18.scrollTop() 获取当前页面的滚动高度
例：
$(window).scrollTop()

19.return false;
既阻止默认行为，又阻止事件冒泡

这里只介绍了其中几种方法，详细可以通过网站 https://www.bilibili.com/video/av77746919?from=search&seid=12755907908855645155

进行深度学习