jQuery进阶

时间：2024-04-07 17:43:51

表单选择器/操作内容/属性/样式

使用val()方法获取值 相当于js中的value
val()方法可只读也可只写

//选择所有的文本框并修改为哈哈
$(":text").val("哈哈")

使用enabled来获取表单中文本输入中可用的并修改他的值

	 $("input[type='text']:enabled").val("嘻嘻")
  	 //第二种修改可用的文本框中值
	 // $(":text:enabled").val("哈哈")

修改禁用文本框中的值

 $("input[type='text']:disabled").val("嘻嘻")

使用text()可以获取标签中的文本
text()可以获取符合条件的所有文本值
而html()只能获取到符合条件的第一个文本值 且html()中也可以获取到此标签的子标签 也可将你设置的标签值作为标签显示 但是text()只能作为值

let $a= $("span");
console.log($a.text());

在jQuery中将获取属性值和修改属性值封装成了一个函数

//获取id为a的value值
console.log($("#a").attr("value"));
//修改id为a的value值
console.log($("#a").attr("value","8"));
 //新增一个属性值
 console.log($("#a").attr("name","readonly"));
 //删除属性
 $("#a").removeAttr("name");

使用prop来判断单选框的选中状态

 console.log($("input[type='checkbox']").prop("checked")); //返回ture/false

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .abc{
           background-color: blue;
        }
        .c{
            background-color: pink;
        }
    </style>
</head>
<body>
    <p id="a">1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
</body>
<script src="/js文件/jquery-3.7.1.min.js"></script>
<script>
let a=$("#a")
//新增一个样式
a.css("color","red");
//获取这个样式的值
 console.log(a.css("color"));
 //批量设置样式
 a.css({"color":"red","font-size":"17px"});
 //添加一个class
 a.addClass("abc")
//移除一个class
a.removeClass("abc");
//切换class样式
a.toggleClass("c")
</script>
</html>

jQuery创建和插入对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul id="ul">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li id="ul6">6</li>
    </ul>
    <ul style="border:1px solid red ;">
        <li id="li">i</li>
        <li>i</li>
        <li>i</li>
    </ul>
</body>
<script src="/js文件/jquery-3.7.1.min.js"></script>
<script>
let ul=$("#ul");
let li=$("#li");
//将li追加成ul的最后一个子级
ul.append(li)//剪切添加操作
$("#ul").append($("#li")) //第二种方式
//将li追加成ul的第一个子级
$("#ul").prepend($("#li"))
// 创建一个字符标签 
let addele=$("<li>n</li>")
//将标签放在ul6之前(兄弟)
$("#ul6").before(addele)
//将标签放在ul6后面(兄弟)
$("#ul6").after(addele)
//将元素添加到另外一个元素的前面
addele.insertBefore("#ul6")
//将元素添加到另外一个元素的后面
addele.insertAfter("#ul6")
</script>
</html>

删除节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul id="a" style="border: 1px solid red;">
        <li>1</li>
        <span>4</span>
    </ul>
    <ul id="b" >
        <li>2</li>
        <span>3</span>
    </ul>
</body>
<script src="/js文件/jquery-3.7.1.min.js"></script>
<script>
    //使用remove删除时 事件等数据都会一并被删除 有个疑问就是 行内的id和样式等都不会被删除 在追加数据的时候还存在
    $("#a li").click(function (){
       alert(1)
       
    })
   
        let abc=$("ul:eq(0)").remove();
        $("body").append(abc);
</script>
<script>
    //使用detach会保存事件等数据
        $("#a li").click(function (){
       alert(1)
       
    })
   
        let abc1=$("ul:eq(0)").detach();
        $("body").append(abc1);
</script>
<script>
    //删除的时候此元素中的所有子元素内容及标签 但是不能删除本身
     let abc3=$("ul:eq(0)").empty();
</script>
</html>

复制节点

需要注意的是 复制出来的节点不会显示在DOM文档中 需要插入节点的方法来操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="a">123</div>
</body>
<script src="/js文件/jquery-3.7.1.min.js"></script>
<script>
    $("#a").click(function (){
        console.log(1);
    })
    //clone里的参数表示是否复制匹配元素的所有事件处理
    $("#a").clone(true).appendTo("body") //将#a节点复制后追加到body后
    //这里就没有点击事件了
    $("#a").clone(false).appendTo("body")
</script>
</html>

替换节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>h1</h1>
    <p>p</p>
</body>
<script src="/js文件/jquery-3.7.1.min.js"></script>
<script>
    //替换节点 将p替换成h1复制的节点
    $("p").replaceWith($("h1").clone())
    //p节点复制之后将h1替换掉
	$("p").clone(true).replaceAll("h1")
</script>
</html>

遍历节点

遍历子元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li id="a">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</body>
<script src="/js文件/jquery-3.7.1.min.js"></script>
<script>
	//children（也可传入选择器表达式 缩小搜索范围）
  let abc=$("ul").children("#a");//数组结构
  console.log(abc[0].id);//获取第一个数组下标的id
</script>
</html>

遍历同辈元素

这里你们是不是有疑问 这明明跟选择器很像 为什么会是叫遍历呢 被称为遍历方法，是因为它是 jQuery 中用于在 DOM 结构中遍历元素的一种方法之一。遍历方法的作用是沿着 DOM 树结构移动并选择元素，以便对它们进行操作或者进一步筛选。

  //获得#a的下一个兄弟元素
  console.log($("#a").next()); //返回li
  //获得#a的上一个兄弟元素
  console.log($("#a").prev());//返回数组没值
  //返回匹配元素的前后所有同辈元素
  console.log($("#b").siblings());//返回数组0: li#a 1: li 2: li 3: li 4: li 不会包含他本身

遍历前辈元素

  //返回它的父级元素
  console.log($("#b").parent()); //ul
  //返回它的祖先元素
  console.log($("#b").parents());//0: ul 1: body 2: html

其他的遍历方法

有each() end() find() filter() eq() first() last()

each()

 $(function(){
    $("ul li").each(function(index,ele){
        console.log(index,ele);//index表示下标 从0开始 ele表示元素
    })
  })

例子

// 选择所有具有 .container 类的元素
$('.container')
  // 找到其中的 <ul> 元素
  .find('ul')
    // 找到具有 .active 类的 <li> 元素，并将文本颜色设置为红色
    .find('.active')
      .css('color', 'red')
    // 结束对 .active 类元素的操作，并返回到之前选中的 <ul> 元素
    .end()
  // 设置所有 <ul> 元素的背景颜色为黄色
  .css('background-color', 'yellow');
find()用于查找当前 jQuery 对象中匹配选择器的子元素。它允许你在当前元素的后代元素中进行选择，而不仅仅是直接子元素而已。
end() 方法的作用是在链式调用中返回到之前选择的
  • 元素
filter是遍历过滤方法 与 find() 方法不同，filter() 方法是对当前元素集合中的元素进行筛选，而不是在其后代元素中进行查找

filter()

1.
const numbers = [1, 2, 3, 4, 5, 6];

const evenNumbers = numbers.filter(function(num) {
  return num % 2 === 0; //筛选选择偶数
});

console.log(evenNumbers); // 输出 [2, 4, 6]




2.
//filter() 方法接受一个回调函数，该函数检查数组中的每个元素是否为偶数。只有当元素满足条件时，它们才会被包含在新数组中。
const numbers = [1, 2, 3, 4, 5, 6];

const evenNumbers = numbers.filter(num => num % 2 === 0);

console.log(evenNumbers); // 输出 [2, 4, 6]
first() 和 last() 方法用于选择当前 jQuery 对象中的第一个和最后一个元素

样式的切换和判断

$("div").toggleClasss(classname) //切换class样式
$("div").hasClasss(classname) //判断class样式是否存在

css-DOM操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 300px;
            height: 300px;
            position: relative;
            left: 300px;
            background-color: brown;
            padding: 10px;
        }
        span{
            width: 20px;
            height: 30px;
            position: relative;
            /* top: 80px; */
        }
    </style>
</head>
<body> 
    <div>
       <span></span>
    </div>
</body>
<script src="/js文件/jquery-3.7.1.min.js"></script>
<script>
    //获取元素的宽度
     console.log($("div").width());
     //获取元素的高度
     console.log($("div").height());
     //获取元素的偏移位置 有加上外边距 内边距没算 （这里还可以传参使用 传入你对重新对文档的偏移量）
     console.log($("div").offset({top:100,left:100}));
     //获取此元素离父级元素的偏移位置
     console.log($("span").position());
     console.log($("div").scrollLeft(300));
</script>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ScrollLeft 示例</title>
<style>
  .scroll-container {
    width: 300px;
    height: 200px;
    overflow-x: auto; /* 或 overflow-x: scroll; */
    white-space: nowrap; /* 防止内容换行 */
    border: 1px solid #ccc;
  }
  .scroll-content {
    width: 800px; /* 超出容器宽度，使得出现水平滚动条 */
  }
</style>
</head>
<body>

<div class="scroll-container">
  <div class="scroll-content"

相关文章