前端入门07——jQuery基本语法&导入&选择器

昨日内容回顾

• BOM与DOM操作

• BOM操作

  # window对象
  window.innerHeight
  window.innerWidth
  window.open()  # 新建窗口打开指定的页面
      window.open(url,'','height,width,top,bottom')
  window.close()  # 关闭当前窗口
  ​
  # navigator对象
  navigator.userAgent     # 后面讲爬虫还会涉及
  ​
  # history对象
  window.history.forward()
  window.history.back()
  ​
  # location对象
  window.location.href  # 获取当前页面的url
  window.location.href = url  # 跳转到指定的url
  window.loacation.reload()
  ​
  # 弹出框
  alert()
  confirm()  获取到用户点击的确定还是取消
  prompt()        获取到用户输入的内容
  ​
  # 计时器相关
  1.
      setTimeout()
      clearTimeout()
  2.
      setInterval()
    clearInterval()

   

• DOM操作

  """
  DOM树的概念
  ​
  DOM操作可以操作
      HTML
      CSS
      事件
  ​
  既然要操作 那首先得学会如何查找标签
  """
  ​
  # 直接查找
  document.getElementById('d1')  # 直接获取到标签对象
  document.getElementsByClassName('c1')  # 数组
  document.getElementsByTagName('div')  # 数组
  ​
  # 间接查找
  parentElement
  children
  firstElementChild
  lastElementChild
  nextElementSibling
  previousElementSibling
  ​
  # 节点操作
      1.创建img标签，赋值属性，添加到文档中
    2.创建a标签，赋值属性和内部文本，添加到文档中
      """
      1.创建标签
          let pEle = document.createElement('p')
      2.赋值属性
          pEle.id = 'd1'
          pEle.setAttribute('username','jason')
          pEle.setAttribute('class','c1')
      3.赋值内部文本
          pEle.innerText = '我是p标签'
      4.添加到其他标签内部
          appendChild()
              ...
          insertBefore()
              ...
          setAttribute()
              get...
              remove...
      """
  # innerText与InnerHTML
      # innerText只能获取标签内部的文本 设置文本的时候不识别HTML
    # InnerHTML文本和标签都获取 设置文本的时候识别HTML
  ​
  # 获取值操作  value
      inputEle = document.getElementById('i1')
    inputEle.value
  # 获取文件数据
    inputEle.files    # 数组  [文件对象,文件对象1...]
    inputEle.files[0]
  # class操作
      classList
    classList.add()
    classList.remove()
    classList.contains()
    classList.toggle()  # 有删无加
  # css操作  只要想操作标签css先用style起手
  pEle.style.color
  pEle.style.backgroudColor
  pEle.style.marginTop
  pEle.style.fontSize         
  """
  会讲css中横杆或者下划线去掉 然后讲后面的单词变大写
  font-size               fontSize
  """
  ​
  # 事件
  """
  到达某个条件自动触发的动作
  """
  # 绑定事件的两种方式
      <p onclick='func()'></p>
    <p id='d1'></p>
    
    <script>
      // 第一种
      function func(){}
      // 第二种
      pEle = document.getElementById('d1')
      pEle.onclick = function(){}
    </script>
  # js代码到底应该写在html页面的哪个位置
      一般都是放在body内最下方
  # onload
      等待XXX加载/读取/渲染...完毕
    XXX.onload
      等待XXX好了

   

 

 

 

 

 

今日内容概要

• jQuery(封装了js的前端框架(模块))

  很容易与我们学的DOM操作混淆

 

jQuery

"""
jQuery内部封装了原生的js代码(还额外添加了很多的功能)
能够让你通过书写更少的代码 完成js操作 
类似于python里面的模块  在前端模块不叫模块  叫 “类库”
​
兼容多个浏览器的 你在使用jQuery的时候就不需要考虑浏览器兼容问题
​
jQuery的宗旨
    write less do more
    让你用更少的代码完成更多的事情
​
复习
    python导入模块发生了哪些事？
        导入模块其实需要消耗资源
    jQuery在使用的时候也需要导入
        但是它的文件非常的小(几十KB) 基本不影响网络速度



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内容:

选择器
筛选器
样式操作
文本操作
属性操作
文档处理
事件
动画效果
插件
each、data、Ajax(重点 django部分学)
​
版本介绍
​
jQuery文件下载
    压缩          容量更小
    未压缩
"""
# jQuery在使用之前 一定要确保已经导入了

针对导入问题

1 文件下载到了本地 如何解决多个文件反复书写引入语句的代码
    可以借助于pycharm自动初始化代码功能完成自动添加
    配置
        编辑
        file and code template
  """我不想下载jQuery文件 能不能使用呢？"""
  
2 直接引入jQuery提供的CDN服务(基于网络直接请求加载)
    CDN:内容分发网络
    CDN有免费的也有收费的
    前端免费的cdn网站:
        bootcdn
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  """你的计算机必须要有网络"""
  
  



jQuery基本语法

  jQuery(selector).action()
　　　　   选择器
  秉持着jQuery的宗旨 jQuery简写 $
  jQuery()  === $()
​
        # jQuery与js代码对比
        eg:将p标签内部的文本颜色改为红色

        // 原生js代码操作标签
        let pEle = document.getElementById('d1')
        pEle.style.color = 'red'
​
        // jQuery操作标签
        $('p').css('color','blue')

先学如何查找标签

基本选择器

// id选择器
$('#d1')
w.fn.init [div#d1]0: div#d1length: 1__proto__: Object(0)

// class选择器
$('.c1')
w.fn.init [p.c1, prevObject: w.fn.init(1)]0: p.c1length: 1prevObject: w.fn.init [document]__proto__: Object(0)

// 标签选择器
$('span')
w.fn.init(3) [span, span, span, prevObject: w.fn.init(1)]

​
"""一定要区分开(重点)"""
// jQuery对象如何变成标签对象
undefined
$('#d1')[0]
<div id=•"d1">•…•</div>•
document.getElementById('d1')
<div id=•"d1">•…•</div>•

// 标签对象如何转jQuery对象
undefined
$(document.getElementById('d1'))
w.fn.init [div#d1]

组合选择器/分组与嵌套

$('div')
w.fn.init(2) [div#d1, div.c1, prevObject: w.fn.init(1)]

$('div.c1')       //找到有c1 class 类的div标签
w.fn.init [div.c1, prevObject: w.fn.init(1)]0: div.c1length: 1prevObject: w.fn.init [document]__proto__: Object(0)
$('div#d1')
w.fn.init [div#d1, prevObject: w.fn.init(1)]

$('*')       //所有元素选择器
w.fn.init(19) [html, head, meta, title, meta, link, script, script, body, span, span, div#d1, span, p#d2, span, span, div.c1, span, span, prevObject: w.fn.init(1)]
               
$('#d1,.c1,p')  //组合选择器         并列+混用
w.fn.init(3) [div#d1, p#d2, div.c1, prevObject: w.fn.init(1)]
              



层级选择器

$('div span')  # 后代
w.fn.init(3) [span, span, span, prevObject: w.fn.init(1)]
$('div>span')  # 儿子
w.fn.init(2) [span, span, prevObject: w.fn.init(1)]
$('div+span')  # 毗邻
w.fn.init [span, prevObject: w.fn.init(1)]
$('div~span')  # 弟弟
w.fn.init(2) [span, span, prevObject: w.fn.init(1)]

基本筛选器

: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标签

$('ul li')
w.fn.init(10) [li, li, li, li, li, li, li.c1, li, li#d1, li, prevObject: w.fn.init(1)]
               
$('ul li:first')  # 大儿子   
w.fn.init [li, prevObject: w.fn.init(1)]0: lilength: 1prevObject: w.fn.init [document]__proto__: Object(0)
               
$('ul li:last')  # 小儿子   
w.fn.init [li, prevObject: w.fn.init(1)]0: lilength: 1prevObject: w.fn.init [document]__proto__: Object(0)
               
$('ul li:eq(2)')        # 放索引
w.fn.init [li, prevObject: w.fn.init(1)]0: lilength: 1prevObject: w.fn.init [document]__proto__: Object(0)
               
$('ul li:even')  # 偶数索引 0包含在内
w.fn.init(5) [li, li, li, li.c1, li#d1, prevObject: w.fn.init(1)]0: li1: li2: li3: li.c14: li#d1length: 5prevObject: w.fn.init [document]__proto__: Object(0)
              
$('ul li:odd')  # 奇数索引
w.fn.init(5) [li, li, li, li, li, prevObject: w.fn.init(1)]0: li1: li2: li3: li4: lilength: 5prevObject: w.fn.init [document]__proto__: Object(0)
              
$('ul li:gt(2)')  # 大于索引
w.fn.init(7) [li, li, li, li.c1, li, li#d1, li, prevObject: w.fn.init(1)]0: li1: li2: li3: li.c14: li5: li#d16: lilength: 7prevObject: w.fn.init [document]__proto__: Object(0)
              
$('ul li:lt(2)')  # 小于索引
w.fn.init(2) [li, li, prevObject: w.fn.init(1)]0: li1: lilength: 2prevObject: w.fn.init [document]__proto__: Object(0)
              
$('ul li:not("#d1")')  # 移除满足条件的标签
w.fn.init(9) [li, li, li, li, li, li, li.c1, li, li, prevObject: w.fn.init(1)]
         
$('div')
w.fn.init(2) [div, div, prevObject: w.fn.init(1)]
$('div:has("p")')  # 选取出包含一个或多个标签在内的标签
w.fn.init [div, prevObject: w.fn.init(1)]




示例:自定义模态框,使用jQuery实现弹出和隐藏功能

<!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>自定义模态框</title>
  <style>
    .cover {
      position: fixed;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background-color: darkgrey;
      z-index: 999;
    }
    .modal {
       600px;
      height: 400px;
      background-color: white;
      position: fixed;
      left: 50%;
      top: 50%;
      margin-left: -300px;
      margin-top: -200px;
      z-index: 1000;
    }
    .hide {
      display: none;
    }
  </style>
</head>
<body>
<input type="button" value="弹" id="i0">

<div class="cover hide"></div>
<div class="modal hide">
  <label for="i1">姓名</label>
  <input id="i1" type="text">
   <label for="i2">爱好</label>
  <input id="i2" type="text">
  <input type="button" id="i3" value="关闭">
</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
  var tButton = $("#i0")[0];
  tButton.onclick=function () {
    var coverEle = $(".cover")[0];
    var modalEle = $(".modal")[0];

    $(coverEle).removeClass("hide");
    $(modalEle).removeClass("hide");
  };

  var cButton = $("#i3")[0];
  cButton.onclick=function () {
    var coverEle = $(".cover")[0];
    var modalEle = $(".modal")[0];

    $(coverEle).addClass("hide");
    $(modalEle).addClass("hide");
  }
</script>
</body>
</html>

属性选择器[attribute]

$('[username]')
w.fn.init(3) [input, input, p, prevObject: w.fn.init(1)]

$('[username="jason"]')     //属性等于
w.fn.init [input, prevObject: w.fn.init(1)]

$('p[username="egon"]')          //属性不等于
w.fn.init [p, prevObject: w.fn.init(1)]
​
$('[type]')
w.fn.init(2) [input, input, prevObject: w.fn.init(1)]
$('[type="text"]')
w.fn.init(2) [input, input, prevObject: w.fn.init(1)]

表单筛选器

$('input[type="text"]')
w.fn.init [input, prevObject: w.fn.init(1)]0: inputlength: 1prevObject: w.fn.init [document]__proto__: Object(0)

$('input[type="password"]')
w.fn.init [input, prevObject: w.fn.init(1)]
​
$(':text')  # 等价于上面第一个
w.fn.init [input, prevObject: w.fn.init(1)]0: inputlength: 1prevObject: w.fn.init [document]__proto__: Object(0)

$(':password')  # 等价于上面第二个
w.fn.init [input, prevObject: w.fn.init(1)]
​

:text
:password
:file
:radio
:checkbox     //$(":checkbox")      找到所有的checkbox
:submit
:reset
:button
...
​

 

表单对象属性

:enabled
:disabled
:checked
:selected

"""特殊情况"""

$(':checked')  //它会将checked和selected都拿到
w.fn.init(2) [input, option, prevObject: w.fn.init(1)]0: input1: optionlength: 2prevObject: w.fn.init [document]__proto__: Object(0)

$(':selected')  //它只拿selected,找到所有被选中的option
w.fn.init [option, prevObject: w.fn.init(1)]

$('input:checked')  //自己加一个限制条件
w.fn.init [input, prevObject: w.fn.init(1)]

筛选器方法$('#d1').next()   //同级别下一个

w.fn.init [span, prevObject: w.fn.init(1)]0: spanlength: 1prevObject: w.fn.init [span#d1]__proto__: Object(0)
$('#d1').nextAll()
w.fn.init(5) [span, div#d2, span, span, span.c1, prevObject: w.fn.init(1)]0: span1: div#d22: span3: span4: span.c1length: 5prevObject: w.fn.init [span#d1]__proto__: Object(0)
$('#d1').nextUntil('.c1')          //不包括最后一个
w.fn.init(4) [span, div#d2, span, span, prevObject: w.fn.init(1)]0: span1: div#d22: span3: spanlength: 4prevObject: w.fn.init [span#d1]__proto__: Object(0)
              
              
$('.c1').prev()  //上一个
w.fn.init [span, prevObject: w.fn.init(1)]0: spanlength: 1prevObject: w.fn.init [span.c1, prevObject: w.fn.init(1)]__proto__: Object(0)
$('.c1').prevAll()
w.fn.init(5) [span, span, div#d2, span, span#d1, prevObject: w.fn.init(1)]
$('.c1').prevUntil('#d2')
w.fn.init(2) [span, span, prevObject: w.fn.init(1)]

              
$('#d3').parent()                //第一级父标签
w.fn.init [p, prevObject: w.fn.init(1)]0: plength: 1prevObject: w.fn.init [span#d3]__proto__: Object(0)
$('#d3').parent().parent()
w.fn.init [div#d2, prevObject: w.fn.init(1)]
$('#d3').parent().parent().parent()
w.fn.init [body, prevObject: w.fn.init(1)]
$('#d3').parent().parent().parent().parent()
w.fn.init [html, prevObject: w.fn.init(1)]
$('#d3').parent().parent().parent().parent().parent()
w.fn.init [document, prevObject: w.fn.init(1)]
$('#d3').parent().parent().parent().parent().parent().parent()
w.fn.init [prevObject: w.fn.init(1)]

$('#d3').parents()　　　　//查找当前元素的所有的父辈元素
w.fn.init(4) [p, div#d2, body, html, prevObject: w.fn.init(1)]

$('#d3').parentsUntil('body')                  //查找当前元素的所有父辈元素,知道遇到匹配的元素为止
w.fn.init(2) [p, div#d2, prevObject: w.fn.init(1)]
            
              
$('#d2').children()  　　//儿子们
              
$('#d2').siblings()  　　//同级别上下所有,兄弟们
              


              
查找: 搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法             
$('div p')
# 等价           
$('div').find('p')                 # find从某个区域内筛选出想要的标签 
              
 

             
"""下述两两等价"""
$('div span:first')
w.fn.init [span, prevObject: w.fn.init(1)]
$('div span').first()
w.fn.init [span, prevObject: w.fn.init(3)]0: spanlength: 1prevObject: w.fn.init(3) [span, span#d3, span, prevObject: w.fn.init(1)]__proto__: Object(0)
 
                                                                                   
$('div span:last')
w.fn.init [span, prevObject: w.fn.init(1)]
$('div span').last()
 
                                                                                   
w.fn.init [span, prevObject: w.fn.init(3)]
$('div span:not("#d3")')
w.fn.init(2) [span, span, prevObject: w.fn.init(1)]
$('div span').not('#d3')
w.fn.init(2) [span, span, prevObject: w.fn.init(3)]

 

 

 示例:左侧菜单

 

<!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">
  <title>左侧菜单示例</title>
  <style>
    .left {
      position: fixed;
      left: 0;
      top: 0;
       20%;
      height: 100%;
      background-color: rgb(47, 53, 61);
    }

    .right {
       80%;
      height: 100%;
    }

    .menu {
      color: white;
    }

    .title {
      text-align: center;
      padding: 10px 15px;
      border-bottom: 1px solid #23282e;
    }

    .items {
      background-color: #181c20;

    }
    .item {
      padding: 5px 10px;
      border-bottom: 1px solid #23282e;
    }

    .hide {
      display: none;
    }
  </style>
</head>
<body>

<div class="left">
  <div class="menu">
    <div class="item">
      <div class="title">菜单一</div>
      <div class="items">
        <div class="item">111</div>
        <div class="item">222</div>
        <div class="item">333</div>
    </div>
    </div>
    <div class="item">
      <div class="title">菜单二</div>
      <div class="items hide">
      <div class="item">111</div>
      <div class="item">222</div>
      <div class="item">333</div>
    </div>
    </div>
    <div class="item">
      <div class="title">菜单三</div>
      <div class="items hide">
      <div class="item">111</div>
      <div class="item">222</div>
      <div class="item">333</div>
    </div>
    </div>
  </div>
</div>
<div class="right"></div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

<script>
  $(".title").click(function (){  // jQuery绑定事件
    // 隐藏所有class里有.items的标签
    // $(".items").addClass("hide");  //批量操作
    // $(this).next().removeClass("hide");
    
    // jQuery链式操作
    $(this).next().removeClass('hide').parent().siblings().find('.items').addClass('hide')
  });
</script>