day 49

jQuery的补充

基本筛选器

:first		// 第一个
:last		// 最后一个
:eq(index)	// 索引等于index的那个元素
:even		// 匹配所有索引值为偶数的元素,从0开始计数
:odd		// 匹配所有索引值为奇数的元素,从0开始计数
:gt(index)	// 匹配所有大于给定索引值的元素
:lt(index)	// 匹配所有小于给定索引值的元素
:not(元素选择器)	// 移除所有满足not条件的标签
:has(元素选择器)	// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)

属性选择器

[attribute]
[attribute=value]	// 属性等于
[attribute!=value]	// 属性不等于

表单选择器

:text		
:password
:file
:radio
:checkbox

:submit		// 提交
:reset		// 重置
:button		// 按钮

筛选器方法

下一个元素

$("#id").next
$("#id")/nextAll()		// 同级别下面的所有元素
$("#id").nextUntil()	// 查找下面所有元素,直到匹配到那一个元素为止

上一个元素

$("#id"),prev
$('#id').prevALL()		// 同级别上面的全部元素
$("#id").prevUntil()	// 查找上面所有元素,直到匹配到那一个元素为止	

父亲元素

$("#id").parent()
$("#id").parents()		// 查找当前元素的所有父辈元素
$("#id").parentsUntil()	// 查找当前元素的所有的父辈元素,直到遇到匹配的那个元素为止

儿子和兄弟元素

$("id").children()		// 查找子元素
$("id").sibings()		// 查找兄弟元素

操作标签

样式操作

样式类

addClass():		// 添加指定的css类名
removeClass():	// 移除指定的css类名
hasClass():		// 判断样式存不存在
toggleClass():	// 切换css类名,如果有就删除,如果没有就添加

位置操作

offset()		// 获取匹配元素在当前窗口的相对偏移或设置元素位置
position()		// 获取匹配元素相对父元素的偏移
scrollTop()		// 获取元素相对滚动条顶部的偏移
scrollLeft()	// 获取元素相对滚动条左侧的偏移

尺寸

height()		// 高度
width()			// 宽度
innerHeight		// 文本内容与内边距的高度和
innerWidth		// 文本内容与内边距的宽度和
outerHeight		// 文本内容与内边距与边框的高度和
outerWidth		// 文本内容与内边距与边框的宽度和

文本操作

HTML代码

html()		// 取得第一个匹配元素的html内容
html(val)	// 设置所有匹配元素的html内容

文本值

text()		// 取得所有匹配元素的内容
text(val)	// 设置所有匹配元素的内容

val()		// 取得第一个匹配元素的当前值
val(val)	// 设置所有匹配元素的值
val(val1, val2)	// 设置多选的checkbox,多选select的值

属性操作

attr(attrName)				// 返回第一个匹配元素的属性值
attr(attrName, attrValue)	// 为所有匹配元素设置一个属性值
attr(k1:v1, k2:v2)			// 为索引匹配元素设置多个属性值
removeAttr()				// 从每一个匹配的元素中删除一个属性

用于checkboxradio

prop		// 获取属性
removePorp()	// 移除属性

propattr的区别

attr全称attribute(属性)

prop全称propperty(属性)

两者虽然都是属性,但它们所指的属性并不相同,attr所指的属性是HTML标签属性,而prop所指的是DOM对象属性。

总结

1.对于标签上有的能看到的属性和自定义属性都用attr

2.对于返回布尔值的比如checkboxradio、和option的是否被选中都用prop

文档处理

添加到指定元素内部的后面

$(A).append(B)	// 把B追加到A
$(A).appendTo(B) // 把A追加到B

添加到指定元素内部的前面

$(A).prepend(B)	// 把B前置到A
$(A).prependTo(B) // 把A前置到B

添加到指定元素外部的后面

$(A).after(B)	// 把B放到A的后面
$(A).insertAfter(B)	// 把A放到B的后面

添加到指定元素外部的前面

$(A).before(B)	// 把B放到A的前面
$(A).insertBefore	// 把A放到B的前面

移除和清空元素

remove()	// 从DOM中删除所有匹配的元素
empty()		// 删除匹配的元素集合中所有的子节点

替换

replaceWith()
replaceAll()

克隆

clone()	// 参数复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
    <style>
        button {
            height: 50px;
            width: 80px;
            color: violet;
            border: 3px solid yellow;
            background-color: orangered;
        }
    </style>
</head>
<body>


<button>啊~~~疼</button>

<script>
    // var btnEle = $('button')[0];
    // btnEle.onclick = function () {
    //     $(this).clone().insertAfter(this)
    //     // clone 默认不可隆事件
    // }
	// 如果要克隆事件,使用以下方式
    $("button").on("click", function () {
    $(this).clone(true).insertAfter(this);
  });
</script>

</body>
</html>

事件

常用事件

click(function(){...})		// 鼠标点击
hover(function(){...})		// 悬浮
blur(function(){...})		// 失去焦点
focus(function(){...})		// 聚焦
change(function(){...})		// 改变应用域
keyup(function(){...})		// 按下按键时,改变文本域的颜色

事件绑定

  1. .on(events [, selector ], function(){})
  • event:事件
  • selector:选择器(可选)
  • function:事件处理函数

移除事件

  1. .off(events [, selector ], function(){})

    off()方法移除用 .on()绑定的事件处理程序

  • event:事件
  • selector:选择器(可选)
  • function:事件处理函数

阻止后续事件执行

1.return false; // 常见阻止表单提交等

2.e.preventDefault();

jQuery 绑定事件的语法

jQuery绑定事件的语法
	第一种语法结构:
		$(选择器).事件名(function(){
			// 事件代码
		})
	第二种语法结构    用处更广  
		$(选择器).on('事件名',function(){
			// 事件代码
		})
			# 实时监测input内部输入变化
		    $('input').on('input',function () {
				// 获取用户输入的内容
				console.log($(this).val())
			})

阻止事件冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
</head>
<body>
<div>div
    <p>p
        <span>span</span>
    </p>
</div>

<script>
    $('div').click(function (e) {
        alert('div')
    });
    $('p').click(function (e) {
        alert('p')
    });
    $('span').click(function (e) {
        alert('span');
        e.stopPropagation()	// 阻止事件冒泡
    });



</script>
</body>
</html>

文档加载

js中
	window.onload = function() {
	// 在这里写JS代码
}

jQuery中
	$(document).ready(function() {
	// 在这里写jQuery代码
})
posted @ 2019-11-19 22:08  colacheng  阅读(199)  评论(0编辑  收藏  举报
Live2D