简介
- jQuery是javaScript的一个封装库。
学习网站
选择器
基础选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jquery示例</title>
<!-- 引入css文件 -->
<link rel="stylesheet" type="text/css" href="../css/main.css" />
<!-- 引入jquery文件 -->
<script type="text/javascript" src="../../js/jquery-1.9.1.min.js"></script>
<!-- 引入自定义js文件 -->
<script>
function test(){
// var ele = document.getElementById("t1");
// console.info(ele.value);
//1 ID选择器
// var v = $("#t1").val();
//2 class选择器
// var v = $(".i1").val();
//3 标签选择器
// var arr = [];
// arr = $("input");//获取所有input标签对象
// for (var i = 0; i < arr.length; i++) {
// console.info(arr[i].value);
// }
//4 属性选择器
//获取所有type属性=password的input标签对象
// var v = $("input[type=password]").val();
// console.info(v);
//5 层次选择器
/*
5.1 后代选择器$("M N")
选择M元素内部的所有后代元素N
*/
// var content = $("div p").text();
/*
5.2 子代选择器$("M>N")
选择M元素内部第一级的子代元素
*/
// var content = $("div>p").text();
/*
5.3 兄弟选择器$("M~N")
选择M元素后所有同级的N元素
*/
// var arr = [];
// arr = $("div~input");
// for (var i = 0; i < arr.length; i++) {
// console.info(arr[i].value);
// }
/*
5.4 相邻选择器$("M+N")
选择M元素相邻的下一个元素N(M元素与N元素平级)
*/
var arr = [];
arr = $("div+input")
for (var i = 0; i < arr.length; i++) {
console.info(arr[i].value);
}
// console.info(content);
}
</script>
</head>
<body>
<input type="text" id="t1" class="i1" placeholder="文本框1"/>
<input type="text" id="t2" placeholder="文本框2"/>
<div>
<p>第一级p标签</p>
<span>
<p>第二级p标签</p>
</span>
</div>
<input type="password" id="p1" placeholder="密码框1"/>
<input type="button" value="测试" onclick="test();"/>
</body>
</html>
伪类选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jquery伪类选择器</title>
<!-- 引入jquery文件 -->
<script type="text/javascript" src="../../js/jquery-1.9.1.min.js"></script>
<script>
/*
jquery中常见的伪类选择器有6种：
1 简单伪类选择器
2 子元素伪类选择器
3 可见性伪类选择器
4 内容伪类选择器
5 表单伪类选择器
6 表单属性伪类选择器
*/
function test(){
/*
1简单伪类选择器
:first 选择某元素的第一个元素对象
:last 选择某元素的最后一个元素对象
:odd 选择某元素的索引值为奇数的元素
:even 选择某元素的索引值为偶数的元素
:eq(index) 选择给定索引值的元素，索引值index是一个整数，从0开始
*/
// var arr = [];
// arr = $("input:eq(4)")
// for(var i = 0; i < arr.length; i++){
// console.info(arr[i].value);
// }
/*
3 可见性伪类选择器
:hidden 选取所有不可见的元素
:visible 选取所有可见元素
*/
// var arr = [];
// arr = $(":visible");
// for (var i = 0; i < arr.length; i++) {
// console.info(arr[i].id);
// }
/*
5 表单伪类选择器
:input 选择所有input元素，示例：$(":input")
:button 选择所有普通按钮，即type="button"的input元素或button元素
:submit 选择所有提交按钮
:reset 选择所有重置按钮
:text 选择所有单行文本框
:textarea 选择所有多行文本框
:password 选择所有密码框
:radio 选择所有单选按钮
:checkbox 选择所有复选框
:image 选择所有图像域
:hidden 选择所有隐藏域
:file 选择所有文件域
*/
/*
6 表单属性伪类选择器
:checked 选择所有被选中的表单元素，一般用于radio和checkbox ,示例：$(":checkbox:checked");
option:selected 选择所有被选中的option元素
:enabled 选择所有可用元素，一般用于input/select/textarea
:disabled 选择所有不可用元素，一般用于input/select/textarea
:read-only 选择所有只读元素，一般用于input/textarea
:focus 选择获得焦点的元素
*/
var arr = [];
// arr = $("input[type=text]:read-only");
arr = $(":focus");
for (var i = 0; i < arr.length; i++) {
console.info(arr[i].value);
}
}
</script>
</head>
<body>
<span id="aspan">123123</span>
<div id="d">
<input type="text" id="t1" value="a" disabled="disabled"/>
<br>
<input type="text" id="t2" value="b" readonly="readonly" />
<br>
<input type="text" id="t3" value="c" />
<br>
<input type="text" id="t4" value="d" />
<br>
<input type="text" id="t5" value="e" />
<br>
</div>
<div>
<input type="checkbox" name="city" value="1">北京
<input type="checkbox" name="city" value="2">上海
<input type="checkbox" name="city" value="3">广州
<!-- 上传文件控件 -->
<input type="file" id="file1" />
<select>
<option value="a">济南</option>
<option value="b">青岛</option>
<option value="c">曹县</option>
</select>
</div>
<input type="submit" value="提交按钮"/>
<button onclick="test();" value="123" >测试</button>
</body>
</html>
操作属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jquery操作HTML标签属性/CSS样式</title>
<style>
.p_class{
color:red;
font-size: 36px;
}
.p_class2{
background-color: #00FFFF;
}
</style>
<!-- 引入jquery文件 -->
<script type="text/javascript" src="../../js/jquery-1.9.1.min.js"></script>
<script>
function test(){
//1 获取（查）、设置（改）标签属性
//一般在jquery中，属性既能set也能get
//1.1 attr()常规标签属性操作方法
//获取指定属性值,如果没有该属性返回undefined
// var a = $("#p1").attr("color");
//添加/更改属性值
// $("#i1").attr("value","1");
//获取标签对象的value属性值
// console.info($("#i1").val());
//1.2 prop()表单属性操作方法
// var v = $("#i1").prop("value");
// console.info(v);
//表单元素属性赋值
// $("#i1").prop("value","你好");
//2 CSS样式属性修改
//添加class属性值
// $("#p1").addClass("p_class p_class2");//p.class = ?
//删除class属性值
// $("#p1").removeClass("p_class2");
//获取（查）、设置（改）CSS
// var b = $("div").css("border");
//设置CSS样式
// $("div").css("width","50%");
//设置多个CSS属性值
// $("div").css({
// "width":"50%",
// "height":"100px",
// "background-color":"orange"
// });
//3 标签文本操作
//查询标签本文内容
// var tx = $("p").text();
// console.info(tx);
// var ht = $("p").html();
// console.info(ht);
//设置标签文本内容
// var c = $("p").html();
// $("p").html(c+"123");
//4 获取、设置尺寸
// $("div").height(10);
$("div").width(600);
}
</script>
</head>
<body>
<input type="text" id="i1" value=""/>
<div style="border: 1px solid black;" >
<p id="p1" align="left">hello<br>world</p>
</div>
<button onclick="test();">按钮</button>
</body>
</html>
元素类型
- 只有元素为jquery的对象时，attr()等函数才可以用。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/jscript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/jscript">
$(document).ready(function(){
var c = $("#1");
// jquery的对象
console.info(c);
var cc = $("body div");
// 标签
console.info(cc[1])
// jquery的对象
console.info(cc.eq(1))
var ccc = document.getElementById("1")
//标签
console.info(ccc)
$.each($("body div"), function(){
//标签
console.info(this);
});
})
</script>
</head>
<body>
<div id="fa1">
<div id="1" class="kk"></div>
<div id="2"></div>
<div id='3'></div>
<div id="4"></div>
</div>
<div id="fa2">
</div>
</body>
</html>
动画效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/jscript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input[type=button]").click(function(){
$('#content').animate(
//效果
{
left: '300px',
width: '500px',
height: '500px'
},
//延时
3000,
//回调函数
function(){
location.reload()
}
);}
);
});
</script>
</head>
<body>
<!--
1.显示与隐藏
hide()、show()、toggle()
可无参（瞬变）、可传入fast、slow、normal、具体毫秒数
默认使用 上滑（消失）、下滑（出现）
-->
<input type="button" value="hide" onclick="$('#content').hide(1000);"/>
<input type="button" value="show" onclick="$('#content').show('fast')"/>
<input type="button" value="toggle" onclick="$('#content').toggle('normal')"/>
<!--
2.淡入与淡出
fadeIn()、fadeOut()
可无参（瞬变）、可传入fast、slow、normal、具体毫秒数
-->
<input type="button" value="fadeIn" onclick="$('#content').fadeIn('slow');"/>
<input type="button" value="fadeOut" onclick="$('#content').fadeOut('fast');"/>
<!--
3.滑上（消失）与滑下（出现）
slideUp()、slideDown()
可无参（瞬变）、可传入fast、slow、normal、具体毫秒数
-->
<input type="button" value="slideUp" onclick="$('#content').slideUp('fast');"/>
<input type="button" value="slideDown" onclick="$('#content').slideDown('slow');"/>
<!--
4.自定义动画
animate()
$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
-->
<input type="button" value="animate"/>
<!-- 比ready晚执行，会覆盖ready里的onclick -->
<!-- <input type="button" value="animate" οnclick="$('#content').animate(
{
left: '300px',
width: '500px',
height: '500px'
},
3000,
function(){
alert('hello');
location.reload()
}
);"/> -->
<br>
<br>
<div id="content" style="font-size: 50px; border: #00FFFF 10px solid; width: -webkit-fit-content;">
hello啊
</div>
</body>
</html>
序列化
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script>
function testt(){
//form表单序列化
/*
serialize()方法将表单元素按照 name:value属性值配对
以"name=x&value=x"的字符串形式返回
*/
console.info($("form").serialize());
/*
serializeArray()方法返回一个标签对象（含属性name、value）的数组
*/
console.info($("form").serializeArray());
//自定义输出
var objs = {}
$.each($("form").serializeArray(), function(i, tag){
//tag与this效果等同
console.info(i, tag, this)
var key = this['name'];
if(objs[key]){
objs[key] += "、" + this['value'];
}else{
objs[key] = this['value'];
}
});
console.info(objs)
}
</script>
</head>
<body>
<!--
form标签属性：
action 指明form表单中内容要提交到的后台url地址
[ip]:[port]/[server_name]/[function_name]
method 指明http请求发送方式 get/post/put/delete
enctype 指明发送前表单数据编码方式
"application/x-www-form-urlencoded"
发送前编码所有字符，空格转换为 “+” 号，特殊符号转化为ASCII hex值。
"multipart/form-data"
发送前不编码字符。表单中包含文件上传控件时，必须使用该参数。
"text/plain"
发送前编码，空格转换为 “+” 号，但特殊字符不编码。
-->
<form action="127.0.0.1:8080/demo/get" method="get" enctype="application/x-www-form-urlencoded">
<input type="text" name="userName" id="" value="" placeholder="account"/>
<input type="password" name="userPwd" id="" value="" placeholder="password"/>
<br>
<input type="radio" name="sex" id="" value="1" />男
<input type="radio" name="sex" id="" value="0" />女
<br>
<input type="checkbox" name="city" id="" value="1" />北京
<input type="checkbox" name="city" id="" value="2" />上海
<input type="checkbox" name="city" id="" value="3" />广州
<br>
<select name="eduLevel">
<option value="1">专科</option>
<option value="2">本科</option>
<option value="3">研究生</option>
</select>
<br>
<input type="button" name="btn" id="btn" value="output" onclick="testt()"/>
</form>
</body>
</html>
遍历筛选
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/jscript" src="js/jquery-1.9.1.min.js"></script>
<style type="text/css">
.fa{
border: #000000 2px solid;
width: 100px;
height: 120px;
margin: 10px;
}
div div{
border: #7FFFD4 2px solid;
width: 80px;
height: 10px;
margin: 10px;
}
</style>
<script type="text/jscript">
$(document).ready(function(){
//遍历方法返回的都是jquery的对象
//-----向上遍历 DOM 树-----
/*
parent()
返回其父标签
*/
var ele = $("#1").parent()
console.info(ele)
/*
parents()
返回其所有祖先标签
*/
var ele = $("#1").parents()
console.info(ele)
/*
parentsUntil()
返回指定祖先标签与该标签之间的标签（不包括两端）
*/
var ele = $("#1").parentsUntil("html")
console.info(ele)
//-----向下遍历 DOM 树-----
/*
children()
返回被选元素的所有直接子元素
*/
var ele = $("#fa2").children()
console.info(ele)
var ele = $("#fa2").children("*")
console.info(ele)
//可以使用可选参数来过滤对子元素的搜索
var ele = $("#fa2").children("#3")
console.info(ele)
/*
find()
返回所有后代元素,需要传入参数
*/
var ele = $("#fa2").find("*")
console.info(ele)
//过滤
var ele = $("#fa2").find("#sun")
console.info(ele)
//-----同胞遍历-----
/*
siblings()
返回被选元素的所有同胞元素
*/
var ele = $("#fa2").siblings()
console.info(ele)
//可传入参数过滤
/*
next()
返回被选元素的下一个同胞元素
*/
var ele = $("#2").next()
console.info(ele)
/*
nextAll()
返回被选元素的所有跟随的同，，胞元素
*/
var ele = $("#2").nextAll()
console.info(ele)
/*
nextUntil()
返回介于两个给定参数之间的所有跟随的同胞元素
*/
var ele = $("#1").nextUntil("#4")
console.info(ele)
/*
prev()
prevAll()
prevUntil()
向前找，和next同理
*/
//-----过滤-----
/*
first()
取第一个元素
*/
var ele = $(".fa div").first()
console.info(ele)
/*
last()
取最后一个元素
*/
var ele = $(".fa div").last()
console.info(ele)
/*
eq()
按索引号取元素
*/
var ele = $(".fa div").eq(1)
console.info(ele)
/*
filter()
过滤，返回符合参数的
*/
var ele = $(".fa div").filter("#1 div")
console.info(ele)
/*
not()
过滤，返回不符合参数的
*/
var ele = $(".fa div").not("#1")
console.info(ele)
/*
is()
判断是否存在符合条件的，返回boolean
*/
var ele = $(".fa div").is("#1 div")
console.info(ele)
var ele = $(".fa div").is("#2 div")
console.info(ele)
})
</script>
</head>
<body>
<div class="fa" id="fa1"></div>
<div class="fa" id="fa2">
<div id="1">
<div id="sun"></div>
</div>
<div id="2"></div>
<div id='3'></div>
<div id="4"></div>
</div>
<div class="fa" id="fa3"></div>
</body>
</html>
扫一扫
1597
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
