jQuery基本语法

一、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介绍    - 版本      - 1.x         兼容IE8。。。      - 3.x         最新   - .min.xx      压缩的：生产环境用   -  没有压缩的（没有.min.xx）：开发用6、 jQuery知识点    　　html:裸体的人    　　css:穿了衣服的人   　　 JS：让人动起来7、选择器：   1、基本选择器        - ID选择器                  $("#id的值")        - 类选择器（class）          $(".class的值")        - 标签选择器(html标签)       $("标签的名字")        - 所有标签                  $("*")

        - 组合选择器                $("xx,xxx")   2、层级选择器        - 从一个标签的子子孙孙去找    $("父亲 子子孙孙")        - 从一个标签的儿子里面找      $("父亲>儿子标签")        - 找紧挨着的标签             $("标签+下面紧挨着的那个标签")        - 找后面所有同级的           $("标签~兄弟")

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

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

9、筛选器        - 写在引号里面的            基本筛选器            　　$(" :first")   找第一个            　　$(" :not('')")  不是/非            　　$("#i1>input":not('.c1,.c2'))            　　$(" :even")     偶数            　　$(" :odd")      奇数            　　$(" :eq(index)")       找等于index的            　　$(" :gt(index)")       找大于index的            　　$(" :lt(index)")       找小于index的            　　$(" :last")     最后一个            　　$(" :focus")    焦点

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

            可见性========            　　$(" :hidden")   找到隐藏的            　　$(" :visible")  找不隐藏的，也就是显示的         　　属性==========            　　input[name]  --> 找有name属性的input            　　input[type='password']  --> 类型是password的input标签            表单==========           　　 :input            　　:password            　　:checkbox           　　 :radio            　　:submit           　　 :button            　　:image            　　:file

            表单对象属性=========                :enable   可选的                :disable  不可选                :checked  选中的                :selected 下拉框选中        - 写在信号外面当方法用的            过滤===========            $("").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>

转载于:https://www.cnblogs.com/morgana/p/8492757.html

jQuery基本语法相关推荐

jQuery基本语法和选择器
JQuery 一.JQuery基础语法 1.概念 JQuery是javaScript的一个库,Jquery基于javascript开发出来.目的就是为了简化javascript的开发. 宗旨:&quo ...
前端jQuery基本语法
jQuery基础语法 #不管找什么标签,用什么选择器,都必须要写$(""),引号里面再写选择器,通过jQuery找到的标签对象就是一个jQuery对象,用原生JS找到的标签对象叫做 ...
04.jQuery 基本语法笔记
jQuery是什么 jQuery是一个轻量级的.兼容多浏览器的JavaScript库. jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方便地进行Ajax交互 ...
JQuery选择器语法
JQuery选择器语法: 一.什么是选择器语法: 1.就是DOM对象进行定位的条件,比如根据ID定位,根据标签类型名. 2.jquery中只有三种选择器二.基本选择器: 1.[定位条件]:可以根据I ...
【前端基础】20.JQuery基本语法
视频目录 1.jQuery概述 1.1 JavaScript库 1.2 jQuery的概念 2.jQuery的基本使用 2.1 jQuery的下载 2.2 jQuery的使用步骤 2.3 jQuer ...
jQuery的简单了解和学习（1） jquery简介+语法+选择器+事件
jQuery jQuery简介 jQuery是一个Javascript函数库,可以让程序员写得少,而实现得多,主要包含以下功能:HTML元素的选取.操作:CSS操作:HTML事件函数:JavaScri ...
jQueryDom和源生DOM相互的转换、jQuery选择器语法、JQuery层次选择器语法、jQuery属性选择器语法、jQuery伪类选择器语法、
jQuery和源生DOM的转化案例 <body> <p id="test">123</p> <p>456</p> &l ...
jQuery的语法结构
一.jQuery的语法结构 jQuery语句主要包含三大部分:$().document和ready()分别被称为工厂函数.选择器.方法语法:$(selector).action(); 二.DOM里的 ...
1.jQuery基础语法 2.jQuery选择器、操作页面文档元素 3.jqueryDOM操作 4.jqueryCSS操作 5.Jquery事件 6.Jquery动画...
这周的学习让我初步了解到JQuery作为js库的封装的伟大性.Write less Do more 才是我们真正应该做到的! 1.jQuery基础语法 · 链式编程 $("#div1&quo ...

jQuery基本语法

jQuery基本语法相关推荐

最新文章

热门文章