jQuery
JS类库 其实就是简化Js的开发，主要是DOM的操作，JS类库会预定义一系列对象和函数，降低对JS的使用难度，兼容各个浏览器
工厂函数
主要是简化通过函数 定位页面元素，将
DOM对象包装成jQuery对象，建立页面元素
<script src="js/jquery.js"></script>
<!--引入jQuery-->
</head>
<body>
<button id="qyc">按钮</button>
<script>
var qyc = document.getElementById('qyc');
// DOM对象（返回该对象），获取页面中的按钮元素
console.log(qyc);
// var qyc = $('#qyc');
var qyc = jQuery('#qyc');
/*获取页面中按钮元素
jQuery()是jQuery的工厂函数
* 函数是jQuery的人口
* 定位页面中元素
* 另一个用法；$()=jQuery()
*/
console.log(qyc);
</script>
</body>DOM对象与jQuery对象
DOM对象和jQuery对象是可以互相转换的，是为了简化DOM的
<script src="js/jquery.js"></script>
</head>
<body>
<button id="qyc">按钮</button>
<script>
var qyc = document.getElementById('qyc');
// DOM操作()返回该对象
var $qyc = $(qyc);
console.log($qyc);
// DOM对象转换为jQuery对象-工厂函数
var qyc1 = $qyc[0];
console.log(qyc1);
// jQuery对象转换为DOM对象-jQuery对象[索引值]
var qyc2 = $qyc.get(0);
console.log(qyc2);
// jQuery对象提供了get(index)方法-index为索引值
</script>
</body>选择器
基本选择器
ID选择器 – ID匹配指定个元素
元素选择器 – 匹配所有元素名的元素
类选择器 – 匹配CSS属性名的元素
通配符选择器 – 匹配页面所有
<title>基本选择器</title>
<script src="js/jquery.js"></script>
</head>
<body>
<div id="qi">爱新觉罗</div>
<div id="q2" class="cla">呼延觉罗</div>
<script>
console.log($('#q1'));
console.log($('div'));
console.log($('.cla'));
console.log($('*'));
// 通配符选择器-匹配所有
console.log($('#d1, .cls'));
// 组合选择器-多个选择器使用逗号分隔(并集)
console.log($('#q2.cla'));
// 组合选择器-多个选择器没有分隔(交集)
</script>
</body>层级选择器
后代选择器-匹配祖先元素中后代元素
子选择器-匹配父元素中子元素
相邻兄弟选择器-匹配该元素下一个兄弟元素
普通兄弟选择器-匹配该元素后所有兄弟元素
<body>
<div id="qh">
<div id="cq">
<div id="q6"></div>
<div id="q1"></div>
<div id="q2"></div>
<div id="q4"></div>
<div id="q5"></div>
</div>
<div id="cq2">
<div id="q3"></div>
</div>
</div>
<script>
console.log('#qh div');
console.log('#qh>div');
// 指定元素的下个相邻兄弟元素
console.log('#q1~div');
// 指定元素后面所有的兄弟元素
console.log('#q1').siblings('div');
// siblings()方法-获取指定元素所有兄弟元素(前面+后面)
</script>
</body>基本过滤选择器
<script src="js/jquery.js"></script>
<style>
#qyc {
width: 100px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<h1>标题</h1>
<h2>标题</h2>
<div id="q1">
<div id="qh"></div>
</div>
<div></div>
<div></div>
<div id="animated"></div>
<script>
console.log($('div:first'));
console.log($('div:last'));
// 在指定范围匹配元素中进行筛选
console.log($('div:even'));
console.log($('div:odd'));
// 索引值为偶数时-奇数元素；索引值为奇数十-偶数元素
console.log($('div:eq(0)'));//等于
console.log($('div:gt(2)'));//大于
console.log($('div:lt(2)'));//小于
console.log(':header');
// :header-匹配h1到h6元素
function animated() {
$('animated').slideToggle(animated);
}
animated();
console.log($(':animated'));
// :animated-只匹配由jQuery实现动画
console.log($('div:not("#qh")'));
</script>
</body>内容过滤选择器
<script src="js/jquery.js"></script>
</head>
<body>
<div>div元素</div>
<div></div>
<div>
<div id="qh"></div>
</div>
<script>
console.log($('div:contains("q1")'));
console.log(('div:empty'));
console.log($('div:parent'));
console.log($('div:has("#qh")')[0]);
// :has()-表示包含匹配指定选择器元素父级元素
</script>
</body>可见性过滤选择器
<script src="js/jquery.js"></script>
<style>
#q1 {
display: none;
}
#q2 {
visibility: hidden;
}
</style>
</head>
<body>
<div id="q1">呼延觉罗</div>
<div id="q2">爱新觉罗</div>
<input type="hidden" value="用户名">
<input type="text" name="username">
<script>
/*
:hidden选择器
* 不能匹配CSS样式属性visibility设置为hidden的隐藏元素
* 还能匹配HTML页面中不做任何显示效果的元素
* 用法 - 尽量确定元素类型或指定范围
*/
console.log($(':hidden'));
/*
:visible选择器
* 匹配CSS样式属性visibility设置为hidden的隐藏元素
* 当visibility设置为hidden时的元素，依旧占有页面空间
* 还能匹配HTML页面中<html>和<body>元素
*/
console.log($(':visible'));
</script>
</body>属性过滤选择器
<script src="js/jquery.js"></script>
</head>
<body>
<div id="username" name="q1" class="mydiv"></div>
<div id="PASSWORD" name="d2" class="mycls"></div>
<div id="d1"></div>
<div class="myq"></div>
<script>
console.log($('div[name]'));
console.log($('div[class=mydiv]'));
// [attr!=value]选择器-包含没有attr属性的元素
console.log($('div[class!=mydiv]'));
console.log($('div[class^=my]'));
// 属性过滤选择器组合用法-交集
console.log($('div[name=q1][class^=my]'));
</script>
</body>子元素过滤选择器
<script src="js/jquery.js"></script>
</head>
<body>
<div id="q1">id为qi的div元素</div>
<div id="q2">id为qi的div元素</div>
<div id="q3">id为qi的div元素
<div id="qh"></div>
</div>
<script>
console.log($('div:first-child'));
// :first-child- 当前元素是否为第个子元素
console.log($('div:last-child'));
console.log(('div:nth-child'));
console.log(('div:only-child'));
// 匹配当前元素作为第index个字元素
// index是从1开始，便是第几个
</script>
</body>表单对象属性过滤选择器
<body>
<form action="#">
<input type="text" disabled>
<input type="checkbox">html
<input type="checkbox" checked>css
<select>
<option>端游</option>
<option selected>单机</option>
<option>页游</option>
</select>
</form>
<script>
console.log($('input:disabled'));
console.log($('input:checked'));
console.log($('option:selected'));
</script>
</body>