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>div{float: 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('选择器')   通过后代关系找当代 后代中有符合选择器要求的就把当代的留下

原文地址:https://www.cnblogs.com/jjzz1234/p/11385648.html

时间: 2024-11-09 03:09:32

Python学习之jQuery初识的相关文章

jQuery基础学习(一)&mdash;jQuery初识

一.jQuery概述 1.jQuery的优点      jQuery是一个优秀的JavaScript库,极大地简化了遍历HTML文档.操作DOM.处理事件.执行动画和开发Ajax的操作.它有以下几点优势.      (1)轻量级.      (2)强大的选择器.      (3)出色的DOM封装.      (4)可靠的事件处理机制.      (5)完善的Ajax.   2.jQuery类库说明      jQuery的库分为两种,分别是生产版和开发版.区别如下: 名称 大小 说明 jquer

python学习之jquery小练习

<html> <head> <title>html/css/js学习小结</title> <script src="jquery-1.8.3.js"></script> <style type="text/css"> /*span { display:inline; width:16%; }*/ li { display:table-cell; width:0.5%; margin-

[Python学习]——序列(1)——初识Python中的序列

我们讲的python中的序列包括:1. 字符串(多个字符组成的一个序列)2. 列表3. 元组 #列表和元组的异同? list=[1,2,3] print type(list) tuple=(1,2,3) print type(tuple) #<相同点> 列表和元组都是容器,可以包含任意类型的元素(甚至是包含一个序列) 列表和元素也都包含元素的顺序 #<差别> 列表是可变的,元组是不可变的 所以通常,在你有一些不确定长度的相同类型队列时使用列表 在已知元素数量的情况下用元组 #<

python学习笔记之初识Python

一直听说python语音的简单易用而又强大,今天终于忍不住借本书,开始接触接触一下它,下面结合书本和自己的一些体会,写一下刚刚接触python的东西,重点写一些和C++有区别的地方. (1)输入input().输出print() 注意输入input()括号中是提示符,返回值才是输入的数 如a=input("请输入一个数") (2)数据类型 1)python中使用变量不需要提前对变量进行声明,可以直接使用,这点倒有点想MATLAB,而不是C. 2)python中所表示的整数大小只受限制于

Python学习之数据库初识

9 数据库 9.1 数据库的初识 ? 数据库是可以独立运行的,并且可以对数据的增删改查提供高效便捷方式的工具. 数据库解决的问题: ? 解决了操作文件的效率和便捷问题 ? 解决了多个服务同时使用数据时的一致性问题 ? 解决了安全问题 ? 解决了并发问题 数据库的优点: ? 程序稳定性:应用服务器的崩溃不会影响数据的安全 ? 数据的一致性:将所有数据的管理统一,所有对数据的操作统一 ? 并发:数据库支持并发的网络操作,不需要我们自己写socket ? 效率:使用数据库对数据进行增删改查的效率比操作

python学习之路 初识xml

import requests from xml.etree import ElementTree as ET r = requests.get('http://www.webxml.com.cn//webservices/qqOnlineWebService.asmx/qqCheckOnline?qqCode=577800103') re = r.text r1 = ET.XML(re) print(r1.text) 简单检查qq在线 xml 之 tag  attrilb   text运用 f

Python学习之函数初识一

一.是什么.为什么.怎么用? 1.什么是函数? 函数就相当于具备某一功能的工具,可以多次重复使用. 函数的使用必须遵循一个原则: 先定义 后调用 2.为何要用函数? 在未使用函数时,程代码数量过多时程序可能会出现以下情况: 1.组织结构不清晰,可读性差 2.代码冗余 3.可维护性.扩展性差 3.如何用函数? 先定义 三种定义方式 后调用 三种调用方式 返回值 三种返回值的形式二.定义 1.定义的语法 ''' def 函数名(参数1,参数2,...): #函数名的命名规则和变量名的规则相似,多以动

Python学习之路——day01

一.Python介绍 1.Python的诞生 Python的作者叫Guido Van Rossum(吉多 范 罗苏姆),是在1989年圣诞节的时候老婆孩子不在家,他为了打发时候写的一个程序,作为ABC语言的一种继承,太牛奔了! 2.和其他语言的比较 Python属于高级语言,和C#.Java一样,编译的顺序都是从代码==>内存==>解释器编译成字节码==>机器码,所以速度上会比C语言差一些,因为C语言是直接将代码编译成机器码的. 3.自己对Python的理解 Python用途很广泛,现在

Python学习系列(一)(基础入门)

Python入门 本系列为Python学习相关笔记整理所得,IT人,多学无害,多多探索,激发学习兴趣,开拓思维,不求高大上,只求懂点皮毛,作为知识储备,不至于落后太远.如果兴趣学习者,推荐一个基础视频:http://edu.51cto.com/lesson/id-11637.html 本文主要介绍Python的相关背景,环境搭建. 一.了解Python 1,关于Python的语言特点: 借用Python官网Https://www.python.org的解释: Python is powerful