Python百日进阶-WEB开发】Day152 - 前端基础之 JQuery(一)

一、jQuery的介绍

1.1 jQuery的定义

jQuery是对JavaScript的封装,它是免费、开源的 JavaScript函数库，jQuery极大地简化了JavaScript编程。

1.2 jQuery的作用

jQuery和JavaScript它们的作用一样,都是负责网页行为操作，增加网页和用户的交互效果的,只不过jQuery简化了 JavaScript编程，jQuery实现交互效果更简单。
jQuery兼容了现在主流的浏览器,增加了程序员的开发效率
jQuery简化了 JavaScript编程代码编写更加简单

1.3 jQuery与Javascript的区别

在这里插入图片描述
1、JQuary与JS最直观的区别就是外观上JQuary对象比JS对象多了"$()"。
2、JQuary与JS操作非表单元素的区别
非表单元素（如果是文本就用text方法，如果是html代码就用html方法）
例：JQuary中div.text()无参数的情况下是取值;div.text(“aaaa”)有参数的情况下是赋值;
div.html()无参数的情况下是取值;div.html(“aaaa”)有参数的情况下是赋值表单元素;

JS：div.value取值；div.value = xxx赋值;
JUQERY：div.val()无参数是取值，有参数是赋值。
3、JQuary与JS操作属性的区别
JS里面用来操作属性的方法是：
div.setAttribute(“”,“”);——设置属性、修改属性
div.removeAttribute(“”);——移除属性，引号里面写一个属性名
div.getAttribute();——获取属性
JQuary里面用来操作属性的方法
添加属性：div.attr(“test”,“aa”);——给这个attr方法加入参数，属性名叫做test，属性的值是aa。
移除属性：div.removeAttr(“test”);——移除test这条属性。
获取属性：div.attr(“test”);——在attr方法里面直接写入一个属性的名就可以了。
4、JQuary与JS操作样式的区别
JS里面操作样式的关键字是style。
例：div.style.backgroundColor= “red”;把这个div的背景色设置成为了红色。
JQuary里面操作样式的关键字是css。
例：div.css(“background-color”,“yellow”);把这个div的背景色变为黄色，在这里CSS里面所有的样式和css样式表里面的样式是一模一样的没有任何变化。

1.4 jQuery的下载安装

官网网址：https://code.jquery.com
在这里插入图片描述

<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>

在这里插入图片描述

二、jQuery的用法

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>jQuerytitle>
    
    <script src='js/jquery-1.12.4.min.js'>script>
    
    <script>
        // 原生js代码,需要页面标签和内容全部加载完毕，onload事件才会触发，比较慢
        window.onload = function(){
            var oDiv = document.getElementById('div1');
            alert(oDiv);    // [object HTMLDivElement]
        };

        // jQuery标准写法，以$开头. $ 本质上就是一个函数，$ 就是函数名
        // jQuery的ready事件在页面标签加载完毕就执行，不等待数据，比较快
        $(document).ready(function(){
            // 获取标签和css一样，id用#开头，使用jQuery时，变量名都用$开头
            var $div = $('#div1');
            alert($div);    // [object Object]
        });

        // jQuery的ready方法简写：$(函数)
        $(function(){
            var $div = $('#div1');
            alert($div); 
        });

    script>
head>
<body>
    <div id='div1'>哈哈div>
    <img src="https://image.baidu.com/search/down?tn=download&word=download&ie=utf8&fr=detail&url=https%3A%2F%2Fgimg2.baidu.com%2Fimage_search%2Fsrc%3Dhttp%253A%252F%252Fwww.boldlivingtoday.com%252Fwp-content%252Fuploads%252F2012%252F09%252Fits-autumn-wallpapers_20240_2560x1600.jpg%26refer%3Dhttp%253A%252F%252Fwww.boldlivingtoday.com%26app%3D2002%26size%3Df9999%2C10000%26q%3Da80%26n%3D0%26g%3D0n%26fmt%3Djpeg%3Fsec%3D1628064129%26t%3Debb0d501211c869d2208e613b3c01ab8&thumburl=https%3A%2F%2Fimg1.baidu.com%2Fit%2Fu%3D3715650711%2C3437018915%26fm%3D26%26fmt%3Dauto%26gp%3D0.jpg" alt="">
body>
html>

2.1 jQuery的引入

 <script src='js/jquery-1.12.4.min.js'></script>

2.2 jQuery的入口函数

我们知道使用js获取标签元素,需要页面加载完成以后再获取,我们通过给 onload事件属性设置了一个函数来获取标签元素,而 jquery提供了 ready函数来解决这个问题,保证获取标签元素没有问题,它的速度比原生的 window.onload更快。

三、jQuery选择器

3.1 jQuery选择器的介绍

jquery选择器就是快速选择标签元素,获取标签的,选择规则和css样式一样

3.2 jQuery选择器的种类

说明:可以使用 length属性来判断标签是否选择成功,如果 length大于0表示选择成功,否则选择失败.
1.标签选择器： $(^{'} d i v^{'}) 2. 类选择器：$ (‘.myclass’)
3.id选择器： $KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲myid') 4.层级选择器：$ (‘div .myclass’)
5.属性选择器：jQuery特有，$(‘input[name=first]’)，选择name属性等于first的input标签

        //jQuery与css选择器的语法一样
        $(function(){
            var $p = $('p');    //选择所有的p标签
            $p.css({'color': 'red'})  // 通过jQuery给选定的标签设置样式
            var $div = $('.div1');  //类选择器
            var $div1 = $('#box1');  //id选择器
            var $h1 = $('div h1');   //层级选择器
            var $input = $('input[type=text]');  //属性选择器，先选标签，再过滤属性值
            alert($input.length); 
        });

四、选择集过滤

4.1 选择集过滤的介绍

选择集过滤就是在选择标签的集合里面过滤自己需要的标签

4.2 选择集过滤的操作

has(选择器名称)方法,表示选取包含指定选择器的标签
eq(索引方法,表示选取指定索引的标签

       //选择集过滤
       $(function(){
           var $div = $('div').has('h1');  //选取包含h1标签的div标签
           $div.css({'background': 'green'});
           var $div = $('div').eq(2);  //选中的div标签中取下标为2的标签
           $div.css({'background': 'orange'});
           alert($div.length);
       })

五、选择集转移

5.1 选择集转移介绍

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

5.2 选择集转移操作

$(’#box‘).prev()表示选择id是box元素，的上一个的同级元素
$(‘#box’).prevAll()表示选择id是box元素，的上面所有的同级元素
$(’#box‘).next()表示选择id是box元素，的下一个的同级元素
$(‘#box’).nextAll()表示选择id是box元素，的下面所有的同级元素
$(’#box‘).parent()表示选择id是box元素，的父元素
$(‘#box’).children()表示选择id是box元素，的所有子元素
$(’#box‘).siblings()表示选择id是box元素，的其它同级元素
$(‘#box’).find(‘.myClass’)表示选择id是box元素，的class等于myClass的元素

        //选择集转移：以指定标签为参照物，选择和它有关系的其他标签
        $(function(){
            var $div = $('#box1');
            $div.prev().css({'background': 'green', 'font-size': '1.5em'});
            $div.prevAll().css({'color': 'orange', 'font-size': '1em', 'text-indent': '2em'});
            $div.next().css({'color': 'blue', 'font-size': '1.2em', 'text-indent': '3em'});
            $div.nextAll().css({'color': 'brow', 'font-size': '1.5em', 'text-indent': '4em'});
            $div.siblings().css({'color': 'brow', 'text-decoration': 'underline', 'text-indent': '5em'});
            $div.parent().css({'text-indent': '1em'});
            $div.children().css({'color': 'red'});
            $div.find('a').css({'color': 'red', 'font-size': '1.5em'});
        });

六、获取和设置元素内容

jquery中的html方法可以获取和设置标签的html内容，给指定标签追加html内容使用append方法。

        //获取和设置元素内容
        $(function(){
            var $div = $('#box1');
            alert($div.html());    //获取标签内容
            $div.html('百度');  // 设置标签内容
            $div.append('百度');  // 追加标签内容
            $div.append('哈喽
'); // 追加标签内容
        });

七、获取和设置元素属性

7.1 prop方法的使用

之前使用css方法可以给标签设置样式属性,那么设置标签的其它属性可以使用prop方法了

        // 获取和设置元素属性
        $(function(){
            var $p = $('p');
            var $px = $p.css('font-size');  //获取字体大小属性
            // alert($px);
            $p.css({'font-size': '1.5em','background': 'green'});  //设置样式属性
            var $text = $('#text1');
            //除了样式属性使用css方法，其他所有属性都使用prop方法
            var $name = $text.prop('name');  //获取属性
            alert($name);
            $text.prop({'value': '张三', 'class': 'tname'});  //设置属性
            alert($text.val());  // 使用val获取value属性值
            $text.val('王五');  //使用val设置value属性值
        });

相关阅读:
Document Solutions for Word（GcWord）6.2.5 Crack
【Python】从入门到上头—mysql数据库操作模块mysql-connector和PyMySQL应用场景（15）
2022 MySQL8.0.29安装详细教程（妈妈级）
MySQL 高级(进阶) SQL 语句 (一)
树莓派Raspberry Pico RP2040 开发环境配置完全缝合终极版C-SDK
Emacs之定制化mode line(第一百零二)
SpringMvc手写简单实现篇 - IOC容器、DI依赖注入篇
CYEZ 模拟赛 5
第十四届蓝桥杯模拟赛（第二场）题解·2022年·C/C++
【17 ＞分布式接口幂等性】1. 概述与接口重试的问题

原文地址：https://blog.csdn.net/yuetaope/article/details/122987898

Python百日进阶-WEB开发】Day152 - 前端基础 之 JQuery(一)

文章目录