A jquery使用

abc0x

已于 2022-01-20 11:29:27 修改

阅读量1.2k

点赞数

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

于 2022-01-18 20:00:15 首次发布

本文链接：https://blog.csdn.net/weixin_44145887/article/details/122558848

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1.基本概念：
js的函数库 ---- jquery
jquery文件要放在所有引入的js文件的第一位。
如果需要用css文件，南无所有css文件的引入要先于js文件
在使用jquery时，首先要引入<script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script>

//css文件的引入
	<link rel="stylesheet" type="text/css" href="" />
//js文件的引入
	<link rel="text/javaScript" src="" href="" />

2.js选择器的使用—得到满足条件的标签对象
js选择器效果同于 document.getElement××

2-1. id选择器 $(“id_name”)

var v = $("#t1").val();//得到标签对象的value值
console.info(v);

2-2. class选择器 $(".class_name")

var v = $(".i1").val();
console.info(v);

2-3 标签选择器

var v = [];
v = $("input");//获得所有input标签对象
for(var i = 0; i< v.length; i++){
	console.info(a[i].val());
}

2-4 属性选择器

var v = $("input[type = password]").val();
//获取所有type属性值等于password的input标签对象

2-5层次选择器
1）后代选择器 $(“M N”) ---- 获取所有M标签的所有后代标签N

var content = $("div p").text();
//获取所有div标签的子标签p标签

2）子代选择器 $(“M > N”) -----获取所有M标签内部的第一级子代标签

var content = $("div > p").text();

3）兄弟选择器： $(“M ~ N”) ----获取所有M元素后面的所有同级 N 标签

var arr = [];
arr = $("div~input");
for(var i = 0; i< v.length; i++){
	console.info(arr[i].val());
}

4）相邻选择器$(“M+N”)—选择M元素相邻的下一个元素N，且M元素与N元素平级

var v = $("div + input");
console.info(v.val());

3.js 伪类选择器
3-1.简单伪类选择器
1）：first获取标签的第一个对象
2）：last获取某标签的最后一个元素

var arr = [];
arr = $("input:first").val();
arr = $("input:last").val();

3）：odd获取某元素索引值（下标）为奇数的标签元素
4）：even获取某元素索引值（下标）为偶数的标签元素

var arr = [];
arr = $("input:odd");
//arr = $("input:even");
for(var i = 0; i <arr.length; i++){
    console.info(arr[i].val());
}

5）：eq(index) 获取给定索引值（下标）的元素，索引值index是一个整数，从0开始

var arr = $("input:eq(2)");
console(arr.val());

3-2 子元素伪类选择器
：first-child 选择父元素的第一个子元素，不区分元素类型

var arr = [];
//选择p标签的父标签的第一个子元素
arr = $("p:first-child");
console.info(arr);

3-3 可见性伪类选择器
1）：hidden 选择所有不可见的伪类元素(通过在标签中设置style=" dispaly:none; " 隐藏标签)
2）：visble 选择所有可见的伪类元素

<script type="" src=""></script>
<script>
function test(){
var arr = [];
arr = $("input:hidden");
for(var i = 0; i <arr.length; i++){
  console.info(arr[i].value);
}
}
</script>
<body>
<input type="hidden" value="h1" id="aspan">
<input type="button" value="测试" onclick="test()">
</body>

3-5 表单伪类选择器
1）：input 获得所有的input元素，包括隐藏的元素
2）：button 选择所有的普通标签，即type="button"的标签元素或者button标签
3）：submit 选择所有的提交按钮
4）： reset 选择所有的重置按钮
5）：text：选择所有单行文本框，即type=“text”
6）：textarea 选择所有多行文本框
7）：password 选择所有密码框
8）：radio 选择所有单选按钮
9）：checkbox 选择所有复选框
10）：image 获取所有图像域（image设置图像提交，点击图像后，前端可以知道图像路径，如果点击提交信息，图片也会被提交）
11）： hidden 选择所有隐藏域
12）：file 选择所有文件域

var arr = [];
arr = $(":input");
//arr = $(":button");
//arr = $(":submit");
//arr = $(":reset");
//arr = $(":textarea");
//arr = $(":hidden");
<body>
<input type="text" value="a" id="i1" >
<input type="">
<input type="checkbox" value="b" name="city">上海
<input type="checkbox" value="c" name="city">北京
<input type="checkbox" value="d" name="city">广东
<input type="button" value="测试1" onclick="test()">
<button value="123" onclick="test()">测试2</button>
<input type="submit" value="提交按钮" >
<input type="reset" value="重置" onclick="test()" />
<textarea rows="3" cols="30" value="文本框"></textarea>
//单选框  若想要单选框只能取唯一值，要求name值必须相同
<input type="radio" name="x" value="1" />1
<input type="radio" name="x" value="2" />2
<input type="radio" name="x"  value="3" />3
//复选框   若想要复选框同时取，要求name值相同
 <input type="checkbox" name="city" value="四川"/>四川
<input type="checkbox" name="city" value="上海"/>上海
<input type="checkbox" name="city" value="浙江"/>浙江
//隐藏域
<input type="hidden" value="秘密" id="s1" />
//文件域
<input type="file" value="文件" id="f1" />
//图像域
<input type="image" id="img1" value="123" src="../img/girl.jpeg" height="50px" width="50px"/>
</body>

3-6 表单属性伪类选择器
1）：checked 选择所有被选中的表单元素，一般用于radio或者checkbox.
2）：option:selected 选择所有被选中的option元素
3）：enabled 选择所有可用的元素，一般用于input、selected、testarea
4）：disable 选择所有不可用的元素，一般用于input、selected、testarea
5）：read-only 选择所有只读元素一般用于input或者textarea
6）：focus 选择获得焦点的元素

var arr = [];
//返回被选中的复选框标签元素
// arr = $(":checkbox:checked");
//返回所有被选中的下拉框标签元素
// arr = $("option:selected");

 for(var i = 0; i < arr.length; i++ ){
 	console.info(arr[i].val());
}

//焦点---当标签元素获得焦点时，value值为空，即文本框清空
<input type="text" value="文本框" onfocus="this.value='' " />
//标签可用----所有非disabled的即为可用元素---$("input:enabled")
<input type="text" value="可用"  />
//标签不可用----$("input:disabled")
<input type="text" value="不可用" disabled="disabled" />
//标签只读---$("input:read-only")
<input type="text" value="只读" readonly="readonly" />

jquery获取（查询）、设置（修改）标签属性

4.1 attr() 和prop()
1）attr() 常规标签属性操作方法
attr(“属性名”) ---- 获取指定属性值，如果没有该属性则返回undefined
attr(“属性名”,“属性值”) ---- 添加或更改属性值

<script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script>
		<script>
			function test() {
				var a = $("#p1").attr("color");
				console.info(a);//undefined
				$("#i1").attr("value", "1");
				console.info($("#i1").val());//1
				}
		</script>
<body>
		<input type="text" id="i1" />
		<div style="border: 1px solid black">
			<p id="p1" align="center">hello</p>
		</div>
		<button onclick="test();">按钮</button>
		
	</body>

2）prop()表单属性操作方法
prop(“属性名”) — 获取属性值
prop(“属性名”, “属性值”) — 表单元素属性赋值

var v = $("#i1").prop("value");
console.info(v);//hello
var v = $("#i1").prop("value","你好");
console.info(v.val());//你好

<body>
		<input type="text" id="i1" value="hello"/>
		<div style="border: 1px solid black">
			<p id="p1" align="center">hello</p>
		</div>
		<button onclick="test();">按钮</button>
	</body>

4.2 css 样式属性修改 — style里面的属性
1）添加class属性值

<style>
      .p_class{
      font-size:24px,
      color: #8A2BE2;
      }
      .p_class2{
      background-color: #B8860B;
      }
</style>
//给该标签添加一个class属性值,id值为p1的标签
$("#p1").addClass("p_class");
//给该标签添加多个class属性值，不同属性值之间用空格隔开
$("#p1").addClass("p_class1 p_class2");

2）删除class属性值

$("#p1").removeClass("p_class2");

3）获取（查找）class属性值

var v = $("div").css("border");
console.info(v);//1px
<div style="border: 1px solid black">
	<p id="p1" align="center">hello</p>
</div>

4）设置（修改）css样式属性

//修改一个css样式属性
$("div").css("width","50%");
//设置多个css样式的属性值
$("div").css({
	"width":"50%",
	"background-color":"#B8860B",
	"height":"100px"
});
});

4.3 标签文本操作
1）获取查询标签文本内容

<p id="p1" align="center">hello</p>

var tx = $("p").text();
console.info(tx);//hello
var ht = $("p").html();
console.info(ht);//hello

2）设置标签文本内容

$("p").text("你好大哥！！");
console.info($("p").text());

3）追加标签内容

var c = $("p").text();
$("p").text(c+"要追加的内容")；
console.info($("p").text());
//效果同
var c = $("p").html();
$("p").html(c+"html追加内容");

4.4 DOM操作生成标签元素

$("<p>hello world</p>");

4.5插入标签元素
1）在内部尾部插入 ---- append

var ele = $("<p>hello world</p>");
$("div").append(ele);
//$("#d1").append(ele);
<div style="border: 1px solid antiquewhite;" id="d1">

2）在内部头部插入 — prepend

var ele = $("<p>hello world</p>");
$("div").prepend(ele);
//$("#d1").prepend(ele);
<div style="border: 1px solid antiquewhite;" id="d1">

3）在外部头部、尾部插入 — insertBefore、insertAfter

var ele=$(<p>hello world</p>);
ele.insertBefore("#d1");//头部
ele.insertAfter("#d1");//尾部

4.6 删除元素
1）删除全部子元素（没有删除自己）— empty

$("#d1").empty();

2)删除指定元素及其子元素 —remove

$("div").remove();

4.7 遍历元素—each

//index是下标索引，一定从0开始
//item相当于数组中的arr[index],即结果中的每一个结果
$("input").each(function(item,index){
     console.info($item.val());//打印输入的姓名、年龄、密码
});
//注意：val()是jquery的方法，value是js的属性

<input type="text" placeholder="请输入姓名"/>
<input type="text" placeholder="请输入年龄" />
<input type="password" placeholder="请输入密码" />

var arr = [];
arr = ["a","b","c"];
$.each(arr,function(item,index){//item是数组中的元素对象
	  console.info(index+":"+item);//0:a  1:b  2:c
});

jquery事件：ready和onload
1）ready：执行顺序先于onload
当DOM（document）对象载入就绪后可以加载。
操作时需要绑定一个要执行的函数，加大提高了web应用程序的响应速度

ready中绑定、解绑事件示例：

$(document).ready(function(){
alert("123");//可以观察到，弹窗是先于标签等元素加载的 
console.info(1);
//在ready中，通过on给标签绑定事件，相当于js的<button οnclick="function();">
$("button").on("click",function(){//this表示当前标签（即正在绑事件的button标签）
$(this).css({"color":"red",
             "font-size":"26px"});
});
});
//解绑事件
function closeon(){
$("button").off("click");
}

//注意，alter方法提供弹窗，在关闭弹窗后，会刷新页面。
//如果把alter应用在ready或onload事件中，会导致不断弹出alter弹窗的现象
<button>按钮</button>
<button onclick="closeon();">解绑事件</button>

2）window.onload：是js中的方法
onload是会优先加载，但是是在所有的标签、图片等元素全部加载完后才会执行
速度相对慢于ready

window.onload=function(){
};

6.jquery动画效果
都有（ fast、normal、slow、具体数值、不设值）四种速度效果
6.1 显示与隐藏：show()与hide()
toggle()：显示被隐藏的元素，隐藏显示的元素。在show和hide两种效果中切换

$("#d1").show("fast");
$("#d1").hide("normal");
$("#d1").toggle(5000);
$("#d1").toggle();

6.2 淡入与淡出：fadeIn()与fadeOut()

$("#d1").fadeIn();
$("#d1").fadeOut("slow");

6.3 上滑（消失）与下滑（出现）slideUp()与slideDown()

$("#d1").slideUp();
$("#d1").slideDown();

6.4 自定义动画：$(selector).animate( {params}, speed, callback )
必需：params参数定义形成动画的css样式属性
可选：speed参数规定动画执行时长：有slow、fast、毫秒这些取值
可选：callback参数规定动画完成之后执行的函数名称

//动画---动态改变$(#d1)标签的css样式
//把该标签从当前状态变成最后宽260px，高260px，距离左侧260px
$("#d1").animate(
{width:'260px',
height:'260px',
left:'260px'
},
3000,
function(){
   alert("动画执行完毕");
});

6.5 分步动画

$("#d1").animate({left,'260px'});
$("#d1").animate({width,'260px'});
$("#d1").animate({height,'260px'});

6.6 停止动画 stop()

//把停止动画放到点击button按钮中，再绑定ready事件
$(document).ready(function(){
   $("button").on("click",function(){
          $("#d1").stop();//停止动画
   });
})

from 表单标签
7.1表单标签序列化
java序列化：把一个对象转化成字节流，存到文件里去
java反序列化：把一个字节文件转化成一个对象

form序列化：将表单元素按照name-value属性值配对，以name=v&name=v的形式返回

$("form").serializeArray();
$.each($("form").serializeArray(),function(index){
	var k = this['name'];
	if(obj[k]){
		obj[k] +=";" +this['value'];
	}else{
		obj[k] = this['value'];
	}
});

7.2 form标签属性值
1）action 指明form表单中的内容，要提交给的后台url地址
格式： [ip]:[port]/[server_name]/[function_name]
2） method 指明 http请求发送方式。
有：GET、POST、PUT、DELETE等方式
3） enctype 规定在发送表单数据之前，如何对数据进行编码。
若 = application/x-www-form-urlencode（传递字符串）
在发送前编码所有字符，空格转化为+号，特殊符号转化为ASCII hex值。
若= multipart/form-date（传递文件）
不对字符进行编码，在使用包含文件上传控件的表单时，必须使用该值。
若 = text/plain
空格转化为+号，但不对特殊字符编码。