web前端----jQuery基础语法

时间：2024-09-28 23:07:08
一、jQuery基础
1.为什么要用jquery？
    写起来简单，省事，开发效率高，兼容性好
2、什么是jQuery?
    jQuery是一个兼容多浏览器的JavaScript库（类似python里面的模块）
3、如何使用jQuery？
    1、导入 <script src="jquery-3.2.1.js"></script>
           或者<script src="jquery-3.2.1.min.js"></script>
    2、语法规则：$("")
4、JS和jQuery的区别？
    jQuery就是用JS写的
    js是基础，jQuery是工具
5、jQuery介绍
   - .min.xx
      压缩的：生产环境用
   -  没有压缩的（没有.min.xx）：开发用
6、 jQuery知识点
    　　html:裸体的人
    　　css:穿了衣服的人
   　　 JS：让人动起来
7、选择器：

id选择器：

$("#id")

标签选择器：

$("tagName")

class选择器：

$(".className")

配合使用：

$("div.c1")  // 找到有c1 class类的div标签

所有元素选择器：

$("*")

组合选择器：

$("#id, .className, tagName")

层级选择器：

x和y可以为任意选择器





$("x y");// x的所有后代y（子子孙孙）

$("x > y");// x的所有儿子y（儿子）

$("x + y")// 找到所有紧挨在x后面的y

$("x ~ y")// x之后所有的兄弟y




8、jQuery对象：
    - 用jQuery选择器查出来的就是jQuery对象
    - jQuery对象，他就可以使用jQuery方法，不能使用DOM的方法

    - DOM对象和jQuery对象转换：
        - $(".c1")[0] --> DOM对象
        - $(DOM对象)


web前端----jQuery基础语法


9、筛选器
 - 写在引号里面的


　　基本筛选器




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




练习：


自定义模态框，使用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 {

      width: 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>




jQuery版自定义模态框




  内容
     $(" .c1:contains('我是第一个')")    包含文档的内容的标签
     $(" :empty")     标签内容为空的
     $(" :has('')")   包含标签的标签
     $(" :parent")    找有孩子的父亲
     $("#i7").parent()   找i7的父亲

  可见性
     $(" :hidden")   找到隐藏的
     $(" :visible")  找不隐藏的，也就是显示的

　属性选择器：




[attribute]

[attribute=value]// 属性等于

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




例子：




// 示例

<input type="text">

<input type="password">

<input type="checkbox">

$("input[type='checkbox']");// 取到checkbox类型的input标签

$("input[type!='text']");// 取到类型不是text的input标签






表单常用筛选：




:text

:password
:file


:radio

:checkbox

:submit

:reset

:button




例子：




$(":checkbox")  // 找到所有的checkbox




表单对象属性:




:enabled

:disabled

:checked

:selected




例子：




<form>

  <input name="email" disabled="disabled" />

  <input name="id" />

</form>

$("input:enabled")  // 找到可用的input标签








<select id="s1">

  <option value="beijing">北京市</option>

  <option value="shanghai">上海市</option>

  <option selected value="guangzhou">广州市</option>

  <option value="shenzhen">深圳市</option>

</select>

$(":selected")  // 找到所有被选中的option




- 写在引号外面当方法用的
       过滤===========
          $("").first()   找第一个
          $("").parent()  找父亲
          $("").eq(index) 找等于index的
          .hasClass()  判断有没有某个类的
       查找
          .children() 找孩子
          .find()  查找
          .next()  下面的
          .nextAll()  下面所有的
          .nextUntil() 找下面的直到找到某个标签为止

          .parent() 找父亲
          .parents() 找所有的父亲
          .parentsUntil()  直到找到你要找的那个父亲为止

          .prev()  上面的
          .prevAll()  上面的所有
          .prevUntil()  上面的直到找到某个标签为止

          .siblings()  所有的兄弟


- toggleClass()  切换|开关：有就移除，没有就添加


- addClass("hide")  添加类


- removeClass("hide") 删除类


web前端----jQuery基础语法


以下需要注意的几个图片
（1）


web前端----jQuery基础语法


（2）


web前端----jQuery基础语法


（3）


web前端----jQuery基础语法


（4）


web前端----jQuery基础语法


二、练习题


web前端----jQuery基础语法


答案


web前端----jQuery基础语法


三、开关示例




<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>开关</title>

    <style>

        .c1{

            width: 200px;

            height: 200px;

            border :1px solid grey;

            border-radius: 50%;

            display: inline-block;

        }

        .c2 {

            background-color: yellow;

        }

    </style>

</head>

<body>

<div class="c1"></div>

<button class="btn">点击我</button>

<script src="jquery3_0_0.js"></script>

<script>

//    找到button添加事件

    $(".btn").on('click',function () {

        //当点击的时候让变色

        $(".c1").toggleClass('c2')

    });

</script>

</body>

</html>




相关文章