Python全栈 Web(jQuery 一条龙服务)

简介: jQuery是一个轻量级的JS库 - 是一个被封装好的JS文件,提供了更为简便的元素操作方式

先为大家带来一点福利,领取千元大礼包,阿里云代金券领取地址:https://promotion.aliyun.com/ntms/yunparter/invite.html?userCode=qyowv5ea

jQuery
1.jQuery介绍

jQuery是一个轻量级的JS库 - 是一个被封装好的JS文件,提供了更为简便的元素操作方式

核心理念:Write Less Do More

jQuery版本:
    jQuery 2.x  不再支持IE6.7.8
    jQuery 1.11.x
AI 代码解读

2.使用jQuery

1.引入jQuery文件
    <script src="jquery-1.11.3.js"></script>
    注意:jQuery文件的引入操作必须要放在其他jQuery操作之前
AI 代码解读

3.jQuery对象

1.什么是jQuery对象
    jQuery对象是由jQuery对页面元素进行封装后的一种体现
    jQuery中所提供的所有的操作都只针对jQuery对象,DOM对象不能用
2.工厂函数 - $()
     作用:
         1.能够获取 jquery对象
         2.能够将DOM对象转换为 jquery 对象
     语法:
         $(选择器/DOM对象);
             $()能够将选择器 和 DOM对象封装成jQuery对象进行返回
3.DOM对象 和 jQuery对象之间的转换
    DOM对象:只能使用DOM提供的操作,不能使用jQuery操作
    jQuery对象:只能使用jQuery操作,不能使用DOM操作
    1.将DOM对象转换为jQuery对象
        语法:
            var 变量 = $(DOM对象);

            注意:所有的jQuery对象在起名的时候,最好在变量名称前+$,用于区分与DOM对象的区别
    2.将jQuery对象转换为DOM对象
        1. var dom对象 = jQuery对象.get(0)
        2. var dom对象 = jQuery对象[0]
AI 代码解读

4.jQuery选择器

1.作用
    获取页面上的元素们,返回值都是由JQ对象所组成的数组.
    语法: $("选择器");
2.选择器详解
    1. 基础选择器
            1. ID选择器
                    $('#id');
                    返回id属性值为指定id的元素对象
            2. 类选择器
                    $(".className");
                    返回指定类名对象的元素
            3. 标签选择器
                    $('element');
                    返回指定标签名对应的元素
            4. 群组选择器
                    $('selector1,selector2,...');

    2.层级选择器
        1.$("selector1+selector2")
            名称:相邻兄弟选择器
            作用:匹配紧紧跟在selector1后面且满足selector2选择器的元素
        2.$("selector1~selector2")
            名称:通用兄弟选择器
            作用:匹配selector1后面所有满足selector2选择器的元素
    3.基本过滤选择器
        1. :first
            只匹配到第一个元素
        2. :last
            只匹配到最后一个元素
        3. :not(selector)
            将满足selector选择器的元素排除出去
        4. :odd
            匹配 偶数行 元素 (奇数下标)
        5. :even
            匹配 奇数行 元素 (偶数下标)
        6. :eq(index)
            匹配下标等于index的元素
        7. :gt(index)
            匹配下标大于index的元素
        8. :lt(index)
            匹配下标小于index的元素
    4.属性选择器
        1.[attribute]
            作用:匹配包含指定属性的元素
            ex: $("div[id]");
        2.[attribute=value]
            作用:匹配属性值为value的元素
            ex: 
                $("div[id=main]") -> $("#main");
                $("[type=text]");
        3.[attribute!=value]
            作用:匹配属性值不是value的所有元素
        4.[attribute^=value]
            作用:匹配属性值以value字符作为开始的元素
        5.[attribute$=value]
            作用:匹配属性值以value字符作为结尾的元素
        6.[attribute*=value]
            作用:匹配属性值中包含value字符的元素
    5.子元素过滤选择器
        1.:first-child
            匹配属于其父元素中的首个子元素
        2.:last-child
            匹配属于其父元素中的最后一个子元素
        3.:nth-child(n)
            匹配属于其父元素中的第n个子元素
            :nth-child(1) --> :first-child
AI 代码解读

jQuery操作DOM

1.基本操作
    1.html()
        作用:获取 或 设置 jQuery对象的HTML内容
            等同于 innerHTML
        ex:
            var $div = $("#main");
            console.log($div.html());
            $div.html("动态设置的文本");
    2.text()
        作用:纯文本内容
        等同于 :innerText
    3.val()
        作用:获取 或 设置 表单控件的 value 值
        等同于 : value 
2.属性操作
    1.attr()
        作用:读取 或 设置 jQuery对象的 属性值
        ex:
            1.$obj.attr("id");
                获取 $obj 对象的id属性值
            2.$obj.attr("id","container")
                设置 $obj 对象的id属性值为 container
    2.removeAttr("attrName")
        作用:删除 jquery对象的 attrName 属性
        ex:
            $obj.removeAttr("class");
3.样式操作
    1.attr("class","className")
        使用 attr() 绑定className 值到jq对象的class属性上
    2.addClass("className")
        作用:追加className选择器到jq对象的class属性后
        返回值:jq对象
        <div id="obj"></div>
        var $obj = $("#obj");
        ex:
            $obj = $obj.addClass("c1");
            结果:<div id="obj" class="c1"></div>

            $obj = $obj.addClass("c2");
            结果:<div id="obj" class="c1 c2"></div>

            以上两个操作,可以简化为:
            (连缀调用)
            $obj.addClass("c1").addClass("c2").html();
    3.removeClass("className")
        作用:将className属性值从 class 属性中移除
    4.removeClass()
        作用:清空class属性值
    5.toggleClass("className")
        切换样式:
         元素如果具备className属性值,则删除
         元素如果没有className属性值,则添加
    6.css("css属性名")
        作用:获取对应css属性的值
        ex:
            $obj.css("id")
            作用:获取$obj对象的id属性值
    7.css("css属性名","css属性值")
        作用:为元素设置css属性值
    8.css(JSON对象)
        JSON对象 类似于 PYTHON中字典的写法
        ex:
         $obj.css({
             "color":"red",
             "background-color":"orange"
         }
         );
4.遍历节点
    1.children() / children(selector)
        作用:获取jq对象的所有子元素或带有指定选择器的子元素
        注意:只考虑子代元素,不考虑后代元素
    2.next() / next(selector)
        作用:获取jq对象的下一个兄弟元素/满足selector的下一个兄弟元素
    3.prev() / prev(selector)
        作用:获取jq对象的上一个兄弟元素/满足selector的上一个兄弟元素
    4.siblings() / siblings(selector)
        作用:获取jq对象的所有兄弟节点 / 满足selector的所有兄弟
    5.find(selector)
        作用:获取满足selector选择器的所有后代元素
    6.parent()
        作用:查找jq对象的父元素
5.创建元素 & 插入元素
    1.创建元素
        语法:var $obj = $("创建的内容");
        注意:创建的内容必须是标记
        ex:
            1.创建一对div
                var $div = $("<div id='xxx'>xxxxx</div>");
            2.创建一对button
                var $btn = $("<button></button>");
                $btn.attr("id","btnDelete");
                $btn.html("删除");
    2.插入元素
        1.内部插入
            1.$obj.append($new);
                将$new元素插入到$obj中最后一个子元素位置处
            2.$obj.prepend($new);
                将$new元素插入到$obj中第一个子元素的位置处
        2.外部插入
            作为兄弟元素插入到网页中
            1.$obj.after($new);
                将$new作为$obj的下一个兄弟节点插入到网页中
            2.$obj.before($new);
                将$new作为$obj的上一个兄弟节点插入到网页中
AI 代码解读

document.createElement("div");
("div")("

");
2.jQuery中的事件处理
1.DOM加载完成后的操作
    1. $(document).ready(function(){
            //DOM树加载完毕后要执行的操作
            //相当于是页面初始化
       });
    2. $().ready(function(){
             //效果同上
       });
    3. $( function(){
            //效果同上
       } );
2.jQuery事件绑定
    1.方式1
        $obj.bind("事件名称",事件处理函数);
        ex:
            $obj.bind("click",function(){

            });
    2.
        $obj.事件名称(function(){

        });

        ex:
            $obj.click(function(){
                xxxxx
            });
    常用事件
        $obj.click(fn);
        $obj.mouseover(fn);
        $obj.mousemove(fn);
        $obj.mouseout(fn);
        $obj.keydown(fn);
        $obj.keypress(fn);
        $obj.keyup(fn);
        $obj.focus(fn);
        $obj.blur(fn);
        $obj.change(fn);
        $obj.submit(fn);
3.事件中的this
    在jquery事件中,this表示的就是触发当前事件的DOM对象
4.事件对象 - event
    在绑定事件的时候,允许传递 event 参数来表示事件对象
    1.$obj.bind("事件名称",function(event){
        event 表示的就是事件对象
      });
    2.$obj.事件名称(function(event){
        event 表示的就是事件对象
      });
  event的使用方式 与 原生JS事件中的事件对象一致
      1.事件源
          event.target
      2.鼠标事件
          event.offsetX : 在元素上的横坐标
          event.offsetY : 在元素上的纵坐标
      3.键盘事件
          event.which : 键位码或ASCII码
5.激发事件操作
     $obj.事件名称();
     ex:
         $obj.click(); //触发$obj的click事件
         $obj.click(function(){}); //为$obj绑定click事件
AI 代码解读

3.jQuery删除节点

1.remove()
    语法:$obj.remove();
    作用:删除$obj元素 
2.remove("selector")
    语法:$obj.remove("selector");
    作用:将满足selector选择器的元素删除
3.empty()
    语法:$obj.empty();
    作用:清空 $obj 内容
AI 代码解读

4.jQuery 遍历操作

方法:each()
1.循环遍历 jQuery 数组
    $obj.each(function(i,obj){
        i : 循环出来的元素的下标
        obj : 循环出来的元素(DOM元素)
    });
2.循环遍历 JS数组(原生)
    1.将原生数组通过$()转换成jQuery数组
    2.
        $.each(原生数组,function(i,obj){
            i : 遍历出来的下标
            obj : 遍历出来的元素
        });
AI 代码解读
目录
打赏
0
0
0
0
1
分享
相关文章
FastAPI与Selenium:打造高效的Web数据抓取服务 —— 采集Pixabay中的图片及相关信息
本文介绍了如何使用FastAPI和Selenium搭建RESTful接口,访问免版权图片网站Pixabay并采集图片及其描述信息。通过配置代理IP、User-Agent和Cookie,提高爬虫的稳定性和防封禁能力。环境依赖包括FastAPI、Uvicorn和Selenium等库。代码示例展示了完整的实现过程,涵盖代理设置、浏览器模拟及数据提取,并提供了详细的中文注释。适用于需要高效、稳定的Web数据抓取服务的开发者。
71 15
FastAPI与Selenium:打造高效的Web数据抓取服务 —— 采集Pixabay中的图片及相关信息
Web服务
【10月更文挑战第18天】Web服务
83 9
java spring 项目若依框架启动失败,启动不了服务提示端口8080占用escription: Web server failed to start. Port 8080 was already in use. Action: Identify and stop the process that’s listening on port 8080 or configure this application to listen on another port-优雅草卓伊凡解决方案
java spring 项目若依框架启动失败,启动不了服务提示端口8080占用escription: Web server failed to start. Port 8080 was already in use. Action: Identify and stop the process that’s listening on port 8080 or configure this application to listen on another port-优雅草卓伊凡解决方案
53 7
|
4月前
|
Web服务是通过标准化的通信协议和数据格式
【10月更文挑战第18天】Web服务是通过标准化的通信协议和数据格式
213 69
Python Web开发:Django框架下的全栈开发实战
【10月更文挑战第27天】本文介绍了Django框架在Python Web开发中的应用,涵盖了Django与Flask等框架的比较、项目结构、模型、视图、模板和URL配置等内容,并展示了实际代码示例,帮助读者快速掌握Django全栈开发的核心技术。
296 45
|
3月前
|
Go Web服务中如何优雅平滑重启?
在生产环境中,服务升级时如何确保不中断当前请求并应用新代码是一个挑战。本文介绍了如何使用 Go 语言的 `endless` 包实现服务的优雅重启,确保在不停止服务的情况下完成无缝升级。通过示例代码和测试步骤,详细展示了 `endless` 包的工作原理和实际应用。
90 3
|
3月前
|
Go Web服务中如何优雅关机?
在构建 Web 服务时,优雅关机是一个关键的技术点,它确保服务关闭时所有正在处理的请求都能顺利完成。本文通过一个简单的 Go 语言示例,展示了如何使用 Gin 框架实现优雅关机。通过捕获系统信号和使用 `http.Server` 的 `Shutdown` 方法,我们可以在服务关闭前等待所有请求处理完毕,从而提升用户体验,避免数据丢失或不一致。
50 1
PHP与SOAP Web服务开发:基础与进阶教程
本文介绍了PHP与SOAP Web服务的基础和进阶知识,涵盖SOAP的基本概念、PHP中的SoapServer和SoapClient类的使用方法,以及服务端和客户端的开发示例。此外,还探讨了安全性、性能优化等高级主题,帮助开发者掌握更高效的Web服务开发技巧。
|
4月前
|
定义Web服务
【10月更文挑战第18天】定义Web服务
101 12
Python Web开发:Django框架下的全栈开发实战
【10月更文挑战第26天】本文详细介绍了如何在Django框架下进行全栈开发,包括环境安装与配置、创建项目和应用、定义模型类、运行数据库迁移、创建视图和URL映射、编写模板以及启动开发服务器等步骤,并通过示例代码展示了具体实现过程。
126 2

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等