jQuery练习笔记

最新推荐文章于 2022-09-16 14:43:31 发布

lixu_csdn

最新推荐文章于 2022-09-16 14:43:31 发布

阅读量126

点赞数

分类专栏：学习笔记前端

本文链接：https://blog.csdn.net/lixu_csdn/article/details/89488452

版权

学习笔记同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

前端

7 篇文章 0 订阅

订阅专栏

1.jQuery 表单操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>jQuery练习页面</title>
		<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
		<style>
			.body{
				width:100%;
				height: 100%;
			}
			.main{
				width:100%;
				height: auto;
			}
			.tb01{
				width: 80%;
				height: auto;
				margin-top: 30px;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div class="main">
			<div>
				<form action="#">
					<label>输入框:</label><input type="text" placeholder="请输入" title="a1" name="n1" id="i11" value="" /><br />
					<label>单    选:</label>true<input type="radio" title="a2" name="n2" id="i21" value="0" />
					false<input type="radio" title="a2" name="n2" id="i22" value="1" /><br />
					<label>多    选:</label>item1<input type="checkbox" title="a3" name="n3" id="i31" value="" />
					item2<input type="checkbox" title="a3" name="n3" id="i32" value="" />
					item3<input type="checkbox" title="a3" name="n3" id="i33" value="" />
					<br />
					<label>下拉选项:</label><select id="select001">
						<option>请选择</option>
						<option value="v1">111</option>
						<option value="v2">222</option>
					</select>
					<br />
					<button id="btn01">按钮1</button>
				</form>
			</div>
			<div>
				<table border="1" cellspacing="0" cellpadding="0" class="tb01">
					<thead>
						<th>col1</th>
						<th>col2</th>
						<th>col3</th>
					</thead>
					<tbody>
						<tr>
							<td>value1-1</td>
							<td>value1-2</td>
							<td>value1-3</td>
						</tr>
						<tr>
							<td>value2-1</td>
							<td>value2-2</td>
							<td>value2-3</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
	</body>
</html>
<script>
	$(function(){
		//设置指定索引的单选框选中
		$('input:radio').eq(1).attr('checked', 'true');
	})
	//按钮绑定点击事件
	$('#btn01').click(function(){
		console.log('点击事件');	
		//遍历元素内容
	  	$(".tb01 td").each(function(){
	  		console.log($(this).text());
	  	});		
	})
	//输入框绑定失去焦点事件
	$('#i11').blur(function(){
		console.log('失去焦点事件');
	})
	//输入框绑定键入事件
	$('#i11').keyup(function(){
		console.log($(this).val());
	})
	//下拉框绑定改变事件
	$('#select001').change(function(){
		//获取下拉选择的value值和文本
		console.log($(this).val()+$(this).find("option:selected").text());
	})
	//普通方法调用，ajax请求模板
	function reqFunction(){
		$.ajax({
		    url:'',
		    type:'POST', //GET
		    async:true,    //或false,是否异步
		    data:{
		        name:'llc',
		        age:22
		    },
		    timeout:5000,    //超时时间
		    dataType:'json',    //返回的数据格式：json/xml/html/script/jsonp/text
		    beforeSend:function(xhr){
		        console.log(xhr)
		        console.log('发送前')
		    },
		    success:function(data,textStatus,jqXHR){
		        console.log(data)；
		    },
		    error:function(xhr,textStatus){
		        console.log('错误'，xhr.responseText)；
		        console.log(xhr)；
		        console.log(textStatus)；
		    }
		})    
	}
</script>

2.jQuery元素常用操作

//元素获取
$("#demo").parent(); // 父节点
$("#demo").children(); // 全部子节点
$("#demo").prev();  // 上一个兄弟节点
$("#demo").next(); // 下一个兄弟节点
//元素移动
var a= $('#aId');//a元素
var b= $('#bId');//b元素
a.before(b);
a.after(b);

3.jQuery根据name属性查找，原文（https://www.cnblogs.com/jihua/archive/2013/10/18/jqueryname.html）

//在id为test1的元素中找到所有name属性以demo开头的元素并遍历
$("#test1").find("[name^='demo']").each(function () {
    var nameValue = $(this).attr("name");//获取到每一个具体的name属性值
});
//知识补充
$("input[name='demo']"); //选择所有的name属性等于'demo'的input元素 
$("input[name!='demo']"); //选择所有的name属性不等于'demo'的input元素 
$("input[name^='demo']");// 选择所有的name属性以'demo'开头的input元素 
$("input[name$='demo']"); //选择所有的name属性以'demo'结尾的input元素 
$("input[name*='demo']"); //选择所有的name属性包含'demo'的input元素

4.未完待续，，，，，