Python学习之jQuery初识

Posted jjzz1234

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Python学习之jQuery初识相关的知识,希望对你有一定的参考价值。

jQuery

两大特点

  • 链式编程:比如.show().html()可以连写成.show().html()
  • 隐式迭代:隐式对应的是显式。隐式迭代的意思是:在方法的内部进行循环遍历,而不用我们自己再进行循环,简化我们的操作,方便我们调用。

jQuery的简介

jQuery 是 js 的一个库,封装了开发过程中常用的一些功能,方便开发人员调用,提高开发效率。

jQuery 的导入

从官网复制相应的版本到本地js文件中,使用script标签将本地的jQuery包导入即可,导包的代码一定要放在js代码的最上面。如下:

<script src="jQuery的路径"></script>

jQuery 的入口函数和 # 符号

入口函数

原生js的入口函数

# 原生js的入口函数
windows.onload = function()

jQuery入口函数

方式一:文档加载完毕,无图片加载时,可执行此函数
$(document).ready(function () 
           alert(1);
       )

方式二:方式一的简写版
$(function () 
           alert(1);
       );
       
方式三:文档和图片都加载完毕时,可执行此函数
$(window).ready(function () 
           alert(1);
       )

jQuery入口函数与js入口函数的区别

区别一:书写个数不同:

  • Js 的入口函数只能出现一次,出现多次会存在事件覆盖的问题。
  • jQuery 的入口函数,可以出现任意多次,并不存在事件覆盖问题。

区别二:执行时机不同:

  • Js的入口函数是在所有的文件资源加载完成后,才执行。这些文件资源包括:页面文档、外部的js文件、外部的css文件、图片等。
  • jQuery的入口函数,是在文档加载完成后,就执行。文档加载完成指的是:DOM树加载完成后,就可以操作DOM了,不用等到所有的外部资源都加载完成。

文档加载的顺序:从上往下,边解析边执行。

jQuery的# 符号

jQuery 使用 $ 符号原因:书写简洁、相对于其他字符与众不同、容易被记住。

<script src="jQuery_Library_v3.4.1.js"></script>
<script>
        console.log($);
        console.log(jQuery);
        console.log($===jQuery);
</script>

从打印结果来看,$就是jQuery。

jQuery的选择器

jQuery的选择器包括:基本选择器、层级选择器、属性选择器

基本选择器

选择器 描述 选择器 描述
$("#id") id选择器 $(".className") class选择器
$("tagName") 标签选择器 $("div.c1") 交集选择器
$("*") 通用选择器 $("#id,.className,tagName") 并集选择器
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>divfloat: left;</style>
</head>
<body>
    <div></div>
    <div id="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div></div>
</body>
<script type="text/javascript" src="jQuery_Library_v3.4.1.js"></script>
<script type="text/javascript" >
    $(function () 
        // 三种获取jQuery对象的方式
        var jqBox1 = $("#box");
        var jqBox2 = $(".box");
        var jqBox3 = $("div");

        // 操作标签选职器
        jqBox3.css('width','100');
        jqBox3.css('height',100);
        jqBox3.css('background-color','gray');
        jqBox3.css('margin-top',10);

        //操作类选择器(隐式迭代,不需要一个一个设置)
        jqBox2.css('background-color','tomato');
        jqBox2.text('ha~la~');

        // 操作id选择器
        jqBox1.css('background-color','pink')
    )

</script>

层级选择器

选择器 描述
$("x y") x所有的后代y(子代)
$("x>y") x所有的孩子
$("x+y") 紧挨在x后面的y
$("x~y") x之后的所有兄弟y
<body>
<ul>
    <li>11</li>
    <li>22</li>
    <li>33</li>
    <ol>
        <li>Aa</li>
        <li>Bb</li>
        <li>Cc</li>
    </ol>
</ul>
</body>
<script src="jQuery_Library_v3.4.1.js"></script>
<script>
    $(function () 
        // 后代设置
        var jqLi = $('ul li');
        jqLi.css('margin',5);
        jqLi.css('background','pink');
        // 孩子
        var jqOtherLi = $('ul>li');
        jqOtherLi.css('background','tomato');
    )
</script>

属性选择器

属性选择器的样式比较多样,主要围绕标签的属性展开

选择器 描述
$(‘[属性名]‘) 必须是含有某属性的标签
$(‘a[属性名]‘) 含有某属性的a标签
$(‘选择器[属性名]‘) 含有某属性的符合前面选择器的标签
$(‘选择器[属性名="aaaa"]‘) 属性名=aaa的符合选择器要求标签
$(‘选择器[属性名$="xxx"]‘) 属性值以xxx结尾的
$(‘选择器[属性名^="xxx"]‘) 属性值以xxx开头的
$(‘选择器[属性名*="xxx"]‘) 属性值包含xxx
$(‘选择器[属性名1][属性名2="xxx]‘) 拥有属性1,且属性二的值=‘xxx‘,符合前面选择器要求的
    <body>
         <div id="box">
            <h2 class="title">属性选择器</h2>
            <!--<p class="p1">我是一个段落</p>-->
            <ul>
                <li id="li1">1122</li>
                <li class="what" id="li2">2233</li>
                <li class="what">3344/li>
                <li class="heihei">4455</li>
            </ul>

            <form action="" method="post">
                <input name="username" type='text' value="1" checked="checked" />
                <input name="username1111" type='text' value="1" />
                <input name="username2222" type='text' value="1" />
                <input name="username3333" type='text' value="1" />
                <button class="btn-default">按钮1</button>
                <button class="btn-info">按钮2</button>
                <button class="btn-success">按钮3</button>
                <button class="btn-danger">按钮4</button>
            </form>
        </div>
    </body>
    <script src="jQuery_Library_v3.4.1.js"></script>
    <script type="text/javascript">
        
        $(function()
            //标签名[属性名] 查找所有含有id属性的该标签名的元素
            $('li[id]').css('color','red');
            
            //匹配给定的属性是what值得元素
            $('li[class=what]').css('font-size','30px');
            //[attr!=value] 匹配所有不含有指定的属性,或者属性不等于特定值的元素
            $('li[class!=what]').css('font-size','50px');
            
            //匹配给定的属性是以某些值开始的元素
            $('input[name^=username]').css('background','gray');
            //匹配给定的属性是以某些值结尾的元素
            $('input[name$=222]').css('background','greenyellow');
            
            //匹配给定的属性是以包含某些值的元素
            $('button[class*=btn]').css('background','red')          
        )
    </script>

jQuery的筛选器

基本筛选器

$('选择器:筛选器')
$('选择器:first')

作用于选择器选择出来的结果:
first      找第一个
last       最后一个
eq(index)  通过索引找
even       找偶数索引
odd        找奇数索引
gt(index)  大于某索引的
lt(index)  小于某索引的
not(选择器) 不含 符合选择器 要求的
has(选择器) 后代中含有该选择器要求的(找的不是后代,找的是本身)

表单筛选器

// type筛选器

$(':text')
$(':password')
$(':radio')
$(':checkbox')
$(':file')
$(':submit')
$(':reset')
$(':button')
注意 : date type的input是找不到的

// 状态筛选器
:enabled
:disabled
:checked
:selected

筛选器方法

找兄弟 :
$('ul p').siblings()

找哥哥
$('ul p').prev()             找上一个哥哥
$('ul p').prevAll()          找所有哥哥
$('ul p').prevUntil('选择器') 找哥哥到某一个地方就停了,不包含条件中的哥哥

找弟弟 : next()  nextAll()   nextUntil('选择器')
找祖辈 : parent()  parents()   parentsUntil('选择器')
找儿子 : children()

包含条件的查找到的对象不包含条件本身对象
筛选方法
first()
last()
eq(index)
not('选择器')   去掉满足选择器条件的
filter('选择器')交集选择器,在所有的结果中继续找满足选择器要求的
find('选择器')  后代选择器 找所有结果中符合选择器要求的后代
has('选择器')   通过后代关系找当代 后代中有符合选择器要求的就把当代的留下

以上是关于Python学习之jQuery初识的主要内容,如果未能解决你的问题,请参考以下文章

python 基础学习之动态语言初识

Python学习之函数初识一

python 基础学习之动态语言初识

D08-python学习之文件操作

python 学习之javascipts中的jQuery

Python学习之数据库初识