python学习之前端

jQuery

筛选器方法

下一个元素：

$("#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()     // 索引值等于指定值的元素

操作标签

用于处理 HTML 和 CSS 的 jQuery 方法。

样式操作

方法	描述
addClass()	向被选元素添加一个或多个类名
removeClass()	从被选元素移除一个或多个类
hasClass()	检查被选元素是否包含指定的 class 名称
toggleClass()	在被选元素中添加/移除一个或多个类之间切换

CSS

.css('样式名','样式值')  //DOM操作：tag.style.color="red"

例

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

文本操作

方法	描述
html()	设置或返回被选元素的内容
text()	设置或返回被选元素的文本内容
val()	设置或返回被选元素的属性值（针对表单元素）

属性操作

方法	描述
attr()	设置或返回被选元素的属性/值
removeAttr()	从被选元素移除一个或多个属性
prop()	设置或返回被选元素的属性/值
removeProp()	移除通过 prop() 方法设置的属性

prop和attr的区别：

attr全称attribute(属性)

prop全称property(属性)

虽然都是属性，但他们所指的属性并不相同，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不支持获取标签的自定义属性。

总结：

对于标签上有的能看到的属性和自定义属性都用attr
对于返回布尔值的比如checkbox、radio和option的是否被选中都用prop。

文档处理

方法	描述
append()	在被选元素的结尾插入内容
prepend()	在被选元素的开头插入内容
after()	在被选元素后插入内容
insertAfter()	在被选元素后插入 HTML 元素
before()	在被选元素前插入内容
insertBefore()	在被选元素前插入 HTML 元素
remove()	移除被选元素（包含数据和事件）
empty()	从被选元素移除所有子节点和内容

事件

绑定事件

在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。

方式一

jQuery对象.事件名(function(){    
    // 事件触发后执行的代码
});

例

$btnEle.click(function(){
    alter(123)
})

方式二

jQuery对象.on('事件名',function(){
    // 事件触发后执行的代码
})

例

$btnEle.on('click',function(){
    alter(123)
})

常用事件

方法	描述
click()	当按钮点击事件被触发时会调用一个函数
hover()	用于模拟光标悬停事件
blur()	当元素失去焦点时，发生 blur 事件
focus()	当元素获得焦点时，发生 focus 事件
change()	当元素的值改变时发生 change 事件（仅适用于表单字段）
keyup()	当键盘键被松开时发生 keyup 事件

阻止后续事件

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

例

<!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.0">
    <title>阻止提交事件</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
    <form action="">
        <p>username:<input type="text" name="username"></p>
        <input type="submit" value="提交">

        <script>
            $(':submit').click(function (e){
                alert('123123')
                return false
                // e.preventDefault()
            })
        </script>
    </form>
</body>
</html>

事件冒泡

涉及到标签嵌套并且有相同事件的时候，那么会逐级往上反馈并执行

<!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.0">
    <title>阻止事件冒泡</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
    <div>
        <p>
            <span>点我</span>
        </p>
    </div>

    <script>
        $("span").click(function (e) {
            alert("span");
            // return false   // 方式一
            e.stopPropagation();   // 方式二
        });
    
        $("p").click(function () {
            alert("p");
        });
        $("div").click(function () {
            alert("div");
        })
    </script>
</body>
</html>

事件委托

事件绑定默认情况下是不会对动态创建的标签生效的，如果想生效需要事件委托

<!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.0">
    <title>事件委托</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
    <div>
        <button>点我123</button>
        <button>点我321</button>
    </div>
    
    <script>
        // $('button').click(function () {
        //     alert('aaaaa')
        // })
        $('div').on('click','button',function () {
            alert('11111')
        })
    </script>
</body>
</html>

创建标签的两种方式
// JS
	document.createElement()
// jQuery
	$('<标签名>')

Bootstrap框架

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。

Bootstrap优势

移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。
**浏览器支持: **所有的主流浏览器都支持 Bootstrap。
容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。
响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。
它为开发人员创建接口提供了一个简洁统一的解决方案。
它包含了功能强大的内置组件，易于定制。
它还提供了基于 Web 的定制。
它是开源的。

Bootstrap 包的内容

基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在 Bootstrap 基本结构 部分详细讲解。
CSS：Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。这将在 Bootstrap CSS 部分详细讲解。
组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在 布局组件 部分详细讲解。
JavaScript 插件：Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。
定制：可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。

Bootsrap官网

Bootstrap中文网

posted @ 2022-08-29 21:36 梦想有双休阅读(241) 评论(0) 收藏举报

刷新页面返回顶部

yi-chun