jquery 设定id的value jquery设置id

转载

mob64ca140761a4 2024-02-26 15:56:50

文章标签 jquery 设定id的value jquery radio 选中值 jquery 父元素相邻元素 文章分类 jQuery 前端开发

一.JQuery是什么?作用是什么?

jquery 设定id的value jquery设置id_jquery 父元素相邻元素_02

jQuery是一个快速、小型的、特性很多的JS库，它把很多事儿都变得简单。jQuery是免费的、开源的。

二.DOM与JQuery的互相转换

2.1 为什么要互相转换?

jQuery有一个庞大的库/函数。有许多方法是jQuery才能使用的,所以DOM对象要转换为jQuery来使用.

2.2 jQuery的引入

jquery 设定id的value jquery设置id_jquery 父元素相邻元素_03

首先下载好jQuery文件导入到编辑器中

jQuery的引入

注意:推荐引入语句放在</body>后,防止出现onload现象.(因为代码都是从上往下执行的).

2.3 DOM与jQuery的转换

三.基础选择器

<body>
		
		<div id="div1" class="test">div2</div>
		<div id="div1">div1</div>         			
		<div class="test">div3</div>
		<div>div4</div>
		<p class="test">这是一个P</p>
		<span class="test">这是一个span</span>
	</body>

***1、ID选择器

格式：$("#id属性值")

获取指定id值的对象(只会获取到第一个id的值)

// id选择器
		var div1 = $("#div1");
		console.log(div1);

***2、类选择器

格式：$(".class属性值")

获取所有指定class属性值的元素

// 类选择器
		var cls = $(".test");
		console.log(cls);

***3、元素选择器

格式：$("元素名/标签名")

获取所有指定标签名的元素

// 元素选择器
		var divs = $("div");
		console.log(divs);

4、通用选择器

格式：$("*")

获取所有的元素的对象

// 通用选择器
		var all = $("*");
		console.log(all);

5、组合选择器

格式：$("选择器1,选择器2...")

// 组合选择器
		var group = $("#div1,span,.test");
		console.log(group);

四.层次选择器

<head>
		<meta charset="UTF-8">
		<title>层次选择器</title>
	</head>
	<body>
		<div id="parent">层次择器
			<div id="child" class="testColor">父选择器
				<div class="gray">子选择器</div>
				<p>PPPPPPPPPP</p>
				<img src="http://www.baidu.com/img/bd_logo1.png" 
                      width="270" height="129" />
				<img src="http://www.baidu.com/img/bd_logo1.png" 
                      width="270" height="129" />
			</div>	
			<div>
				选择器2<div>选择器2中的div</div>
			</div>
			<p>这是一个P</p>
		</div>
		<div>其他div</div>
	</body>

后代选择器 ancestor descendan $("#parent div")选择id为parent的元素的所有div元素

子代选择器 parent > child $("#parent>div")选择id为parent的直接div子元素

相邻选择器 prev + next $(".blue + img")选择css类为blue的下一个img元素

同辈选择器 prev ~ sibling $(".blue ~ img")选择css类为blue的之后的img元素

// 后代选择器	ancestor descendant	$("#parent div")
		var houdai = $("#parent div");
		// 遍历
		houdai.each(function(){
			console.log(this);
		});

// 子代选择器	parent > child	$("#parent>div")
		var zidai = $("#parent > div");
		zidai.each(function(){
			console.log(this);
		});

// 相邻选择器	prev + next	$(".blue + img")  只会查询指定元素的下一个指定元素（只往下找一次元素）
var xl = $("#child + p");
		xl.each(function(){
			console.log(this);
		});

// 同辈选择器	prev ~ sibling $(".blue ~ img")
		var tb = $(".gray ~ img");
		tb.each(function(){
			console.log(this);
		});

五.表单选择器

表单元素：文本框、密码框、单选框、复选框、文件域、隐藏域、文本域textarea、下拉框select

非表单元素：div、span、p、h1~h6、img、a、table

<head>
		<meta charset="UTF-8">
		<title>表单选择器</title>
	</head>
	<body>
		<form id='myform' name="myform"  method="post">		
			<input type="hidden" name="uno" value="9999" disabled="disabled"/>
			姓名:<input type="text" id="uname" name="uname" /><br />
			密码:<input type="password" id="upwd" name="upwd" value="123456" /><br />
			年龄:<input type="radio" name="uage" value="0" checked="checked"/>小屁孩
				 <input type="radio" name="uage" value="1"/>你懂得  <br /> 
			爱好:<input type="checkbox" name="ufav" value="篮球"/>篮球
				 <input type="checkbox" name="ufav" value="爬床"/>爬床
				 <input type="checkbox" name="ufav" value="代码"/>代码<br />
			来自:<select id="ufrom" name="ufrom">
					<option value="-1" selected="selected">请选择</option>
					<option value="0">北京</option>
					<option value="1">上海</option>
				</select><br />
			简介:<textarea rows="10" cols="30" name="uintro"></textarea><br />
			头像:<input type="file"  /><br />
			<input type="button" value="按钮" />
			<input type="image" src="http://www.baidu.com/img/bd_logo1.png" width="20" height="20"/>
			<button type="submit" onclick="return checkForm();">提交</button>
			<button type="reset" >重置</button>
			<div>div</div>
		</form>
	</body>
        <script src="js/jquery-1.9.0.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var inputs = $(":input"); // 表单选择器，所有表单元素
		console.log(inputs.length);
		var inputs2 = $("input"); //元素选择器
		console.log(inputs2.length);
	</script>

六.过滤选择器

<head>
		<meta charset="UTF-8">
		<title>过滤选择器</title>
	</head>
	<body>
		爱好:<input type="checkbox" name="ufav" value="篮球" checked="checked"/>篮球
			 <input type="checkbox" name="ufav" value="爬床"/>爬床
			 <input type="checkbox" name="ufav" value="代码" checked="checked"/>代码
			 <input type="checkbox" name="ufav" value="爬床1"/>爬床1
			 <input type="checkbox" name="ufav" value="代码1" checked="checked"/>代码1<br />
	</body>

:checked 选择所有被选中的元素

:eq(index) 匹配指定下标的元素

:gt(index) 匹配下标大于指定值的所有元素

:odd 选择每个相隔的（奇数）元素

:even 选择每个相隔的（偶数）元素

//:checked 选择所有被选中的元素
                var ckeckeds = $(":checkbox:checked");
		ckeckeds.each(function(){
			console.log(this);
		});

//:eq(index) 匹配指定下标的元素
                var second = $(":checkbox:eq(1)")
		second.each(function(){
			console.log(this);
		});

//:gt(index) 匹配下标大于指定值的所有元素
                var gtfirst = $(":checkbox:gt(0)")
		gtfirst.each(function(){
			console.log(this);
		});

// :even 选择每个相隔的（偶数） 元素
                var odds= $(":checkbox:odd")
		odds.each(function(){
			console.log(this);
		});

七.操作元素的属性

获取属性的值

attr(属性名称) 获取指定的属性值，操作 checkbox 时选中返回 checked，没有选中返回 undefined。 attr('checked') attr('name')

prop(属性名称) 获取具有true和false两个属性的属性值 prop('checked')

设置属性的值

attr(属性名称,属性值);

prop(属性名称,属性值);

移除属性

removeAttr(属性名) 移除指定的属性 removeAttr('checked')

如果属性的返回值是true或false（checked、selected、disabled），使用prop()方式；其他属性使用attr();

<head>
		<meta charset="UTF-8">
		<title>操作元素的属性</title>
	</head>
	<body>
		<a href="http://www.baidu.com" aa="abc">百度</a>
		
		<br />
		
		<input id="ck1" type="checkbox" name="ch" checked="checked"/>aa
		<input id="ck2" type="checkbox" name="ch" />bb
	</body>
<script src="js/jquery-1.9.0.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
		// 获取元素的属性
		var hef = $("a").attr("href");
		console.log(hef);
		var hef2 = $("a").prop("href");
		console.log(hef2);
		
		var aa1 = $("a").attr("aa");
		console.log(aa1);
		var aa2 = $("a").prop("aa");
		console.log(aa2);
		
		// 获取复选框的选中状态
		var ck1 = $("#ck1").attr("checked");
		var ck2 = $("#ck1").prop("checked");
		console.log(ck1);
		console.log(ck2);
		
		var ck3 = $("#ck2").attr("checked");
		var ck4 = $("#ck2").prop("checked");
		console.log(ck3);
		console.log(ck4);
		
		
		// 设置属性的值
		$("a").attr("href","http://www.shsxt.com");
		
		$("#ck1").prop("checked",false);
		//$("#ck2").prop("checked",true);
		$("#ck2").attr("checked","checked");
		
		$("a").attr("aa","aabbcc");
		
		
		//移除属性
		$("a").removeAttr("href");
		
	</script>

八.操作元素的的样式

attr(“class”) 获取class属性的值，即样式名称

attr(“class”,”样式名”) 修改class属性的值，修改样式

addClass(“样式名”) 添加样式名称

css() 添加具体的样式

removeClass(class) 移除样式名称

<head>
		<meta charset="UTF-8">
		<title>操作元素的的样式</title>
		<style type="text/css">
			div{
			    padding: 8px;
			    width: 180px;
			}
			.blue{
				background: blue;
			}
			.red {
				background: red;
			}
			.larger{
				font-size: 30px;
				background: pink;
			}
			.green {
				background : green;
			}
			
		</style>
	</head>
	<body>
		<h3>css()方法设置元素样式</h3>
		<div id="conBlue" class="blue larger">天蓝色</div>
        <div id="conRed">大红色</div>
        <div id="remove" class="blue larger">天蓝色</div>
	</body>
	<script src="js/jquery-1.9.0.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
		/* attr */
		// 设置元素的class属性（如果属性不存在，则添加属性）
		$("#conRed").attr("class","red");
		
		// 如果属性存在，则修改属性值
		$("#conBlue").attr("class","green");
		
		// addClass() 添加样式，原来的样式保留，如果出现相同的样式，以后面定义样式为准
		$("#conRed").addClass("larger");
		
		// css() 
		// 添加一个具体样式  css("样式名","样式值")
		$("#remove").css("color","red");
		// 同时添加多个具体的样式名 css({"样式名":"样式值","样式名":"样式值"})
		$("#remove").css({"color":"red","font-family":"楷体","background-color":"gray"})
		
		
	</script>
	
</html>

九.操作元素的内容

html() 获取元素的html内容

html("html,内容") 设定元素的html内容

text() 获取元素的文本内容，不包含html

text("text 内容") 设置元素的文本内容，不包含html

val() 获取元素value值

val(‘值’) 设定元素的value值

<html>
	<head>
		<meta charset="UTF-8">
		<title>操作元素的内容</title>
	</head>
	<body>
		<h3><span>html()和text()方法设置元素内容</span></h3>
		<div id="html"></div>
        <div id="text"></div>
        <input type="text" name="uname" value="oop" />
        <div id="getHtml" >
        	这是一个Div
        	<span>span标签</span>
        	<p>这是P</p>
        </div>
	</body>
	<script src="js/jquery-1.9.0.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		// 设置（非表单）元素的内容
		// 包含的html标签
		$("#html").html("<h3>上海</h3>"); 
		// $("#html").html("上海");
		// 不包含html标签,只能设置纯文本
		$("#text").text("<h3>上海</h3>"); 
		$("#text").text("上海");
		
		// 设置表单元素的值
		$("input").val("Hello");
		
		// 获取元素的值
		console.log($("#getHtml").html());
		console.log($("#getHtml").text());
		
		console.log($("input").val());
		
	</script>

十.添加元素

创建元素

添加元素

prepend(content) 在被选元素内部的开头插入元素或内容，被追加的 content 参数，可以是字符、HTML 元素标记。

$(content).prependTo(selector) 把 content 元素或内容加入 selector 元素开头

append(content) 在被选元素内部的结尾插入元素或内容，被追加的 content 参数，可以是字符、HTML 元素标记。

$(content).appendTo(selector) 把 content元素或内容插入selector 元素内，默认是在尾部

before() 在元素前插入指定的元素或内容:$(selector).before(content)

after() 在元素后插入指定的元素或内容:$(selector).after(content)

<html>
	<head>
		<meta charset="UTF-8">
		<title>添加元素</title>
		<style type="text/css">
			div	{
			    margin: 10px 0px;
			}
			span{
			    color: white;
			    padding: 8px
			}
			.red{
			    background-color: red;
			}
			.blue{
			    background-color: blue;
			}
			.green{
			    background-color: green;
			}
			.pink{
			    background-color: pink;
			}
		</style>
	</head>
	<body>
		<h3>prepend()方法前追加内容</h3>
		<h3>prependTo()方法前追加内容</h3>
		<h3>append()方法后追加内容</h3>
		<h3>appendTo()方法后追加内容</h3>
		<div id="parent">
			<span class="red">男神</span>
			<span class="blue">偶像</span>
		</div>
		<div class="green" id="xxr">
            <span >小鲜肉</span>
        </div> 
	</body>
	<script src="js/jquery-1.9.0.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
		// 父元素
		var parent = $("#parent");
		// 要追加的内容 
		var span = $('<span class="pink">女神</span>');
		// 前追加 （追加的都是子元素）
		// prepend(content)
		 parent.prepend(span);
		// $(content).prependTo(selector)
		$(".blue").prependTo(parent);
		
		// 后追加（追加的都是子元素）
		var singer = '<span class="green">歌手</span>';
		// append(content)
		// parent.append(singer);
		// $(content).appendTo(selector)
		$(singer).appendTo(parent);
		
		
		// 插入同级元素
		// $(selector).before(content)
		$("#xxr").before("<div class='blue'><span>小奶狗</span></div>");
		// $(selector).after(content)
		$("#xxr").after("<div class='red'><span>老腊肉</span></div>");
		
		
	</script>

十一.删除元素

remove() 删除所选元素或指定的子元素，包括整个标签和内容一起删。

empty() 清空所选元素的内容

html>
	<head>
		<meta charset="UTF-8">
		<title>删除元素</title>
		<style type="text/css">
			span{
			    color: white;
			    padding: 8px;
			    margin: 5px;
			    float: left;
			}
			.green{
			    background-color: green;
			}
			.blue{
			    background-color: blue;
			}
		</style>
	</head>
	<body>
		<h3>删除元素</h3>
		<span class="green">jquery<a>删除</a></span>
        <span class="blue">javase</span>
        <span class="green">http协议</span>
        <span class="blue">servlet</span>
	</body>
	<script src="js/jquery-1.9.0.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		// remove()
		$(".green").remove();
		
		// empty()
		$(".blue").empty();
	</script>

十二.遍历元素

each()

$(selector).each(function(index,element)) :遍历元素

参数 function 为遍历时的回调函数，

index 为遍历元素的序列号，从 0 开始。

element是当前的元素，此时是dom元素。

<html>
	<head>
		<meta charset="UTF-8">
		<title>遍历元素</title>
		<style type="text/css">
			span{
			    color: white;
			    padding: 8px;
			    margin: 5px;
			    float: left;
			}
			.green{
			    background-color: green;
			}
			.blue{
			    background-color: blue;
			}
		</style>
		<script src="../js/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<h3>遍历元素 each()</h3>
		<span class="green">jquery</span>
        <span class="green">javase</span>
        <span class="green">http协议</span>
        <span class="green">servlet</span>
    </body>
	<script src="js/jquery-1.9.0.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
		
		$(".green").each(function(index,element){
			console.log(index);
			console.log(element);
			console.log(element.innerHTML);
			console.log($(element).html());
		});
	</script>

十三.ready事件

1.ready()加载事件

ready()类似于 onLoad()事件

ready()可以写多个，按顺序执行

$(document).ready(function(){})等价于$(function(){})

onload与ready()的区别：

1、ready()在DOM结构解析完毕后即执行

2、onload在DOM结构解析完毕，并且外部资源加载完毕后执行

<head>
		<meta charset="UTF-8">
		<title>ready事件</title>
		<script src="js/jquery-1.9.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			// js的onlooad事件
			/*window.onload = function(){
				var mydiv = $("#mydiv");
				console.log(mydiv);
			}*/
			
			// jquery的ready事件
			$(document).ready(function(){
				var mydiv = $("#mydiv");
				console.log(mydiv);
			});
			
			$(function(){
				var mydiv = $("#mydiv");
				console.log(mydiv);
			});
		</script>
	</head>
	<body>
		<div id="mydiv">这是一个DIV</div>
	</body>

十四.事件

1.确定为哪些元素绑定事件

获取元素

2.绑定什么事件（事件类型）

第一个参数：事件的类型

3.相应事件触发的，执行的操作

第二个参数：函数

<head>
		<meta charset="UTF-8">
		<title>事件</title>
	</head>
	<body>
		<!--button元素，默认是提交按钮-->
		<button type="button" id="btn">按钮</button>
		<input type="text" id="txt" value="Hello Jquery" />
	</body>
	<script src="js/jquery-1.9.0.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		
		/*绑定简单事件*/
		// js绑定事件
		/*document.getElementById("btn").onclick = function(){
			alert('这是个按钮。。。');
		};*/
		
		// bind()绑定事件
		/*$("#btn").bind("click",function(){
			alert('这是个按钮。。。');
		});*/
		
		// 直接绑定事件
		$("#btn").click(function(){
			alert('这是个按钮。。。');
		});
	
		/*绑定多个事件*/
		// 聚焦失焦事件
		// 方式一：
		$("#txt").focus(function(){
			// 聚焦时清空文本框
			$("#txt").val("");
		}).blur(function(){
			$("#txt").val("你好");
		});
		
		// 多个事件绑定一种行为
		$("#txt").bind("focus blur",function(){
			console.log("。。。");
		});
		
		$("#txt").bind("focus",function(){
			console.log("aaa");
		}).bind("blur",function(){
			console.log("bbb");
		});
		
		$("#txt").bind({
			focus:function(){
				console.log("链式编程1");
			},
			blur:function(){
				console.log("链式编程2");
			}
		});
		
	</script>

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。

上一篇：java 编译期会不会代码优化 java 编译器优化

下一篇：springboot实践难点 springboot总结

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯