jquery回顾

最新推荐文章于 2024-08-03 17:33:50 发布

_葫芦

最新推荐文章于 2024-08-03 17:33:50 发布

阅读量95

点赞数

分类专栏： jquery 文章标签：前端 jquery

本文链接：https://blog.csdn.net/ranzhang1/article/details/96168002

版权

jquery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

jquery回顾

一、选择器

基本选择器
```
$("#cl") 	
$(".cl")		
$("p")
$("*")
```

组合选择器

$(".cl p")		
$(".cl > p")		
$("div, p")		
$("div [name='123']")

属性选择器
```
$("[x='123']")		
$("[name='123']")
```
表单选择器
```
  $(":radio")
```

筛选器

$(".cl").eq(索引)
$(".cl").first()
$(".cl").last()
$(".cl").even()
$(".cl").odd()
$("#cl").hasclass("cl")

二、事件绑定

dom.on事件=function(){
	// this: 当前触发事件
}

jquery对象.事件（function(){
	//$(this) : 当前事件触发标签
}）

三、循环

循环序列

var arr=[12,13,4342];
		$.each(arr, function(i,j){
			console.log(i,j);	//打印索引和对应的值
		});

var obj={"name":"123", "pwd": "abc"};
$.each(obj, function(i,j){
	console.log(i,j)	;	//打印键和对应的值
});

循环标签

$("ul li").each(function(i,j){
	console.log(i, j);
	console.log($(this).html());
});

四、操作标签
1. 文本控制

```javascript
$("#p3").html() 	//p3中有标签，会把带标签也会取出来，如果没有会取出标签中的字符
$("#p3").text()		//只取出该标签中的文本
$("#p3").html(”<a href>111</a>“)		//会把其中的标签渲染出来
$("#p3").text(”<a href>111</a>“)		//只会把标签渲染成文本

input/textarea/select标签中的文本获取用.val()方法
多选框获取对应的值：$(".c1").prop("checked")		//如果选中则为true,否则false
```

属性操作

$("#p1").attr(属性名称)		//获取属性	
$("#p1").attr(属性名称，属性值)	//重新赋值属性

$("#p1").removeAttr(属性名称)	//删除某个属性

$("#p1").addClass(类名)		//在原有的基础上添加一个类
$("#p1").removeClass(类名)		//在原有的基础上删除一个类

节点控制

创建节点
```
$("<p>")		//<p></p>
```

添加子节点

$("div").append("<p>123</p>")		//给div添加子节点
$("<p>").appendTo("div")
$("div").after("<p>123</p>")			//给div添加兄弟节点

删除节点
```
$("div").remove()	
```
替换节点
```
$("div").replaceWith("新节点")
```

克隆节点

$("div").clone("创建节点")

应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>clone</title>
    <script src="./jquery.js"></script>
</head>
<body>
    <div class="outer">
        <div class="item">
            <button class="add">+</button>
            <input type="text">
        </div>
    </div>

    <script>
        $(".add").click(function () {
            clone = $(this).parent().clone();
            clone.children().attr("class","rem").html("-");
            $(".outer").append(clone);
        });

        $(".outer").on("click",".rem",function () {
            
            $(this).parent().remove();
        });
    </script>
</body>
</html>

_葫芦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery回顾

jquery回顾一、选择器基本选择器$("#cl") $(".cl") $("p")$("*")组合选择器$(".cl p") $(".cl > p") $("div, p") $("div [name='123']") 属性选择器$("[x='123']") $("[name='123']")表单选择器 $(":radi...
复制链接

扫一扫

专栏目录