jQuery基本语法

最新推荐文章于 2022-05-08 20:01:23 发布
最新推荐文章于 2022-05-08 20:01:23 发布
阅读量2.3k 收藏 15
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42127687/article/details/88209413
版权

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>
天空小强
关注
  • 1
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JQuery的基础语法(快速入门，适用较广)
m0_51408910的博客
12-30 306
JQuery 基础语法(快速入门) JQuery入口函数 //默认写法 $(document).ready(function(){ // 开始写 jQuery 代码... }); //简写 $(function(){ // 开始写 jQuery 代码... }); JavaScript入口函数 window.onload = function () { // 执行代码 } JQuery入口函数与JavaScript入口函数的区别 JQuery的入口函数是在html所有标签（DOM）
jQuery基础语法实例入门
10-25
主要介绍了jQuery基础语法,以实例形式分析了jQuery的对象以及针对对象进行的操作用法,具有一定的参考借鉴价值,需要的朋友可以参考下
JQuery_基本语法和特效
CLYCLT的专栏
01-25 552
<br />基本语法：<br /> $("HTML元素").action()<br /><br /> 实例:<br />  $(this).hide();  隐藏当前元素<br />  <br />  $("p").hide();   隐藏所有段落<br />  <br />  $("p.test").hide();   隐藏所有 class="test"的段落<br />  <br />  $("#test").hide();   隐藏所有id="test"的元素<br /><br />  <br />文
jQuery 基础语法
abc689101的博客
05-08 470
1、jQuery，一个JavaScript库，极大地简化了 JavaScript 编程，很容易学习。它是一款同prototype、Note.js等一样优秀的js开发库类，特别是对css和XPath的支持，使我们写js变得更加方便！ 2、美元符号定义 jQuery  选择符（selector）"查询"和"查找" HTML 元素  jQuery 的 action() 执行对元素的操作 3、所有 jQuery 函数位于一个 document ready 函数中，这是为了防止文档在...
jquery一些基本的语法
majunzhu的博客
05-05 512
基本选择器$("#id")        id选择器$("tagName")    标签选择器，返回数组   $(".class")     类选择器，返回数组   $("*")          选择文档中的所有的元素$("E.C")   选择样式名称为C的E标记$("E#I")   选择id为I的E标记层叠选择器$("E,F")   选择所有E元素和所有F元素（并集
JQuery基础语法小结
10-24
在日常开发中JQuery是我们使用最频繁的JS库。使用JQuery进行开发，你需要先了解JQuery的基本语法。下面是在学习JQuery时总结的一些简单语法。
jQuery基础语法总结
07-01
jQuery基础语法
jQuery的基础语法
qq_45619439的博客
11-20 178
这里写自定义目录标题标题# 欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 标题...
jquery的基本语法
weixin_45193791的博客
04-12 1777
js对象：js语法获取的页面标签对象称为js对象。js对象可以转换成jquery对象。 var a = document.getElementById("d1") js对象转换成jquery对象的方法 function a() { var a = document.getElementById("d1") //将js对象转换成jquery对象 alert($(a)) } jquery对象：jquery语法获取的页面标签称为jquery对象
JQuery基本语法
hellosmu的博客
08-30 360
JQuery基本语法：$(selector).action() //例如： $(this).hide() -隐藏当前对象 //页面加载完成后调用function中的处理 $(document).ready(function(){ alert("文档加载完毕时显示这句话"); }); //点击时隐藏p元素 $(document).ready(function(){ $("p").click(f
jQuery框架_01_快速入门
weixin_48672332的博客
06-24 181
jQuery框架_01_快速入门 jQuery简介 jQuery 是一个 JavaScript 库(定义好的一个 JS 文件，内部封装了很多功能，可以大大简化 JS 操作步骤，提高开发效率，使用前先用<script>导入文件)。 程序员只需要编写一套代码 ，就可以无差异的运行在所有的浏览器上。(同一段JS代码在不同的浏览器上执行效果是有差异的，可能会针对不同浏览器编写不同js代码) 基本语法 jQuery对象与js对象之间的转换 JS对象无法使用JQ对象中方法，如果JS对象需要使用JQ对象中
Jquery的基本语法
我的Object Lift
11-11 537
jquery语法 文章分类:Web前端 原文：http://www.webjx.com/JavaScript/20071109/javascript_js_866_3.html 1、关于页面元素的引用 　　通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法，且返回的对象为jquery对象（集合对象），不能直接调用do
jQuery--基本语法
归子莫的博客
07-11 681
jQuery--基本语法 博客说明 文章所涉及的资料来自互联网整理和个人总结，意在于个人学习和经验汇总，如有什么地方侵权，请联系本人删除，谢谢！ 语法 jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。 基础语法： $(selector).action() $ 美元符号定义 jQuery 选择符（selector）"查询"和"查找" HTML 元素 jQuery 的 action() 执行对元素的操作 例如 //隐藏当前元素 $(thi
jQuery基础语法
OpenWorld1的博客
10-20 585
jQuery基础语法一、基础语法是：$(selector).action()  美元符号定义 jQuery  选择符（selector）“查询”和“查找” HTML 元素  jQuery 的 action() 执行对元素的操作二、jQuery与JavaScript不同之处 onload 事件不能同时指定两个事件处理器，但是 ready 事件是可以的。 $ $符号仅仅表示一个合法但不常见的函数
jquery基本语法（一）
weixin_30496431的博客
03-19 228
https://www.cnblogs.com/haiyan123/p/7657151.html 一、jQuery基础1.为什么要用jquery？ 写起来简单，省事，开发效率高，兼容性好2、什么是jQuery? jQuery是一个兼容多浏览器的JavaScript库（类似python里面的模块）3、如何使用jQuery？ 1、导入 <script src="jque...
jQuery 语法
看不过的黑工坊
02-17 304
jQuery 语法 通过 jQuery，您可以选取（查询，query） HTML 元素，并对它们执行"操作"（actions）。 jQuery 语法 jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。 基础语法： $(selector).action() 美元符号定义 jQuery 选择符（selector）"查询"和"查找" H
jquery基本语法
最新发布
09-28
以下是一些常用的JQuery基本语法示例： 1. 选择器： - 通过标签名选择元素：$("标签名")。 - 通过类名选择元素：$(".类名")。 - 通过ID选择元素：$("#ID")。 2. 方法： - 设置元素的属性：$("选择器").attr(...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值