编程语言
首页 > 编程语言> > python day49

python day49

作者:互联网

昨日内容回顾


BOM和DOM

BOM浏览器对象模型

window.location.href  获取当前网页所在的url
window.location.href = url  当前跳转到指定的url
通常是结合ajax一起使用

定时器相关

setTimeOut
clearTimeOut
setInterval
clearInterval

弹出框

alert
confirm
prompt

DOM文档对象模型与DOM树的概念

如何查找标签

基本选择器:

document.getElementById 标签对象本身
document.getElementsByClassName 数组
document.getElementsByTagName 数组

如何操作标签

示例:P标签:

 

pEle
$pEle

节点操作:

document.createElement('标签名')

appendChild:

父标签.insertBefore(新创建的标签,本来就有的标签)
设置标签属性:
获取值:
.value
innerText:文本  不识别标签的
innerHTML:文本标签  识别
classList.remove()   >>>        removeClass()
classList.add()     >>>         addClass()
classList.contains  >>>         hasClass()
classList.toggle    >>>         toggleClass()
// 开关灯示例                

CSS操作:

style.color
style.fontSize

JS绑定事件:

js代码书写位置


jQuery

类库 :$()   jQuery()

$(选择器).action(参数)

原生js对象和jQuery对象转换


今日内容

表单筛选器

复制代码 复制代码
:text
:password
:file
:radio
:checkbox
:submit :reset :button
复制代码 复制代码

例子:

$(":checkbox")  // 找到所有的checkbox

表单对象属性:

:enabled
:disabled
:checked
:selected

例子:

找到可用的input标签

复制代码 复制代码
<form>
  <input name="email" disabled="disabled" />
  <input name="id" />
</form>

$("input:enabled")  // 找到可用的input标签
复制代码 复制代码

 找到被选中的option:

复制代码 复制代码
<select id="s1">
  <option value="beijing">北京市</option>
  <option value="shanghai">上海市</option>
  <option selected value="guangzhou">广州市</option>
  <option value="shenzhen">深圳市</option>
</select>

$(":selected")  // 找到所有被选中的option
复制代码 复制代码

筛选器方法

下一个元素:

$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")

上一个元素:

$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")

父亲元素:

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

儿子和兄弟元素:

$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们

查找

搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

$("div").find("p")

等价于$("div p")


筛选

筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式。

$("div").filter(".c1")  // 从结果集中过滤出有c1样式类的

等价于 $("div.c1")

补充:

.first() // 获取匹配的第一个元素
.last() // 获取匹配的最后一个元素
.not() // 从匹配元素的集合中删除与指定表达式匹配的元素
.has() // 保留包含特定后代的元素,去掉那些不含有指定后代的元素。
.eq() // 索引值等于指定值的元素

示例:左侧菜单

 左侧菜单栏

操作标签

样式操作

样式类:

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

示例:开关灯和模态框

CSS

css("color","red")//DOM操作:tag.style.color="red"

示例:

$("p").css("color", "red"); //将所有p标签的字体设置为红色

位置操作:

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

.offset()方法允许我们检索一个元素相对于文档(document)的当前位置。

和 .position()的差别在于: .position()是相对于相对于父级元素的位移。

示例:

 返回顶部示例

尺寸:

复制代码 复制代码
height()
width()
innerHeight()
innerWidth()
outerHeight()
outerWidth()
复制代码 复制代码

文本操作

HTML代码:

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

文本值:

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

值:

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

例如:

复制代码 复制代码
<input type="checkbox" value="basketball" name="hobby">篮球
<input type="checkbox" value="football" name="hobby">足球

<select multiple id="s1">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
复制代码 复制代码

设置值:

$("[name='hobby']").val(['basketball', 'football']);
$("#s1").val(["1", "2"])

示例:

获取被选中的checkbox或radio的值:

<label for="c1">女</label>
<input name="gender" id="c1" type="radio" value="0">
<label for="c2">男</label>
<input name="gender" id="c2" type="radio" value="1">

可以使用:

$("input[name='gender']:checked").val()
 自定义登录校验示例

属性操作

用于ID等或自定义属性:

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

用于checkbox和radio:

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

注意:

在1.x及2.x版本的jQuery中使用attr对checkbox进行赋值操作时会出bug,在3.x版本的jQuery中则没有这个问题。为了兼容性,我们在处理checkbox和radio的时候尽量使用特定的prop(),不要使用attr("checked", "checked")。

复制代码 复制代码
<input type="checkbox" value="1">
<input type="radio" value="2">
<script>
  $(":checkbox[value='1']").prop("checked", true);
  $(":radio[value='2']").prop("checked", true);
</script>
复制代码 复制代码

prop和attr的区别:

虽然都是属性,但他们所指的属性并不相同,attr所指的属性是HTML标签属性,而prop所指的是DOM对象属性,可以认为attr是显式的,而prop是隐式的。

举个例子:

<input type="checkbox" id="i1" value="1">

针对上面的代码:

$("#i1").attr("checked")  // undefined
$("#i1").prop("checked")  // false

可以看到attr获取一个标签内没有的东西会得到undefined,而prop获取的是这个DOM对象的属性,因此checked为false。

如果换成下面的代码:

<input type="checkbox" checked id="i1" value="1">

再执行:

$("#i1").attr("checked")   // checked
$("#i1").prop("checked")  // true

这已经可以证明attr的局限性,它的作用范围只限于HTML标签内的属性,而prop获取的是这个DOM对象的属性,选中返回true,没选中返回false。

接下来再看一下针对自定义属性,attr和prop又有什么区别:

<input type="checkbox" checked id="i1" value="1" me="自定义属性">

执行以下代码:

$("#i1").attr("me")   // "自定义属性"
$("#i1").prop("me")  // undefined

可以看到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(B)// 把A放到B的前面

移除和清空元素

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

例子:

替换

replaceWith()
replaceAll()

克隆

clone()// 参数

克隆示例:

 点击复制按钮

事件

常用事件

复制代码 复制代码
click(function(){...})
hover(function(){...})
blur(function(){...})
focus(function(){...})
change(function(){...})
keyup(function(){...})
复制代码 复制代码

keydown和keyup事件组合示例:

 按住shift实现批量操作

hover事件示例:

 hover事件

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

 input值变化事件

事件绑定

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

移除事件

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

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

阻止后续事件执行

  1. return false; // 常见阻止表单提交等
  2. e.preventDefault();
复制代码 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阻止默认事件</title>
</head>
<body>

<form action="">
    <button id="b1">点我</button>
</form>

<script src="jquery-3.3.1.min.js"></script>
<script>
    $("#b1").click(function (e) {
        alert(123);
        //return false;
        e.preventDefault();
    });
</script>
</body>
</html>
复制代码 复制代码

注意:

像click、keydown等DOM中定义的事件,我们都可以使用`.on()`方法来绑定事件,但是`hover`这种jQuery中定义的事件就不能用`.on()`方法来绑定了。

想使用事件委托的方式绑定hover事件处理函数,可以参照如下代码分两步绑定事件:

复制代码 复制代码
$('ul').on('mouseenter', 'li', function() {//绑定鼠标进入事件
    $(this).addClass('hover');
});
$('ul').on('mouseleave', 'li', function() {//绑定鼠标划出事件
    $(this).removeClass('hover');
});
复制代码 复制代码

阻止事件冒泡

复制代码 复制代码
<!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>
复制代码 复制代码

页面载入

当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数,因为它可以极大地提高web应用程序的响应速度。

两种写法:

$(document).ready(function(){
// 在这里写你的JS代码...
})

简写:

$(function(){
// 你在这里写你的代码
})

文档加载完绑定事件,并且阻止默认事件发生:

 登录校验示例

与window.onload的区别:


事件委托

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

示例:

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

$("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])
复制代码 复制代码

自定义动画示例:

 点赞特效简单示例

补充

each

jQuery.each(collection, callback(indexInArray, valueOfElement)):

描述:

一个通用的迭代函数,它可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性(如一个函数的参数对象)来迭代数字索引,从0到length - 1。其他对象通过其属性名进行迭代。

li =[10,20,30,40]
$.each(li,function(i, v){
  console.log(i, v);//index是索引,ele是每次循环的具体元素。
})

输出:

010
120
230
340

.each(function(index, Element))

描述:

// 为每一个li标签添加foo
$("li").each(function(){
  $(this).addClass("c1");
});

注意:

jQuery的方法返回一个jQuery对象,遍历jQuery集合中的元素 - 被称为隐式迭代的过程。当这种情况发生时,它通常不需要显式地循环的 .each()方法:

也就是说,上面的例子没有必要使用each()方法,直接像下面这样写就可以了:

$("li").addClass("c1");  // 对所有标签做统一操作

注意:

在遍历过程中可以使用 return false提前结束each循环。

终止each循环

return false;

.data()

在匹配的元素集合中的所有元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。

.data(key, value)

描述:

在匹配的元素上存储任意相关数据。

$("div").data("k",100);//给所有div标签都保存一个名为k,值为100

.data(key)

描述:

返回匹配的元素集合中的第一个元素的给定名称的数据存储的值—通过 .data(name, value)或 HTML5 data-*属性设置。

$("div").data("k");//返回第一个div标签中保存的"k"的值

.removeData(key)

描述:

移除存放在元素上的数据,不加key参数表示移除所有保存的数据。

$("div").removeData("k");  //移除元素上存放k对应的数据

示例:

模态框编辑的数据回填表格

插件(了解即可)

jQuery.extend(object)

jQuery的命名空间下添加新的功能。多用于插件开发者向 jQuery 中添加新函数时使用。

示例:

复制代码 复制代码
<script>
jQuery.extend({
  min:function(a, b){return a < b ? a : b;},
  max:function(a, b){return a > b ? a : b;}
});
jQuery.min(2,3);// => 2
jQuery.max(4,5);// => 5
</script>
复制代码 复制代码

jQuery.fn.extend(object)

一个对象的内容合并到jQuery的原型,以提供新的jQuery实例方法。

复制代码 复制代码
<script>
  jQuery.fn.extend({
    check:function(){
      return this.each(function(){this.checked =true;});
    },
    uncheck:function(){
      return this.each(function(){this.checked =false;});
    }
  });
// jQuery对象可以使用新添加的check()方法了。
$("input[type='checkbox']").check();
</script>
复制代码 复制代码

单独写在文件中的扩展:

复制代码 复制代码
(function(jq){
  jq.extend({
    funcName:function(){
    ...
    },
  });
})(jQuery);
复制代码 复制代码

例子:

自定义的jQuery登录验证插件

 HTML文件  JS文件

 传参版插件:

 HTML文件  JS文件

标签:function,jQuery,示例,python,标签,元素,day49,属性
来源: https://www.cnblogs.com/zhukaijian/p/11498814.html