一、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. sublime添加到鼠标右键打开文件的方法？
			
    步骤: 1.win+R 打开运行,并输入regedit. 2.在左侧依次打开HKEY_CLASSES_ROOT\*\shell 3.在shell下新建“Sublime Text”项,在右侧窗口的“默认 ...
    
			
    2. 
						
  2. [分布式系统学习] 6.824 LEC2 RPC和线程 笔记
			
    6.824的课程通常是在课前让你做一些准备.一般来说是先读一篇论文,然后请你提一个问题,再请你回答一个问题.然后上课,然后布置Lab. 第二课的准备-Crawler 第二课的准备不是论文,是让你实现G ...
    
			
    3. 
						
  3. POJ--1690 (Your)((Term)((Project)))（字符串处理）
			
    (Your)((Term)((Project))) Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 3353 Accepted:  ...
    
			
    4. 
						
  4. Git：从github上克隆、修改和更新项目
			
    一.在本地新建一个文件夹,作为本地仓库,如“BigProjet”.在该文件夹打开git bash,进入到该文件夹目录下 二.将本地仓库初始化 $ git init 三.将项目从github或者服务器上 ...
    
			
    5. 
						
  5. 《SEO在网页制作中的应用》视频笔记
			
    学习了慕课网<SEO在网页制作中的应用>视频,今天将里面的知识整理一下. 一.SEO介绍 1.  搜索引擎工作原理 搜索引擎现在主流有百度.谷歌.360,他们都有庞大的搜索引擎数据库,每个 ...
    
			
    6. 
						
  6. 洛谷P1084 疫情控制 [noip2012] 贪心+树论+二分答案 (还有个小bugQAQ
			
    正解:贪心+倍增+二分答案 解题报告: 正好想做noip的题目然后又想落实学长之前讲的题?于是就找上了这题 其实之前做过,70,然后实在细节太多太复杂就不了了之,现在再看一遍感觉又一脸懵了... 从标 ...
    
			
    7. 
						
  7. 常用社交网络（微博等）动态新闻（feed、新鲜事）系统浅析（转）
			
    add by zhj:同时也看看国外牛逼公司是怎么做的吧 Stream-Framework    Python实现的feed Twitter 2013 Redis based, database fa ...
    
			
    8. 
						
  8. java-基础-【一】枚举
			
    enum 的全称为 enumeration, 是 JDK 1.5  中引入的新特性,存放在 java.lang 包中. 一.static final定义[jdk1.5之前] public static ...
    
			
    9. 
						
  9. 深度学习之TensorFlow（一）——基本使用
			
    一.目前主流的深度学习框架Caffe, TensorFlow, MXNet, Torch, Theano比较 库名称 开发语言 速度 灵活性 文档 适合模型 平台 上手难易 Caffe c++/cud ...
    
			
    10. 
						
  10. 更改docker服务网段分配地址
			
    docker安装完毕后,会自动生成一个网卡名为docker0的网桥,如果其默认分配的网段地址和已有地址段冲突,可按如下步骤修改. 查看默认地址段如下 docker0: flags=4099<UP ...
    
			
    11.