jQuery了解&掌握

~是小王吖~

已于 2022-09-28 09:09:46 修改

阅读量543

点赞数

分类专栏： Java jQuery idea 文章标签： jquery javascript 前端

于 2022-09-27 20:29:56 首次发布

本文链接：https://blog.csdn.net/Sunblogy/article/details/127071748

版权

Java 同时被 3 个专栏收录

46 篇文章 0 订阅

订阅专栏

idea

35 篇文章 0 订阅

订阅专栏

jQuery

2 篇文章 0 订阅

订阅专栏

jQuery

1. jQuery介绍&下载

1.1 jQuery介绍：

jquery是一套js的面向对象的框架，这个框架主要简化js的开发工作
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由[John Resig](https://baike.baidu.com/item/John Resig/6336344)发布。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jquery本质上还是js，所以要学jquery，需要先去学js
理论上来说，js能做的事情，jquery都能做

1.2. jQuery下载

下载jquery可以去官网 https://jquery.com

jquery的版本主要分为三个：

1.x 的版本是基本上能够兼容所有的浏览器，包括IE6,7,8；功能不再更新，一般的项目可以使用这个版本
2.x的版本不兼容IE6,7,8，使用的人较少，功能也不再更新了；不建议使用
3.x的版本不兼容IE6,7,8 ，支持所有最新的浏览器，很多老的插件不再支持，官方在持续的开发中，可以选择使用

当从官网下载了压缩包以后，解压里面的内容可以看到两个文件

jquery-x.x.x.js 开发版本，程序员可以看懂里面的代码，一般建议开发的时候使用
jquery-x.x.x.min.js 压缩版本，里面的代码无缩进，变量名变成了a,b,c等名，体积更小，一般建议生产环境使用

如果使用cdn 可以选择 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

2. jQuery快速入门

题目：将以下奇数行的块设置成粉色背景，偶数行设置成黄色背景

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery快速入门</title>
<!--    要使用jQuery就要引入相关的依赖包-->
    <script src = "../jq/jquery-3.6.0.min.js"></script>
</head>
<body>
<!--将以下奇数行的块设置成粉色背景，偶数行设置成黄色背景-->
<div>1111111</div>
<div>1111111</div>
<div>1111111</div>
<div>1111111</div>
<div>1111111</div>
<div>1111111</div>
<div>1111111</div>

<script>
    // js方法：
   /* var div = document.querySelectorAll("div");
    for (let i = 0; i < div.length; i++) {
        if (i % 2 == 0) {
            div[i].style.backgroundColor = "pink";
        } else {
            div[i].style.backgroundColor = "yellow";
        }
    }*/
    // jQuery方法
    $("div:odd").css("background-color","pink");
    $("div:even").css("background-color","yellow");
</script>
</body>
</html>

效果：
在这里插入图片描述
注意：jQuery相当于是简化了的Jscript，所以在使用的时候，要引入jQuery的包

3. 选择器

3.1 选择器作用

jq的选择器是非常重要的一部分内容，所有使用jq来查找标签都会使用到选择器，选择器使用的很熟悉后能够减少很多代码

3.2 选择器分类

body里面的标签，用于下面选择器做选择
在这里插入图片描述

3.2.1 基本选择器

$("*") 通配符选择器返回所有的元素(jquery的对象)

2.$("具体标签") 标签选择器根据指定的标签名去匹配所有的标签
在这里插入图片描述

3. $(".myClass") 类选择器根据指定的类名去匹配所有的标签如果一个标签有多个类也可以匹配
在这里插入图片描述

$("#myId") id选择器根据指定的id名去匹配元素如果id的值中有特殊符号是需要转义的比如: id=“foo[bar]” 就需要进行转义 $(“#foo\[bar\]”)

3.2.2 子代选择器

" 选择器1 > 选择器 2 " 在选择器1匹配的元素中去找匹配选择器2的子标签
在这里插入图片描述

3.2.3后代选择器

$("选择器1 选择器2") 在选择器1匹配的元素中去找匹配选择器2的所有后代标签
在这里插入图片描述

3.2.4 组合选择器

$("选择器1,选择器2") 将每一个选择器匹配到的元素都返回回来只要有一个能匹配都可以

3.2.5 相邻兄弟选择器

$("选择器1 + 选择器2") 匹配紧跟着选择器1的匹配选择器2的元素

3.2.6 属性选择器

$("div[id]") 找到有id属性的div标签

$("div[id=a]") 找到id的值为a的div标签

$("div[id!=a]")  找到id的值不为a的div标签

$("div[id^=a]")  找到id的值以a开头的div标签

$("div[id$=a]") 找到id的值以a结尾的div标签

$("div[id*=a]") 找到id的值包含a的div标签

3.2.7 过滤选择器

$("选择器:first") 返回所有匹配元素中的第一个  div:first
 
$("选择器:last") 返回所有匹配元素中的最后一个  div:last
 
$("选择器1:not(选择器2)") 匹配选择器1不匹配选择器2 

$("input:not(:checked)") 找到未选中的input

$("选择器1:has(选择器2)") 匹配选择器1还匹配选择器2 

$("input:has(:checked)") 找到已选中的input

$("选择器:even") 所有元素从0开始计数的所有偶数的元素

$("选择器:odd") 所有元素从0开始计数的所有奇数的元素

$("选择器:eq(0)") 所有元素从0开始计数的 指定索引的元素 
 div:eq(0)
 
$("选择器:lt(3)") 所有元素从0开始计数的 小于指定索引的元素

$("选择器:gt(0)") 所有元素从0开始计数的 大于指定索引的元素

$(":header") 匹配所有的h1-h6标签

$("选择器:contains(text)") 选择器匹配后 标签中的内容包含指
定内容的元素  div:contains('aaaa')

$("选择器:empty") 选择器匹配后 不包含子元素或者内容为空的元素

2.2.8 表单过滤选择器

 :input 所有的表单元素 包含 textarea select button等
 
 :text type=text的元素
 
:password  密码框

:radio 单选框

:checkbox 复选框

:submit 提交按钮

:reset 重置按钮

:file 文件选择器

:hidden 隐藏域

:checked 选择的 radio或者checkbox被选中的

:selected select中被选中的option

:enabled 可用的

:disabled 不可用的

:image 图片提交按钮

:nth-child 匹配其父元素下的指定的子元素
<ul>
    <li>1111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
 </ul>
<ul>
    <li>555</li>
    <li>666</li>
    <li>777</li> 
    <li>888</li>
 </ul>
$("li:nth-child(2)")   返回的是 [<li>333</li>,<li>777</li>  ]
也可以写 $("li:nth-child(odd)")

:first-child  匹配其父元素下的第一个子元素

:last-child 匹配其父元素下的最后一个子元素

:only-child 匹配其父元素下的只有一个子元素的

4 dom操作

相应操作打开注释看即可

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jq_dom操作</title>
  <script src="../jq/jquery-3.6.0.js"></script>
</head>
<body>
<p>啊啊啊啊啊啊</p>
<input type="text">
<script>

  //创建一个对应的标签对象
  let div = $("<div>111</div>");
  //添加到body中
  //父级去添加子级
  // $("body").append(div);
  //子级添加到父级中
  // div.appendTo($("body"))
  //添加到前面去
  // $("body").prepend(div)
  // div.prependTo($("body"))
  //兄弟关系添加
  // $("p").after(div);
  // $("p").before(div);
  // div.insertAfter($("p"))
  // div.insertBefore($("p"))
  //克隆对象
 // var clone = div.clone();//返回新的对象
  //删除
  // $("p").remove();
  //清空标签里面的内容
  // $("p").empty();
  //修改
  //内容修改
  //有参数的时候是设置内容 不识别html
 // $("p").text("<b>bbbbbbbbbbbbb</b>");
  //没有参数的时候是返回内容
 // var text = $("p").text();
  //设置内容 识别html标签
 // $("p").html("<b>bbbbbbbbbbbbb</b>");
  //不设置参数是获取里面的内容
  //var text = $("p").html();
  //表单元素
//  $("input").val("aaaa");
  //获取表单元素的内容
 // var val = $("input").val();
  //属性修改
 // $("p").attr("id","aa");
 // $("p").prop("class","aa");
  //传一个参数就是获取
  //var attr = $("p").attr("class");
 // var prop = $("p").prop("id");
  //建议如果操作的属性是元素的固有属性建议使用prop 如果是自定义属性建议使用attr

  //针对class有专门的方法
 // $("p").addClass("a");//
 // $("p").removeClass("a")
 // $("p").toggleClass("a");//原本如果有就删除 如果没有就添加

  //样式操作
//  $("p").css("color","red");//设置样式
//  let color = $("p").css("color");//设置样式
  //同时设置多个样式
//  $("p").css({
  //  "color":"blue",
 //   "font-size":"50px"
//  });
  //查询就是选择器
  // width();//设置或者获取宽
  // height();//设置或获取高
  // innerWidth()  包含补白区域 不包含边框的宽
  // innerHeight() 包含补白区域 不包含边框的高
  //
  // outerWidth()   包含补白区域 包含边框的宽
  // outerHeight()	包含补白区域 包含边框的高
  //
  // scrollTop() 设置或返回垂直滚动条距离顶部的偏移量
  // scrollLeft()  设置或返回水平滚动条距离左侧的偏移量

 // $(document).scrollTop(1000) //设置文档的垂直滚动条偏移
  // alert(color);
  // alert(val)
</script>
</body>
</html>

注意：一定要引入jQuery的包哦

5 js对象和jq对象的转换

var p = document.querySelector("p");//js对象
    //把js的对象转换成jq的对象
    var $1 = $(p);
    $1.text("qqqqqqq");//设置内容
    //jq对象转成js的对象，利用数组
    $1[0].innerText = "wwwwwwwwww";

注意：

js 转 jq，就是==》 $(js对象)
jq 转 js，就是==》 $jq对象[0] 利用数组

~是小王吖~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery了解&掌握

jquery是一套js的面向对象的框架，这个框架主要简化js的开发工作jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由[John Resig](https://baike.baidu.com/item/John Resig/6336344)发布。jQuery设计的宗旨是“”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML。
复制链接

扫一扫

专栏目录