一、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对象)




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") 删除类




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




（2）




（3）




（4）




二、练习题




答案




三、开关示例




<!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>




												


											
web前端----jQuery基础语法的更多相关文章
	

    
								
  1. Web前端JQuery基础
		
    JQuery知识汇总 一.关于Jquery简介          jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaS ...
    
		
    2. 
						
  2. Web前端-Ajax基础技术(下)
		
    Web前端-Ajax基础技术(下) 你要明白ajax是什么,怎么使用? ajax,web程序是将信息放入公共的服务器,让所有网络用户可以通过浏览器进行访问. 浏览器发送请求,获取服务器的数据: 地址栏 ...
    
		
    3. 
						
  3. Web前端-Ajax基础技术(上)
		
    Web前端-Ajax基础技术(上) ajax是浏览器提供一套的api,用于向服务器发出请求,接受服务端返回的响应,通过javascript调用,实现通过代码控制请求与响应,实现网络编程. ajax发送 ...
    
		
    4. 
						
  4. Web前端-JavaScript基础教程上
		
    Web前端-JavaScript基础教程 将放入菜单栏中,便于阅读! JavaScript是web前端开发的编程语言,大多数网站都使用到了JavaScript,所以我们要进行学习,JavaScript ...
    
		
    5. 
						
  5. jQuery 基础语法
		
    jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方便地进行Aja ...
    
		
    6. 
						
  6. Web前端JQuery面试题（二）
		
    Web前端JQuery面试题(二) 1.请写出jquery的语法? <script type="text/javascript"> $(document).ready( ...
    
		
    7. 
						
  7. Web前端-JavaScript基础教程下
		
    Web前端-JavaScript基础教程下 <script>有6个属性: async对外部脚本有效,可以用来异步操作,下载东西,不妨碍其他操作. charset为src属性指定字符集. d ...
    
		
    8. 
						
  8. Web前端开发基础 第一天（Html和CSS）
		
    学习web前端开发基础技术需要掌握:HTML.CSS.JavaScript语言.下面我们就来了解下这三门技术都是用来实现什么的: 1. HTML是网页内容的载体.内容就是网页制作者放在页面上想要让用户 ...
    
		
    9. 
						
  9. 网络统计学与web前端开发基础技术
		
    网络统计学与web前端开发基础技术 学习web前端开发基础技术(网页设计)需要了解:HTML.CSS.JavaScript三种语言.下面我们就来了解一下这三门技术在网页设计中的用途: HTML是网页内 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. PHP静态化（非伪静态化）
			
    什么是PHP静态化 PHP静态化的简单理解就是使网站生成页面以静态HTML的形式展现在访客面前,PHP静态化分纯静态化和伪静态化,两者的区别在于PHP生成静态页面的处理机制不同. 为什么要让网页静态化 ...
    
			
    2. 
						
  2. MySQL在linux上的rpm包方式安装方法
			
    1.下载上传mysql server和client rpm包: [root@faspdev mnt]# ls MySQL-client-5.5.53-1.el6.x86_64.rpm MySQL-se ...
    
			
    3. 
						
  3. https://pyobjc.readthedocs.io/en/latest/
			
    https://pyobjc.readthedocs.io/en/latest/ The PyObjC project aims to provide a bridge between the Pyt ...
    
			
    4. 
						
  4. mongo_action
			
    https://docs.mongodb.com/manual/introduction/ { name: "sue", age: 3, status: "A" ...
    
			
    5. 
						
  5. LDAP summary--  Python ldap
			
    A DN is comprised of a series of RDNs (Relative Distinguished Names) found by walking UP the tree (D ...
    
			
    6. 
						
  6. 洛谷P3599 Koishi Loves Construction 构造
			
    正解:构造 解题报告: 传送门! 这题俩问嘛,就分成两个问题港QwQ 就按顺序趴,先港第一问QwQ 首先要发现,n在膜n意义下就是0嘛 那作为前缀和的话显然它就只能放在第一个 然后再想下,发现,如果n ...
    
			
    7. 
						
  7. requests爬取百度贴吧：python  美女 3
			
    import requests import sys class Tieba(object): def __init__(self, tieba_name, pn): self.tieba_name  ...
    
			
    8. 
						
  8. 便于理解mysql内幕的各种逻辑图组
			
    便于理解mysql内幕的各种逻辑图组 http://blog.sina.com.cn/s/blog_445e807b0101ggtl.html 以下是个人一直以来从网络等各种途径收集到的一些对理解my ...
    
			
    9. 
						
  9. thinkpad X1 extreme 安装Ubuntu 18.04.2 LTS
			
    1.安装的时候需要禁用:nouveau.modeset=0 2.安装完成之后需要添加:acpi=off ,ro后面加上3,直接进入终端 3.启动之后:安装nvdia驱动 $ ubuntu-driver ...
    
			
    10. 
						
  10. Ubuntu16.04 安装 “宋体，微软雅黑，Consolas雅黑混合版编程字体” 等 Windows 7 下的字体
			
    Windows平台下,“宋体”.“微软雅黑”.“Courier New(编程字体)”用的比较多,看的也习惯了.那如何在 Ubuntu下也安装这些字体呢? 操作步骤如下: 第一步:从 Windows 7 ...
    
			
    11.