Python50days-526互联

筛选器方法

document.getElementById（）-------标签对象-------标签

jQuery对象
$（document.个体、ElementById（））----------jQuery对象----------可以使用jQuery对象提供的方法

如何把jQuery对象转为标签对象 $===jQuery

$( )[0]

$("#id") ===jQuery("#id")

菜单例子

hide——隐藏菜单当菜单一打开时隐藏菜单二三

padding 内边距：上下px 左右px；
margine 外边距

.menu 文字白色

背景颜色为白色

占满100% 右方的80%

链式操作

this --当前对象 .tetle +$ ===jQeury对象

next -- div

.parent 父元素

先将点击标题所有 hide隐藏再把当前点击的标签加上

只要点方法是 jQuery对象可以一直增加

而在pycharm中链式操作

操作标签

样式类

classlist对象：

classList.add（）

classList.remove（）

classList.containers（）

classList.toggle（）

addclass（）；添加指定的css类名

removeClass（）；移除指定的css类名

hasClass（）；判断样式存不存在

toggleClass（）；切换css类名，如果有就移除没有就添加

改颜色 JS

jQuery改颜色

div是为了增加滑动的距离

button按钮就是样式

$("#b1").on（"click"），function（）{ —————支持事件委托

}

与 $("#b1").click(function(){ ——————不支持事件委托

})

而事件监听绑定

尺寸：

文本操作：

innerText ——text（）

innerHTML —— html（）

JS：　

jQuery:

值操作：

value属性

jQuery：

　　　　$("#d1").value();

console. log($("#d1").val())

设置值：

$(" #d1").value(' 我很好')

　　JS:

　　document.getElementById('d1').value;

# 获取被选中的 checkbox或radio的值（复选框单选框）

　　console.log ($ ("input [name='gender']:checked").val ( ));

属性操作：

　　JS：

　　jQuery：

推荐不适用 attr

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

对于返回布尔值的比如 checkbox，radio，和option的是否被选中都用prop

文档处理

let $pEle =$('<p>')

var p = $("<p>")

建议不加 $

JS创建标签

　　document.createElement('p');

jQuery

　　$('<p>');

增加文本

var p = $("<p>");

　　p.txt('这是p标签')

div.append(p);

常用事件：

click(function(){...})
hover(function(){...})
blur(function(){...})
focus(function(){...})
change(function(){...})
keyup(function(){...})
input监控
$(window).keydown(function (event) {
console.log(event.keyCode)
if (event.keyCode === 16){
alert('你按了shift键')
}
})

实时监听input输入值变化示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>实时监听input输入值变化</title>
</head>
<body>
<input type="text" id="i1">

事件绑定

.on( events [, selector ],function(){})

events：事件
selector: 选择器（可选的）
function: 事件处理函数

移除事件

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

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

events：事件
selector: 选择器（可选的）
function: 事件处理函数

阻止后续事件执行

return false; // 常见阻止表单提交等
e.preventDefault();

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>阻止默认事件</title>
</head>
<body>

阻止事件冒泡

嵌套关系会触发三次

想要取消某个冒泡时将 e.stopPropagation(); 加入该句中

例子

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>阻止事件冒泡</title>
</head>
<body>
<div>
<p>
<span>点我</span>
</p>
</div>
<script src="jquery-3.3.1.min.js"></script>
<script>
$("span").click(function (e) {
alert("span");
e.stopPropagation();
});

$("p").click(function () {
alert("p");
});
$("div").click(function () {
alert("div");
})
</script>
</body>
</html>

事件委托

事件委托是通过事件冒泡的原理，利用父标签去捕获子标签的事件。

示例：

表格中每一行的编辑和删除按钮都能触发相应的事件。

$("table").on("click", ".delete", function () {
// 删除按钮绑定的事件
})

动画效果

// 基本
show([s,[e],[fn]])
hide([s,[e],[fn]])
toggle([s],[e],[fn])
// 滑动
slideDown([s],[e],[fn])
slideUp([s,[e],[fn]])
slideToggle([s],[e],[fn])
// 淡入淡出
fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]])
fadeToggle([s,[e],[fn]])
// 自定义（了解即可）
animate(p,[s],[e],[fn]

i、标签表示倾斜

绝对定位：相对于父元素
固定定位：浏览窗口

相对于定位：相对于自己原来的位置

each ——主要用来做循环

jQuery.each(collection, callback(indexInArray, valueOfElement))：
描述：一个通用的迭代函数，它可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性（如一个函数的参数对象）来迭代数字索引，从0到length - 1。其他对象通过其属性名进行迭代。