JQuery简单语法

最新推荐文章于 2021-01-25 11:40:15 发布

java后端指南

最新推荐文章于 2021-01-25 11:40:15 发布

阅读量195

点赞数

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

本文链接：https://blog.csdn.net/Ting1king/article/details/105710753

版权

前端专栏收录该内容

31 篇文章 0 订阅

订阅专栏

JQuery代码写在里面：

$(function(){

   // 开始写 jQuery 代码...

});

选择器

元素选择器：

	$(function(){
		//写JQuery代码
		$("button").click(function(){
			$("p").hide();
		});
	});

id 选择器

#id 选择器通过 HTML 元素的 id 属性选取指定的元素。

<script>
$(document).ready(function(){
 $("button").click(function(){
	$("#test").hide();
 });
});
</script>
</head>

<body>
<h2>这是一个标题</h2>
<p>这是一个段落</p>
<p id="test">这是另外一个段落</p>
<button>点我</button>
</body>

.class 选择器

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
$(".test").hide();
  });
});
</script>
</head>
<body>

<h2 class="test">这是一个标题</h2>
<p class="test">这是一个段落。</p>
<p>这是另外一个段落。</p>
<button>点我</button>

层次选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script src="js/jquery-1.12.4.min.js">
	
	</script>
	<script type="text/javascript">
		$(function(){
			
			//p的所有后代
			//$("p span").css("border","1px solid red")
			//直接后代
			//$("p>span").css("border","1px solid red")
			
			//p后面紧跟的第一个input标签
			//$("p+input").css("border","1px solid red");
			
			//p后面的所有input标签，不需要紧跟，所有同级的标签
			//$("p~input").css("border","1px solid red");
		})
	</script>
	<body>
		<span></span>
		<p></p>
		<p>12</p>
		<input type="text" value="111"/><br />
		<input type="text" value="222"/><br />
		<p>2</p>
		<p>3</p>
		<p>
			<span>4
				<span>ty</span>
			</span>
		</p>
		<p>5</p>
		<p>6</p>
	</body>
</html>

基本过滤选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script src="js/jquery-1.12.4.min.js">
	
	</script>
	<script>
		$(function(){
			// $("p:first").css("border","1px solid red")
			// $("p:last").css("border","1px solid red")
			
			//偶数
			//$("p:even").css("border","1px solid red")
			//奇数
			//$("p:odd").css("border","1px solid red")
			
			//指定序号
			$("p:eq(4)").css("border","1px solid red")
			
			//$("p:odd:eq(1)").css("border","1px solid red")
			//等价于
			//$("p:odd").eq(1).css("border","1px solid red")
			
			//指定范围
			//$("p:gt(1):lt(2)").css("border","1px solid red");
			
			//过滤文字
			//$("p:contains('1')").css("border","1px solid red");
			
			//$("p span:contains('3')").css("border","1px solid red");
			
			//无子元素或者无文本，空标签
			//$("p:empty").css("border","1px solid red");
			
			
			// $("p:not(:empty)").css("border","1px solid red");
			
			//排除伪类
			//$("p:not(.myclass)").css("border","1px solid red");
			
			//可见的p标签加样式
			//$("p:visible").css("border","1px solid red");
			
			//把不可见的变为可见
			// $("p:hidden").show()
			//把可见的变为不可见
			//$("p:visible").hide()
		})
	</script>
	<body>
		<p></p>
		<p>12</p>
		<p>2</p>
		<p>3</p>
		<p>4</p>
		<p>5</p>
		<p>6</p>
	</body>
</html>

属性选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
	</head>
	<script src="js/jquery-1.12.4.min.js">
	
	</script>
	<script type="text/javascript">
		$(function(){
			//属性选择器
			//$("[name='username']").css("border","1px solid red")
			//$("[name='sex']").css("border","1px solid red")
			//$("[type=text]").css("border","1px solid red")
			//$("[name='username'][readonly=readonly]").css("border","1px solid red")
			//console.log($("[name='sex'][checked=checked]").val())
			
			//表单选择器
			//$(":submit").css("border","1px solid red");
			
			//$(":hidden").attr("type","text");
		})
	</script>
	<body>
		<form action="" method="post">
			<input type="text" name="username" id="username" /><br>
			<input type="text" name="username" id="username" readonly="readonly" /><br>
			<input type="password" name="password" id="password" /><br>
			男：<input type="radio" name="sex" id="sex" value="1" checked="checked"/>
			女：<input type="radio" name="sex" id="sex" value="2"/><br>
			
			<input type="hidden" value="fuck you" />
			<input type="submit" value="提交"/>
		</form>
	</body>
</html>

选择器补充

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script src="js/jquery-1.12.4.min.js">
	
	</script>
	<script type="text/javascript">
		$(function(){
			//:parent非空
			//$("td:parent").css("border","1px solid red")
			//等价于
			//$("td:not(:empty)").css("border","1px solid red")
			
			//.parent():获得父标签
			//$("td").parent().css("border","1px solid red")
			
			//has 用法,获得一级选择器中，其子标签满足has里面选择器要求的子集
			//获得含有p标签的div标签
			//$("div:has(p)").css("border","1px solid red")
			//获得所有div下面的p标签
			$("div p").css("border","1px solid red")
			
		})
	</script>
	<body>
		<table border="1">
			<tr><td>34</td><td>Data</td></tr>
			<tr><td>Data</td><td>Data</td></tr>
		</table>
		<div>ss
			<p>111</p>
			ff
		</div>
		<div>ff
			<p>222</p>
			ss
		</div>
	</body>
</html>

特殊事件绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script src="js/jquery-1.12.4.min.js">
	
	</script>
	<script type="text/javascript">
		$(function(){
			$("#i1").one("click",function(){
				alert("只执行一次")
			})
			$("#i2").toggle(function(){
				alert("执行一次")
			},function(){
				alert("执行一次")
			})
		})
	</script>
	<body>
		<input id="i1" type="button" value="点我1" />
		<input id="i2" type="button" value="点我2" />
	</body>
</html>

表单选择器

获取所有option的文本值：
$("#s").text(); //获取所有option的文本值
获取选中的option的文本值：
$("#s option:selected").text(); //获取选中的option的文本值
获取select中option的被选中的value值:
$("#s").val();
js获取select选中的值：
var sel=document.getElementById(“select1”);
var index = sel.selectedIndex; // 选中索引
albumid= sel.options[index].value;//要的值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script src="js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(function(){
			var t1=$("#d2").text();
			var t2=$("#d2").val();
			var t3=$("#d2 option:selected").text();
			console.log(t1);//a b c
			console.log(t2);//1
			console.log(t3);//a
			
		})
	</script>
	<body>
		<select id="d2">
			<option value="1">a</option>
			<option value="2">b</option>
			<option value="3">c</option>
		</select>
		<textarea id="d1"></textarea>
	</body>
</html>

dom操作

//1 html dom–>jquery dom
//var input = document.getElementById(“i1”)
//var $jq = $(i n p u t); / / j q u e r y 对象变量, 用$ 开头
//2 jquery dom–>html dom
//var i2 = $jq.get(1);//获得第1个html 元素
var i2 = $jq[0];//获得第1个html 元素
i2.style.border = “red 2px solid”;

操作内容

 text() - 设置或返回所选元素的文本内容
 text()—返回
 text(newtxt)—设置
 html() - 设置或返回所选元素的内容（包括 HTML 标记）
 val() - 设置或返回表单字段的值

操作属性

jQuery attr() 方法用于获取属性值。
attr(name):获取name的属性值
attr(name，bai):设置name的属性值为bai
对于 checked,selected ，disabled这样的属性，建议使用prop
prop(“checked”):获取属性
prop(“checked”,true):设置属性。

操作样式

常见的操作样式方法
 addClass() - 向被选元素添加一个或多个类
 removeClass() - 从被选元素删除一个或多个类
 toggleClass() - 对被选元素进行添加/删除类的切换操作
 css() - 设置或返回样式属性
 css(width):获取宽度
 css(width,“200px”);设置宽度。
 css({样式名1：样式值2, 样式名n：样式值n})

操作元素

 append() - 在被选元素的结尾插入内容（下级）
 prepend() - 在被选元素的开头插入内容（下级）
 after() - 在被选元素之后插入内容(同级)
 before() - 在被选元素之前插入内容(同级)

HTML，设置内容和属性

设置内容 - text()、html() 以及 val()

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值

<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
	</script>
	<script>
	$(document).ready(function(){
	  $("#btn1").click(function(){
  	  $("#test1").text("Hello world!");
 	 });
	  $("#btn2").click(function(){
    	$("#test2").html("<b>Hello world!</b>");
	  });
 	 $("#btn3").click(function(){
 	   $("#test3").val("RUNOOB");
 	 });
	});
	</script>
	</head>

	<body>
	<p id="test1">这是一个段落。</p>
	<p id="test2">这是另外一个段落。</p>
	<p>输入框: <input type="text" id="test3" value="菜鸟教程"></p>
	<button id="btn1">设置文本</button>
	<button id="btn2">设置 HTML</button>
	<button id="btn3">设置值</button>
	</body>
	</html>

在这里插入图片描述

text()、html() 以及 val() 的回调函数

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("#test1").text(function(i,origText){
      return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")"; 
    });
  });

  $("#btn2").click(function(){
    $("#test2").html(function(i,origText){
      return "旧 html: " + origText + " 新 html: Hello <b>world!</b> (index: " + i + ")"; 
    });
  });

});
</script>
</head>

<body>
<p id="test1">这是一个有 <b>粗体</b> 字的段落。</p>
<p id="test2">这是另外一个有 <b>粗体</b> 字的段落。</p>
<button id="btn1">显示 新/旧 文本</button>
<button id="btn2">显示 新/旧 HTML</button>
</body>
</html>

在这里插入图片描述

设置属性 - attr()

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#runoob").attr("href","http://www.runoob.com/jquery");
  });
});
</script>
</head>

<body>
<p><a href="//www.runoob.com" id="runoob">菜鸟教程</a></p>
<button>修改 href 值</button>
<p>点击按钮修改后，可以点击链接查看链接地址是否变化。</p>
</body>
</html>

修改多个属性：

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#runoob").attr({
      "href" : "http://www.runoob.com/jquery",
      "title" : "jQuery 教程"
    });
    // 通过修改的 title 值来修改链接名称
    title =  $("#runoob").attr('title');
    $("#runoob").html(title);
  });
});
</script>
</head>

<body>
<p><a href="//www.runoob.com" id="runoob">菜鸟教程</a></p>
<button>修改 href 和 title</button>
<p>点击按钮修改后，可以查看 href 和 title 是否变化。</p>
</body>
</html>

attr() 的回调函数

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#runoob").attr("href", function(i, origValue){
            return origValue + "/jquery";
        });
    });
});
</script>
</head>
<body>

<p><a href="//www.runoob.com" id="runoob">菜鸟教程</a></p>

<button>修改 href 值</button>

<p>点击按钮修改后，可以点击链接查看 href 属性是否变化。</p>

</body>
</html>

添加元素

append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

append() 方法

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("p").append(" <b>追加文本</b>。");
  });

  $("#btn2").click(function(){
    $("ul").append("<li>追加列表项</li>");
  });
});
</script>
</head>

<body>
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<button id="btn1">添加文本</button>
<button id="btn2">添加列表项</button>
</body>
</html>

删除元素

remove() - 删除被选元素及其子元素
empty() - 从被选元素中删除子元素

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").remove();
  });
});
</script>
</head>
<body>

<div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">

这是 div 中的一些文本。
<p>这是在 div 中的一个段落。</p>
<p>这是在 div 中的另外一个段落。</p>

</div>
<br>
<button>移除div元素</button>

</body>
</html>

前面这个会把div框也删除

后面这个不会把div框删除

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").empty();
  });
});
</script>
</head>
<body>

<div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">

这是 div 中的一些文本。
<p>这是在 div 中的一个段落。</p>
<p>这是在 div 中的另外一个段落。</p>

</div>
<br>
<button>清空div元素</button>

</body>
</html>

jQuery AJAX 方法

$.ajax()	:执行异步 AJAX 请求
$.getJSON()	:使用 HTTP GET 请求从服务器加载 JSON 编码的数据

Jquery 中的 $. a j a x 与$ .getJSON方法差异发现：

两种方法的效果是一样的，区别在于： $a j a x 的 d a t a 参数格式 d a t a : " q = " + s t r ，与$ .getJSON中的参数格式{q:str}的区别，并且在返回的结果中， $a j a x 返回的是 J s o n 字符串，需用 e v a l 方法转化为 J S O N 对象，而$ .getJSON返回的是JSON对象，可以直接使用，而$.getJSON的写法也更加简单，推荐使用

可以参考：https://www.cnblogs.com/cxx328/p/7483302.html

java后端指南

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JQuery简单语法

文章目录JQuery代码写在里面：选择器元素选择器：id 选择器.class 选择器更多实例：事件单击双击HTML，设置内容和属性设置内容 - text()、html() 以及 val()text()、html() 以及 val() 的回调函数设置属性 - attr()修改多个属性：attr() 的回调函数添加元素JQuery代码写在里面：$(function(){ // 开始写 jQ...
复制链接

扫一扫