一、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. flex常用快捷键
			
    先插入一条广告,博主新开了一家淘宝店,经营自己纯手工做的发饰,新店开业,只为信誉!需要的亲们可以光顾一下!谢谢大家的支持!店名: 小鱼尼莫手工饰品店经营: 发饰.头花.发夹.耳环等(手工制作)网店:  ...
    
			
    2. 
						
  2. Solr学习笔记之6、Solr学习资源
			
    一.官方资源 1.官网:http://lucene.apache.org/solr/ 2.wiki:http://wiki.apache.org/solr/FrontPage 3.solr中文网:ht ...
    
			
    3. 
						
  3. ZOJ 3993 - Safest Buildings - [数学题]
			
    题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3993 题意: 给出n幢建筑,每个都以一个点表示,给出点坐标. 有 ...
    
			
    4. 
						
  4. the internal array pointer
			
    The foreach construct provides an easy way to iterate over arrays. foreach works only on arrays and  ...
    
			
    5. 
						
  5. 各种小巧的Hello World
			
    在Reddit看到这篇文章:Hello from a libc-free world! ,觉得挺有趣,然后又想起以前看过的各种相关资料,在此做一个整理.注意所有实验环境都为Linux. 版本一: 实际 ...
    
			
    6. 
						
  6. 【python基础】字符串格式化(% VS format)
			
    字符串格式化 Python的字符串格式化有两种方式: 百分号方式.format方式 百分号的方式相对来说比较老,而format方式则是比较先进的方式,企图替换古老的方式,目前两者并存. 1.百分号方式 ...
    
			
    7. 
						
  7. mvc debug无法进入controller
			
    可能原因为,工程更改名称 进入工程bin目录下,删除所有文件即可
    
			
    8. 
						
  8. java NIO (二） 一个故事讲清楚NIO
			
    假设某银行只有10个职员.该银行的业务流程分为以下4个步骤: 1) 顾客填申请表(5分钟): 2) 职员审核(1分钟): 3) 职员叫保安去金库取钱(3分钟): 4) 职员打印票据,并将钱和票据返回给 ...
    
			
    9. 
						
  9. Unity3d 镜面折射 vertex and frag Shader源代码
			
    Unity3d 镜面折射  网上能找到的基本上是固定管道或表面渲染的shader. 特此翻译为顶点.片段渲染的Shader, 本源代码仅仅涉及shader与cs部分, 请自行下载NGUI  unity ...
    
			
    10. 
						
  10. 协作工具 discord 和 slack
			
    discord: https://discordapp.com/ slack: www.slack.com
    
			
    11.