python学习笔记-前端基础05-jQuery

作者: MR_詹 | 来源:发表于2020-11-04 23:18 被阅读0次

python学习笔记-前端基础05-jQuery
HTML基础学习笔记
【经验分享】零基础Python学习路线及阶段学习目标
web前端入门基础
Python3学习笔记--基础知识
python学习笔记
python学习笔记-前端基础-html
python学习笔记-前端基础-css
python面向对象学习笔记-01
大师兄的Python学习笔记(十一）: 时间模块time,dat

jQuery是对JavaScript的封装，极大的简化了JavaScript编程。
jQuery优点：兼容主流浏览器，代码编写更加简单

jQuery下载网站：https://code.jquery.com
推荐使用1.0版本的，因为有做浏览器兼容

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标签选择器css</title>
    <!-- 导入jQuery js文件 -->
    <script src="jq/jquery-1.12.4.min.js"></script>
    <!-- 使用jQuery -->
    <script>
        /// 原生js写法
        window.onload = function(){
            /// 当页面的标签和标签使用的资源数据都加载完成，onload事件才会被触发
            var oDiv = document.getElementById("div1");
            alert(oDiv);
        };

        /// $符号是jquery的象征
        /// $ 本质就是函数，只不过这个函数名($)
        /// ready 等待页面标签完成以后就执行ready事件，不会等待资源数据加载完成
        /// 比如图片，ready是等界面的html标签加载完成就会触发，而不会等待图片的加载完成才触发
        /// 而onload就会等待图片加载完成才触发
        $(document).ready(function(){
            /// 获取标签和css样式匹配标签的规则一样
            /// 以后使用jquery，变量名都要以$符号开头
            var $div = $("#div1");
            alert($div);
        });

        /// jquery简写
        $(function(){
            var $div = $("#div1");
            alert($div);
        });

    </script>
</head>

 
<body>
    <div id="div1">hahaha</div>
</body>
</html>

jQuery选择器

规则和css样式一样
jquery选择器的种类

标签选择器
2.类选择器
3.id选择器
4.层级选择器
5.属性选择器

备注：可以使用length属性来判断标签是否选择成功，如果length大于0表示选择成功，否则选择失败

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标签选择器css</title>
    <!-- 导入jQuery js文件 -->
    <script src="js/jquery-1.12.4.min.js"></script>
    <!-- 使用jQuery -->
    <script>
        $(function(){
            // 获取标签对象
            var $p = $("p");
            alert($p.length);
            // 通过jquery设置标签的样式
            $p.css({"color":"red"});

            // 类选择器
            var $div2 = $(".div2");
            alert($div2.length);

            // id选择器
            var $div1 = $("#div1");
            alert($div1.length);

            // 层级选择器
            var $div3 = $("div h1");
            alert($div3.length);

            // 属性选择器,先根据标签选择html标签，然后再根据属性值进行过滤标签
            var $input1 = $("input[type=text]");
            alert($input1.length);
        });

    </script>
</head>

 
<body>
    <div id="div1">hahaha</div>
    <div class="div2">xixixi</div>
    <p>hello</p>
    <p>hello</p>

    <div>
        <h1>haha</h1>
    </div>

    <input type="text">
    <input type="button">
</body>
</html>

选择集过滤

选择集过滤就是在选中的集合标签里面，根据需要过滤出来自己想要的标签
操作方式有两种：
has(选择器名称)方法,表示选取包含指定选择器的标签
eq(索引)方法，表示选取指定索引的标签

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标签选择器css</title>
    <!-- 导入jQuery js文件 -->
    <script src="js/jquery-1.12.4.min.js"></script>
    <!-- 使用jQuery -->
    <script>
        $(function(){
            // 通过jquery选择器获取html的标签
            var $divs = $("div");
            // 获取包含指定选择器的父标签
            $divs.has(".pname").css({
                "background":"red"
            });
            // 根据下标选择指定的的标签
            $divs.eq(1).css({
                "background":"blue"
            });

        });

    </script>
</head>

 
<body>
    <div> 
        <p class="pname">hahah</p>
    </div>
    <div>
        <input type="button" value="按钮">
    </div>
</body>
</html>

选择集转移

选择集转移就是以选择的标签为参照，然后获取转移后的标签

选择集转移操作

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标签选择器css</title>
    <!-- 导入jQuery js文件 -->
    <script src="js/jquery-1.12.4.min.js"></script>
    <!-- 使用jQuery -->
    <script>
        $(function(){
            var $box1 = $("#box1");
            // css 参数是一个js对象，js对象和python里面字典很类似
            // 属性名和css里面的属性名保持一致

            // 选择上一个同级别的标签
            $box1.prev().css({"font-size":"30px","color":"red"});
            // 选择上面所有的同级标签
            $box1.prevAll().css({"font-size":"30px","color":"red"});
            
            // 选择下一个同级标签
            $box1.next().css({});
            // 选择下面所有的同级标签
            $box1.nextAll().css({});
            // 选择同级的其他标签
            $box1.siblings().css({});
            // 选择父标签
            $box1.parent().css({});
            // 获取所有的子标签
            $box1.children().css({"color":"green"});
            // 查找指定的子标签
            $box1.find('.sp1').css({"color":"yellow"});
        });

    </script>
</head>

 
<body>
   <div>
        <h3>三级标题</h3>
        <p>hahah</p>
        <div id="box1">我是一个<span>我是p标签1</span>div标签<span class="sp1">我是p标签2</span></div>
   </div>
</body>
</html>

jquery获取标签的html内容

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标签选择器css</title>
    <!-- 导入jQuery js文件 -->
    <script src="js/jquery-1.12.4.min.js"></script>
    <!-- 使用jQuery -->
    <script>
        $(function(){
            var $div1 = $("#div1");
            // 获取标签的html内容：结果<p>hello</p>
            var result = $div1.html();
            // alert(result);
            // 设置标签的html内容，之前的内容会清除
            $div1.html("<span style='color:red'>你好</span>");
            // 追加html的内容
            $div1.append("<span style='color:green'>我是span</span>")
        });

    </script>
</head>

 
<body>
   <div id="div1">
       <p>hello</p>
   </div>
</body>
</html>

获取和设置标签属性

使用prop方法，获取和设置标签属性

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标签选择器css</title>
    <!-- 导入jQuery js文件 -->
    <script src="js/jquery-1.12.4.min.js"></script>
    <!-- 使用jQuery -->
    <script>
        $(function(){ 
            var $p1 = $("p");
            var $txt = $("#txt1");
            // 获取样式属性，比如：获取字体大小
            var $px = $p1.css("font-size");
            // 除了样式属性的相关操作使用css方法，其他属性的操作都是prop方法
            var $name = $txt.prop("name");
            alert($name);

            // 设置属性
            $txt.prop({"value":"liven","class":"tname"});

            // 对于value属性的值设置和获取可以使用以下简单的写法
            // 使用val获取value的值
            alert($txt.val());
            // 使用val设置value的值
            $txt.val("老三");

        }); 

    </script>
</head>

 
<body>
   <p>哈哈哈，我是一个段落标签</p>
   <input type="text" name="username" id="txt1" value="李四">
</body>
</html>

jquery事件

常用的事件
click() 鼠标单击
blur() 元素失去焦点
focus() 元素获取焦点
mouseover() 鼠标进入元素范围内
mouseout() 鼠标离开元素范围内
ready() DOM加载完成

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标签选择器css</title>
    <!-- 导入jQuery js文件 -->
    <script src="js/jquery-1.12.4.min.js"></script>
    <!-- 使用jQuery -->
    <script>
        $(function(){ 
            // 获取ul里面的所有li标签对象
            var $lis = $("ul li");
            // 添加点击事件
            $lis.click(function(){
                // 获取当前点击的标签对象
                // 原生js的写法
                // this.style.color = "red";
                // jquery的写法
                $(this).css({
                    "color":"red"
                });
                // 获取点击标签的索引
                var selectedIndex = $(this).index();
                alert(selectedIndex);
            });

            // 获取文本框标签对象
            var $txt = $("#txt");
            // 获取按钮标签对象
            var $btn = $("#btn");

            // 按钮添加事件
            $btn.click(function(){
                // 获取文本框的内容
                alert($txt.val())
            });
            
            // 文本框获取焦点事件触发事件
            $txt.focus(function(){
                // 当文本框获取焦点时，背景颜色变为红色
                $(this).css({
                    "background":"red"
                })
            });

            // 文本框失去焦点事件触发事件
            $txt.blur(function(){
                // 当文本框失去焦点时，背景颜色变为白色
                $(this).css({
                    "background":"white"
                })
            });

            // 获取div标签对象
            var $div = $("div");

            // 给div设置鼠标悬停(进入)事件
            $div.mouseover(function(){
                $(this).css({
                    "background":"green"
                });
            });

            // 给div设置鼠标离开事件
            $div.mouseout(function(){
                $(this).css({
                    "background":"white"
                });
            });
        }); 

    </script>
</head>

 
<body>
  <div>
    <ul>
        <li>苹果</li>
        <li>香蕉</li>
        <li>栗子</li>
  
        <input type="text" id="txt">
        <input type="button" value="按钮" id="btn">
    </ul>
  </div>
</body>
</html>

jquery事件代理

事件冒泡：子级标签的事件会往父级标签传递，如果要取消事件冒泡，可以使用return false命令

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标签选择器css</title>
    <!-- 导入jQuery js文件 -->
    <script src="js/jquery-1.12.4.min.js"></script>
    <!-- 使用jQuery -->
    <script>
        $(function(){ 
            var $div = $("#div1");
            var $btn = $("#btn");

            // button添加点击事件，并且给他的父级标签div也添加点击事件
            // 当btn点击事件触发的时候，也会触发父级div的事件，因为事件会向父级控件传递
            $btn.click(function(){
                alert("我是按钮");
                // 取消事件冒泡，就是不让事件向父级控件传递
                // 可以加一下这句
                return false;
            });

            $div.click(function(){
                alert("我是div");
            });
        }); 

    </script>
</head>

 
<body>
  <div id="div1">
    <p>hahah</p>
    <input type="button" value="按钮" id="btn">
  </div>
</body>
</html>

事件代理：就是利用事件冒泡的原理，把事件加到父级上，通过判断事件来源，执行相应的子元素操作，事件代理首先可以极大减少事件绑定次数，提高性能，其次可以让新加入的子元素也可以拥有相同的操作

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标签选择器css</title>
    <!-- 导入jQuery js文件 -->
    <script src="js/jquery-1.12.4.min.js"></script>
    <!-- 使用jQuery -->
    <script>
        $(function(){ 
            // 案例1：给每个li标签添加点击事件
            // 第一步：获取父级标签ul
            var $ul = $("div ul");
            // 使用代理的方式，给每个li添加点击事件
            // 第一个参数：代表代理的子标签，
            // 第二个参数：代理事件的类型
            // 第三个参数：事件触发的方法
            $ul.delegate("li","click",function(){
                $(this).css({
                    "background":"red"
                });
            });

            // 扩展：可以代理不同子控件的事件
            var $div = $("#box");
            $div.delegate("#p1,#btn","click",function(){
                alert('ok');
            });
        }); 

    </script>
</head>

 
<body>
  <div>
      <ul>
        <li>苹果</li>
        <li>香蕉</li>
        <li>栗子</li>
      </ul>
  </div>
  <div id="box">
    <p id="p1">hahahh</p>
    <input type="button" value="按钮" id="btn">
  </div>
</body>
</html>

python学习笔记-前端基础05-jQuery
jQuery是对JavaScript的封装，极大的简化了JavaScript编程。jQuery优点：兼容主流浏览器...
HTML基础学习笔记
原 Blog 链接：HTML基础学习笔记自学 html 基础笔记 Web 前端简单介绍 web 前端包含： pc...
【经验分享】零基础Python学习路线及阶段学习目标
零基础Python学习路线及阶段学习目标，首先应该夯实Python核心基础、Web前端编程、Django开发框架、...
web前端入门基础
web前端基础笔记学习web前端开发基础技术需要掌握：HTML、CSS、JavaScript语言。下面我们就来了...
Python3学习笔记--基础知识
Python3学习笔记--基础知识
python学习笔记
python学习笔记今天开始学习python，今天主要学习了python的基础知识，学习的教材是《python编...
python学习笔记-前端基础-html
... 标签用于定义文档的头部，是负责对网页进行设置标题、编码格式以及引入css和js文件的 ... 标签是编写...
python学习笔记-前端基础-css
CSS（Cascading Style Sheet）层叠样式表，它是用来美化页面的一种语言 CSS选择器 css...
python面向对象学习笔记-01
学习笔记 # 0，OOP-Python面向对象 - Python的面向对象 - 面向对象编程 - 基础 -...
大师兄的Python学习笔记(十一）: 时间模块time,dat
大师兄的Python学习笔记(十）: 多进程和多线程大师兄的Python学习笔记(十二）: 常用高级函数一、基础...