一、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. PAT甲1031 Hello World for U【字符串】
			
    1031 Hello World for U (20 分) Given any string of N (≥5) characters, you are asked to form the chara ...
    
			
    2. 
						
  2. NEFU 118 - n!后面有多少个0　&　NEFU 119 - 组合素数　-　[n!的素因子分解]
			
    首先给出一个性质: n!的素因子分解中的素数p的幂为:[ n / p ] + [ n / p² ] + [ n / p³ ] + …… 举例证明: 例如我们有10!,我们要求它的素因子分解中2的幂:  ...
    
			
    3. 
						
  3. Java异常的优势与缺陷，及其处理原则
			
    最近在做一个读取数据库元数据的框架,其中的数据库的检查异常让人印象深刻.try-catch简直让人抓狂,同时作为框架哪些异常时应该抛出来给调用人员,哪些是应该自己处理掉的,抛出来的异常时检查异常还是非 ...
    
			
    4. 
						
  4. 在浏览器地址栏输入一个URL后回车，将会发生的事情？
			
    https://yq.aliyun.com/articles/20667
    
			
    5. 
						
  5. 【Git 使用笔记】第一部分：安装git 和 使用git
			
    第一部分:安装git(本人使用ubuntu系统) sudo apt-get install git 第二部分:基本配置 git config core.filemode false//忽略文件属性的修 ...
    
			
    6. 
						
  6. Effective Java 目录
			
    <Effective Java>目录摘抄. 我知道这看起来很糟糕.当下,自己缺少实际操作,只能暂时摘抄下目录.随着,实践的增多,慢慢填充更多的示例. Chapter 2 Creating  ...
    
			
    7. 
						
  7. javaScript高级教程(五) Event Flow
			
    1.两个阶段三个模型:Netscape支持事件捕获,IE支持事件冒泡,w3c是先捕获后冒泡 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 S ...
    
			
    8. 
						
  8. 第四课：通过配置文件获取对象（Spring框架中的IOC和DI的底层就是基于这样的机制）
			
    首先在D盘创建一个文件hero.txt,内容为:com.hero.Hero(此处必须是Hero的完整路径) 接下来是Hero类 package com.hero; public class Hero  ...
    
			
    9. 
						
  9. iOS连续上传多张图片
			
    参考地址:http://www.cocoachina.com/ios/20180730/24366.html 需求是怎样的:for 循环里面.多个网络请求上传图片,每次上传一张,至于为什么每次只上传一 ...
    
			
    10. 
						
  10. linux上mysql安装详细教程
			
    所有平台的MySQL下载地址为: MySQL 下载. 挑选你需要的 MySQL Community Server 版本及对应的平台. MySQL - MySQL服务器.你需要该选项,除非你只想连接运行 ...
    
			
    11.