1. 使用前准备：
<script src="jquery-3.3.1.min.js></script> 引包
在jq中$("#box")就是选中id为box的部分
三种获取值的方法：
jq对象.attr('class'); 但是获取不到checked的值，对于HTML元素我们自己自定义的DOM属性，
jq对象.prop(''),保险安全，处理HTML元素本身就带有的固有属性
jq对象.val()，主要用于获取表单中value
2.选择器
基本选择器
$('标签名') 标签选择器
$('#id名') id选择器
$('.class名') 类选择器
层次选择器
$('A B') 获得A元素内部的所有子元素B
$('A > B') 获得A元素内部的第一层所有子元素B
$('A + B') 获得A元素同级下一个B元素
$('A ~ B') 获得A元素后面的所有同级B元素
属性选择器
$('A[属性名]') 获得有属性名的A元素
$('A[属性名=值]') 获得属性名 等于 值的A元素
$('A[属性名!=值]') 获得属性名 不等于 值的A元素
$('A[属性名^=值]') 获得属性名 以值开头 的A元素
$('A[属性名$=值]') 获得属性名 以值结尾 的A元素
$('A[属性名*=值]') 获得属性名 含有值 的A元素
$('A[属性名!=值][属性名^=值]') 复合属性选择器，多个属性同时过滤
基本过滤选择器
$('A:first') 过滤出第一个
$('A:last') 过滤出最后一个
$('A:not(选择器)') 排除指定的元素
$('A:eq()') 按索引值过滤
$('A:gt()') 过滤大于指定索引值 从0开始 greater then
$('A:lt()') 过滤小于指定索引值 less then
$('A:even') 过滤索引值为偶数 从0开始
$('A:odd') 过滤索引值为奇数
$(':header') 过滤所有的标题标签 h1-h6
$(':animated') 过滤正在执行动画的标签对象
表单属性选择器
$('xxxx:enabled') 选择可用的input标签
$('xxxx:disabled') 选择不可用的input标签
$('xxxx:checked') 选择选中的radio或者checkbox
$('xxxx:selected') 选择选中的<select>
筛选选择器
jq对象.parent() 当前元素的亲生父级元素
jq对象.parents() 当前元素的所有父级元素
jq对象.siblings() 最牛的筛选选择器，可以选出除了自己以外的所有同级元素
jq对象.children() 当前元素的第一层子元素
jq对象.find() 当前元素的指定子级元素
3. js与jq用法对比
1. 入口函数：
js：window.οnlοad=function(...){}
jq：$(document).ready(function(){...});
$(function(){...});
2. 事件：
js：js对象.onclick = function(){...}
jq：jquery对象.click(function(){...})
注意：jq中的事件类型统一不要加on
3. 对象互转
js对象转换成jq对象：$(js对象)
jq对象转换成js对象：jq对象[索引] 或 jq对象.get(索引)
4. 控制css
var box = document.getElementById("box");
box.style.width = "100px";
box.style.height = "100px";
box.style.backgroundColor = "pink";
$("#box").css({
width: "100px",
height: "100px",
backgroundColor: "skyblue"
});
5.控制标签属性
var box = document.getElementById("box");
box.className = "bbb";
box.title = "这里什么都没有";
$("#box").attr("class", "aaa");
$("#box").attr("title", "这里什么都没有");
6. val()函数
var text = document.getElementById("text");
value = $("#text").val();
7. 控制标签内容
<div id="box"></div>
js：document.getElementById("box").innerHTML = "<h1>你好, JS.</h1>";
jq：$("#box").html("<h1>你好, 世界!</h1>");
4. jq动画效果
1.对角线动画
显示：show() 隐藏：hide() 对角线动画：toggle()
2.滑动动画
slideDown() slideUp() slideToggle()
3.淡入淡出动画
fadeIn() fadeOut() fadeToggle()
4.透明度动画
fadeTo(时间,透明度) 透明度取值0-1
案例
只有勾选上同意协议才能点击提交，否则是不可选状态
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*input 标签中包含 submit 的类名*/
input.submit {
background: #69b946;
display: inline-block;
height: 52px;
width: 306px;
text-align: center;
cursor: pointer;
font: 22px/52px "微软雅黑";
color: #fff;
border-radius: 3px;
border-style: solid;
border-width: 1px;
border-color: transparent;
}
input.disabled {
background: #f4f9fd;
color: #888;
cursor: default;
border-color: #d0dae3;
cursor: default;
outline: none;
}
</style>
</head>
<body>
<form action="https://www.baidu.com">
<input id="kuang" type="checkbox" />
<label for="kuang">同意"服务条款"和"用户须知"、"隐私权相关政策"</label>
<br />
<br />
<input type="submit" disabled="disabled" class="submit disabled" id="btn" />
</form>
</body>
</html>
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
$(function () {
// 1. 获取 `选项框`, 并绑定单击事件
$("#kuang").click(function () {
// 2. 获取 `选项框` 的状态
// var checked = $("#kuang").attr("checked"); 行不通
var checked = $("#kuang").prop("checked");
// alert("checked = " + checked);
// 3. 判断
if (checked == true) {
// 修改 btn 提交按钮的 `属性值`
$("#btn").attr({
"disabled" : false,
class: "submit"
});
} else {
$("#btn").attr({
"disabled" : true,
class: "submit disabled"
});
}
});
})
</script>
左右选择
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body {
font-family: Courier;
font-size: 12px;
margin: 0px 0px 0px 0px;
overflow-x: hidden;
overflow-y: hidden;
background-color: #B8D3F4;
}
td {
font-size: 12px;
}
.td3 {
background-color: #B8D3F4;
text-align: center;
line-height: 20px;
width: 160px;
}
.tb td {
font-size: 12px;
border: 2px groove #ffffff;
}
.button {
border: 1px ridge #ffffff;
line-height: 18px;
height: 20px;
width: 45px;
padding-top: 0px;
background: #CBDAF7;
color: #000000;
font-size: 9pt;
font-family: Courier;
}
</style>
</head>
<body>
<div style="border:1px dashed #E6E6E6;margin:150px 0px 0px 450px; width:450px; height:300px; background-color:#E6E6E6;">
<table width="385" height="169" border="0" align="left" cellpadding="0" cellspacing="0" style="margin:15px 0px 0px 15px;">
<tr>
<td width="126">
<!--multiple="multiple" 能同时选择多个 size="10" 确定下拉选的长度-->
<select id="_left" name="first" size="10" multiple="multiple" class="td3" id="first">
<option value="选项1">选项1</option>
<option value="选项2">选项2</option>
<option value="选项3">选项3</option>
<option value="选项4">选项4</option>
<option value="选项5">选项5</option>
<option value="选项6">选项6</option>
<option value="选项7">选项7</option>
<option value="选项8">选项8</option>
</select>
</td>
<td width="89" valign="middle" align="center">
<input name="add" id="add" type="button" class="button" value="-->" />
<input name="add_all" id="add_all" type="button" class="button" value="==>" />
<input name="remove" id="remove" type="button" class="button" value="<--" />
<input name="remove_all" id="remove_all" type="button" class="button" value="<==" />
</td>
<td width="127" align="left">
<select id="_right" name="second" size="10" multiple="multiple" class="td3" id="second">
<option value="选项9">选项9</option>
</select>
</td>
</tr>
</table>
</div>
</body>
</html>
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
$(function () {
// 说明 : 获取所有的 input 标签按钮
var inputs = $("input");
// 将左侧当前选中的添加到右侧
// 1. 给第一个 input 标签按钮绑定单击事件
inputs.eq(0).click(function () {
// 2. 将左边所有选中的 option 选项框, 拼接到右边.
$("#_left option:selected").appendTo($("#_right"));
});
// 将左侧全部添加到右侧
inputs.eq(1).click(function () {
$("#_left option").appendTo($("#_right"));
});
// 将右侧当前选中的添加到左侧
inputs.eq(2).click(function () {
$("#_right option:selected").appendTo($("#_left"));
});
// 将右侧全部添加到左侧
inputs.eq(3).click(function () {
$("#_right option").appendTo($("#_left"));
});
});
</script>
60
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
