jquery的基本用法

最新推荐文章于 2024-08-15 08:55:57 发布

柚木普·

最新推荐文章于 2024-08-15 08:55:57 发布

阅读量243

点赞数

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/m0_68541330/article/details/127962040

版权

jquery作为一个简单的js框架，封装了js许多常用的代码，可以帮助我们用更少的代码完成对应的功能

文章目录

1.jquery的选择器

基本的选择模式

    $("  ").

id选择器
class选择器
元素名称选择器
组合选择器 $(".bigbox,one")，通过逗号进行分隔
在前端的值赋予中，逗号与空格经常充当截断的作用

我们css如何选择对应的元素，在jquery中也是同理可以应用的

~:选择同级目录下的元素
（空格）：选择指定元素下所有的同名标签
(大于号)：选择指定元素同一目录下2的标签
+:选择指定元素下一个对应的标签

2.获取指定元素的属性值

第一种方法：$(".bigbox").attr("display")
第二种方法：$("input").prop("checked")

attr 可以获取自定义和固定属性的值 eg:checked、name、id，也可以获取自定义属性的值，但是prop不可以获取自定义属性的值
但是我们并不可以直接获取style里面的样式，如下面这一个案例
$(".bigbox").attr("display")
关于prop（）
作用：在1.6版本之后更新使用的函数，可以用于获取js中的dom元素之间的属性值

   const arr={name:1,age:18};
// prop可以访问js中dom结构里的属性值
   console.log( $(arr).prop("name"));

其次，当我们拿prop（）获取checked等布尔值属性的时候，prop（）会以true以及flase的形式返回给我们，我们可以将这个用于语句之间的判断

元素属性值得更改也相对简单

   const arr={name:1,age:18};
// prop可以访问js中dom结构里的属性值
   console.log( $(arr).prop("name","3"))
   直接对复选框的选中情况进行更改;
      $("input").prop("checked","true")

直接在函数的第二值中，赋予属性自己想要更改的值就可以了
也可以对某一个dom节点的空值进行赋予

   $(".one").attr("name","sonke");
   console.log($(".one").attr("name"));
   输出结果为sonke

如何添加具体的样式

css（）给dom节点添加某个具体的样式
$(".two").css("background-color","blue")，同时函数会自动检查你添加的值是否可以被读取
addClass（“样式名”）给一个dom节点添加某个样式
removeClass(“样式名”) 给一个dom节点删去某个样式
但是无法删去一个具体的样式

3.如何获取一个dom节点的内部内容

    <div class="two"><div class="two-small">
        你好你好，我现在刚刚睡醒
    </div></div>
   1.console.log($(".two").html());
   输出结果为：
   <div class="two-small">
        你好你好，我现在刚刚睡醒
    </div> 
   2.console.log($(".two").text());
   输出结果为：你好你好，我现在刚刚睡醒
   3.$(".two").val()
   用于获取元素内部的value的值