巨蟒python全栈开发数据库前端7:jQuery框架

每个人的标准不同,看法等等,认识,价值观有所不同,促成了这些矛盾.

1.select例子

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
    
    <select name="" id="s1">
        <option value="">aaoption>
        <option value="">bboption>
        <option value="">ccoption>
    select>
    
    
    
    <script>
        var s1=document.getElementById('s1');
        s1.onchange=function () {
            console.log(this.options[this.selectedIndex].innerText)
        }
    script>
    
body>
html>

效果图:

2.select联动实现省份关联市案例:

DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>select联动title>
head>
<body>
<select id="province">
  <option>请选择省:option>
select>

<select id="city">
  <option>请选择市:option>
select>

<script>
  data = {"河北省": ["廊坊", "邯郸"], "北京": ["朝阳区", "海淀区"], "山东": ["威海市", "烟台市"]};

  var p = document.getElementById("province");
  var c = document.getElementById("city");
  //页面一刷新就将所有的省份都添加到select标签中
  for (var i in data) {
    var optionP = document.createElement("option"); //创建option标签
    optionP.innerHTML = i; //将省份的数据添加到option标签中
    p.appendChild(optionP);//将option标签添加到select标签中
  }
  //只要select中选择的值发生变化的时候，就可以触发一个onchange事件，那么我们就可以通过这个事件来完成select标签联动
  p.onchange = function () {
    //1.获取省的值
    var pro = (this.options[this.selectedIndex]).innerHTML;//this.selectedIndex是当前选择的option标签的索引位置，this.options是获取所有的option标签，通过索引拿到当前选择的option标签对象，然后.innerHTML获取对象中的内容，也就是省份
    //还可以这样获取省：var pro = this.value;
    var citys = data[pro]; //2. 通过上面获得的省份去data里面取出该省对应的所有的市
    // 3. 清空option
    c.innerHTML = ""; //清空显示市的那个select标签里面的内容
　　

    //4.循环所有的市，然后添加到显示市的那个select标签中
    for (var i=0;i<citys.length;i++) {
      var option_city = document.createElement("option");
      option_city.innerHTML = citys[i];
      c.appendChild(option_city);
    }
  }
script>
body>
html>

测试结果:

一开始打开:

 选择的结果:

3.人脸识别,机器学习(以后可以考虑走的方向)

TensorFlow,OpenStack

 今日主要内容

1.什么是jquery?jquery与js的关系?

引子,例1:

DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Titletitle>
head>
<body>
<div id="d1">我是divdiv>
body>
html>

思考:如何找到div,打印出文本?

运行,原生js的操作方式.结果显示:

 jquery包的下载方式:

1.在百度一下上输入'jquery.com',

2.点击有官网字样的标题,点击一下,

3.再点击进入

4.进入下图,

5.上图第一个表示压缩版的jquery,第二个表示未压缩版本的jquery.

6.右击链接地址

7.点击保存存储到桌面上即可.

第二种方式,点击进入网址,将jquery的信息拷贝出来,存储成这个名字即可.

引子,例2:

DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Titletitle>
head>
<body>

<div id="d1">我是divdiv>

<script src="jquery-3.3.1.min.js">script>


body>
html>

运行结果分析:

上边的第一种方式是原生的js写的,下边是用到了一个工具,也就是jquery,功能是一样的,jquery是别人已经写好的模块或者包,我们直接导入用就可以了.

已经用过的第三方包:gevent,request,beautiful

如何快速开发,为的是快速解决问题.才会引入这个模块的,用起来比较简单,所以我们使用这个第三方模块.

jquery介绍:

(1)jQuery是一个轻量级.兼容多浏览器的js库.

(2)jQuery使用户能够更方便地处理HTML Document,Events,实现动画效果,方便的进行Ajax交互,能够极大的简化js编程,它的宗旨就是"Write less,do more."

jquery的优势:

(1)一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。

(2)丰富的DOM选择器,jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。

(3)链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。

(4)事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。

(5)Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。

(6)跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。

(7)插件扩展开发。jQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件，并且用jQuery插件做出来的效果很炫，并且可以根据自己需要去改写和封装插件，简单实用。

jquery内容:

(1)选择器

(2)筛选器

(3)样式操作

(4)文本操作

(5)属性操作

(6)文档处理

(7)事件

(8)动画效果

(9)插件

(10)each、data、Ajax

易错点1:

错误代码:

DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Titletitle>
head>
<body>

<div id="d1">我是divdiv>

<script>
    console.log($("#d1").text());
script>
<script src="jquery-3.3.1.min.js">script>


body>
html>

正确代码:

DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Titletitle>
head>
<body>

<div id="d1">我是divdiv>

<script src="jquery-3.3.1.min.js">script>


<script>
    console.log($("#d1").text());
script>


body>
html>

出错原因:表示先使用了jquery后导入了jquery

jquery库最后导入了,结果报错,说明没有定义这个,is not defined,我们应该在body的最开始倒入jquery模块

我们应该,先导入后使用!!!

DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Titletitle>
head>
<body>

<div id="d1">我是divdiv>

<script src="jquery-3.3.1.min.js">
    $("#d1").text()
script>


<script>
    console.log($("#d1").text());
script>

#不能同时用上边的两种方式
body>
html>

jquery版本

1.x版本　　兼容ie678

2.x版本　　基本不用了

3.x版本　　不兼容　　添加了很多新的内容

同时导入两个版本会是什么情况?

后边的版本会覆盖前面的版本.

一个页面只需要导入一次就可以了.

jquery的使用

过程:找到标签,修改标签的样式,修改标签的文本,==>总结就是查找标签,操作标签.

基础语法:$==jquery  (dollar符号就是个小名,也就是别名),类似于import gevent as g

　　　　　　目的:写起来方便.

代码:

DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Titletitle>
head>
<body>

<div id="d1">我是divdiv>

<script src="jquery-3.3.1.min.js">
    $("#d1").text()
script>


<script>
    console.log($("#d1").text());
script>


body>
html>

操作:

查找标签--选择器

jquery的基础语法 

查找标签的最基本语法:$("条件")

查找标签的最基本语法:$("条件").方法()

以下显示的结果不同.

js可以用于调用原生的方法,jquery不能用于调用原生的方法

总结:也就是不能用jquery对象调用原生对象的属性或方法.

问题:用jquery找到这个对象,怎样拿到里边的内容?

找到数组的第一个元素,就相当于是原生的js拿到了这行代码,再用这行代码找到里边的文本.

上边的$("#d1")[0],相当于包含原生对象的数组的jquery对象,

jquery对象根据索引值能够拿到具体的标签对象

jquery如果想要调用自己的想要获取对象的文本内容,可以调用自己的方法;或者找到原生的,再调用原生的属性.(具体如下)

易错点二: 

如果出现下图这个错误,表示原生的js调用了jquery的方法,这样是不可以的

原因分析:看一下是不是对一个原生的DOM对象调用了jQuery的方法

用法汇总之基本选择器:

id选择器:　　$("#id")

标签选择器:   $("tagName")

class选择器:  $(".className")

配合使用:　   $("div.c1")　　//找到c1　　class类的div标签

所有元素选择器:　　$("*")

组合选择器:　　$("#id,.className,tagName")

例子:

html代码

DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Titletitle>
head>
<body>

<div id="d1">我是divdiv>
<div class="c1">div2div>
<p class="c1">p>

<script src="jquery-3.3.1.min.js">script>


<script>
    console.log($("#d1").text());
script>

body>
html>

d1找到1行代码,.c1找到两行代码

p标签找到了1个,*标签找到了11个.

上图是组合选择器,逗号表示"或者"的意思

 层级选择器:

x和y可以为任意选择器

$("x y");// x的所有后代y（子子孙孙）
$("x > y");// x的所有儿子y（儿子）
$("x + y")// 找到所有紧挨在x后面的y
$("x ~ y")// x之后所有的兄弟y

基本筛选器:

:first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)

例子:

$("div:has(h1)")// 找到所有后代中有h1标签的div标签
$("div:has(.c1)")// 找到所有后代中有c1样式类的div标签
$("li:not(.c1)")// 找到所有不包含c1样式类的li标签
$("li:not(:has(a))")// 找到所有后代中不含a标签的li标签

 测试结果代码(基本筛选器):

基本筛选器示例:
html代码:

DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Titletitle>
head>
<body>
<ul id="u1">
    <li>001li>
    <li>002li>
    <li id="l3">003li>
    <li>004li>
    <li>005li>
ul>

<script src="jquery-3.3.1.min.js">script>
body>
html>

测试代码:

快速创建方法1:

ul>li*5    ==>　　再按TAB键,会变成

        

  •     

  •     

  •     

  •     


快速创建方法2:
ul>li{$$$}*5　　==>　　再按TAB键,会变成

        
  • 001

    •     
  • 002

    •     
  • 003

    •     
  • 004

    •     
  • 005





表示,找到含有类的.c1的标签,去掉含有p的标签(从前面找的结果里把符合后面条件的移除)



测试has,


html代码:



DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Titletitle>
head>
<body>
<ul id="u1">
    <li>001li>
    <li>002li>
    <li id="l3">003li>
    <li>004li>
    <li>005li>
ul>

<hr>
<div class="c1">divdiv>
<p class="c1">pppp>
<hr>

<div>
    <p>div中的pp>
div>
<div>div2div>
<script src="jquery-3.3.1.min.js">script>
body>
html>



找到div中含有p标签的:


测试如下:







html代码:



DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Titletitle>
head>
<body>
<ul id="u1">
    <li>001li>
    <li>002li>
    <li id="l3">003li>
    <li>004li>
    <li>005li>
ul>

<hr>
<div class="c1">divdiv>
<p class="c1">pppp>
<hr>

<div>
    <span>div>spanspan>
div>
<div>div2div>
<div>
    <p>
        <span>div>p>spanspan>
    p>
div>
<script src="jquery-3.3.1.min.js">script>
body>
html>




测试结果:




表示,只要后代中含有span标签就可以找到.



html代码:



DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Titletitle>
head>
<body>
<ul id="u1">
    <li>001li>
    <li>002li>
    <li id="l3">003li>
    <li>004li>
    <li>005li>
ul>

<hr>
<div class="c1">divdiv>
<p class="c1">pppp>
<hr>

<div>
    <span>div>spanspan>
div>
<div>div2div>
<div>
    <p>
        <span class="c2">div>p>spanspan>
    p>
div>
<script src="jquery-3.3.1.min.js">script>
body>
html>




测试结果:




第二条表示,找后代中有span标签的div标签
第三条表示,找后代中有span标签和.c2属性的div标签
弹出框作业jQuery版本



DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Titletitle>
    <style>
        .cover{
            position: fixed;
            /*首先将位置固定住*/
            top:0;
            right:0;
            bottom:0;
            left:0;
            /*上下左右设置都为0*/
            background-color: rgba(0,0,0,0.2);

            z-index:99;
            /*指定一个元素的堆叠顺序,数值越大,表示在越上边*/
        }
        .modal{
            width:700px;
            height:400px;
            position: absolute;
            top:50%;
            left:50%;
            margin-left: -350px;
            margin-top: -200px;
            background-color: white;
            z-index: 100;
            /*将x的位置移动*/
        }
        .close{
            float: right;
            /*在这里将x移动到右上角*/
            margin-right: 15px;
            margin-top: 10px;
            font-size: 16px;
        }
        .hide{
            display: none;
            /*表示不显示*/
        }
    style>
head>
<body>

<button id="b1">点我弹出button>

<div class="cover hide" >div>



<div class="modal hide" >
    <span class="close" id="s1">×span>
    
div>

<script src="jquery-3.3.1.min.js">script>

<script>
    // 思考如何实现,在点击弹出按钮之后,弹出两个标签
    //首先,找标签,注意这个地方是通过id处理的
    // var b1Ele=document.getElementById('b1')
    var b1Ele=$("#b1")[0];//注意这个地方容易漏掉#,一定要多注意这些细节
    //上一行代码,表示通过jQuery的方式,找到b1标签

    //下面的书写太麻烦了,通过定义变量来进行改写!!!!(提高效率,节省查找时间)
    var coverEle=$(".cover")[0];
    var modalEle=$(".modal")[0];


    //其次,处理事件,单击button之后,找到类属性,移除类列表中的隐藏属性
    b1Ele.onclick=function (ev) {
        // document.getElementsByClassName('cover')[0].classList.remove('hide');
        // $(".cover")[0].classList.remove("hide");
        coverEle.classList.remove("hide");

        // document.getElementsByClassName('modal')[0].classList.remove('hide');
        // $(".modal")[0].classList.remove("hide");
        modalEle.classList.remove("hide");
    //移除样式
    }

        var s1Ele=document.getElementById('s1')
        //其次,处理事件,单击button之后,找到类属性,添加类列表中的隐藏属性
        s1Ele.onclick=function (ev) {
        // document.getElementsByClassName('cover')[0].classList.add('hide');
        // $(".cover")[0].classList.add("hide");
        coverEle.classList.add("hide");
        // document.getElementsByClassName('modal')[0].classList.add('hide');
        // $(".modal")[0].classList.add("hide");
        modalEle.classList.add("hide");
    //移除样式
    }
script>
body>
html>






jquery操作class


样式操作


样式类



addClass();// 添加指定的CSS类名。
removeClass();// 移除指定的CSS类名。
hasClass();// 判断样式存不存在
toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。



测试代码html:



DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Titletitle>
    <style>
        .c{
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background-color: red;
        }
        .c1{
            background-color: green;
        }
    style>
head>
<body>
<div id="d1" class="c c1">123div>

<script src="jquery-3.3.1.min.js">script>

body>
html>



在浏览器中操作上边的运行代码




我们习惯性,在变量前面加上$前缀,表示jQuery对象的变量名.


 属性选择器:



[attribute]
[attribute=value]// 属性等于
[attribute!=value]// 属性不等于



例子:



// 示例
<input type="text">
<input type="password">
<input type="checkbox">
$("input[type='checkbox']");// 取到checkbox类型的input标签
$("input[type!='text']");// 取到类型不是text的input标签



 html代码:



DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Titletitle>
head>
<body>

<div S14="好">div1div>
<div>div2div>

<script src="jquery-3.3.1.min.js">script>
body>
html>



结果测试:




html代码:



DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Titletitle>
head>
<body>

<div S14="好">div1div>
<div>div2div>

<input type="text">
<input type="password">
<input type="submit">

<script src="jquery-3.3.1.min.js">script>
body>
html>



结果测试:




表单常用筛选器:



:text
:password
:file
:radio
:checkbox

:submit
:reset
:button



简写寻找属性的方法:




表单对象属性



:enabled　　　　　　//默认可以使用的.
:disabled 　　　　//表示禁用的
:checked
:selected



html代码:



DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Titletitle>
head>
<body>

<div S14="好">div1div>
<div>div2div>

<input type="text">
<input type="password">
<input type="submit">

<hr>
<input type="checkbox" checked>


<input type="radio">

<select>
    <option value="111">111option>
    <option value="222">222option>
select>

<script src="jquery-3.3.1.min.js">script>
body>
html>



结果测试:





 筛选器方法:


(1)下一个元素：



$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")




html代码:



DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Titletitle>
head>
<body>

<ul>
    <li id="l0">000li>
    <li id="l1">111li>
    <li id="l2">222li>
    <li id="l3">333li>
    <li>444li>
ul>
<script src="jquery-3.3.1.min.js">script>
body>
html>



测试结果:




html代码:



DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Titletitle>
head>
<body>

<ul>
    <li id="l0">000li>
    <li id="l1">111li>
    <li id="l2">222li>
    <li id="l3">333li>
    <li>444li>
ul>
<div>divdiv>
<script src="jquery-3.3.1.min.js">script>
body>
html>




测试结果:




证明找的是同级的代码.




(2)上一个元素:(倒叙寻找)



$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")





(3)父亲元素



$("#id").parent()
$("#id").parents()  // 查找当前元素的所有的父辈元素
$("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。






(4)儿子和兄弟元素



$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们




(5)查找


搜索所有与指定表达式匹配的元素,这个函数是找出正在处理的元素的后代元素的好方法



$("div").find("p")



等价于 $("div p")　　//也就是在div中找p标签


html代码:





测试结果:




 (6)筛选


筛选出与指定表达式匹配的元素集合.这个方法用于缩小匹配的方位,用逗号分隔多个表达式.



$("div").filter(".c1")  // 从结果集中过滤出有c1样式类的



等价于 $("div.c1")


补充：



.first() // 获取匹配的第一个元素
.last() // 获取匹配的最后一个元素
.not() // 从匹配元素的集合中删除与指定表达式匹配的元素
.has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
.eq() // 索引值等于指定值的元素



html代码:



DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Titletitle>
head>
<body>

<ul>
    <li id="l0">000li>
    <li id="l1">111li>
    <li id="l2">222li>
    <li id="l3">333li>
    <li>444li>
ul>

<div class="c1">divdiv>

<div>
    <p>div>pp>
div>
<script src="jquery-3.3.1.min.js">script>
body>
html>



测试结果:




 CDN表示内容分发网络:比如:bootcdn


1.基本选择器和筛选器


2.选择器\筛选器和标签操作


3.class操作\样式操作\尺寸\属性操作


4.文档处理

						  
					  

						
							


						

							
							
										
						



						

						
						


						

						
					

					

					
					

						
相关

						

				
						
			            
            
            
                                    
           
  			
						

					

					
				


				

														
					
					

					
									

					
									   
标签