①引入JQ
<script src="./lib/jquery-1.11.3.min.js"></script>
</head>
<body>
<input type="button" id = "btn" value="123">
<script>
// window.οnlοad= function(){
// var btn = document.getElementById('btn');
// btn.onclick = function(e){
// alert(this.value);
// }
// }
window.onload = function(){
console.log('load');
}
//jQueryzhanyong了两个全局变量 $ === jQuery //true
$(function(){
console.log('ready');
});//$是一个函数对象，jQuery构造函数
$(document).ready(function(){
console.log('ready1')
});
</script>
</body>
//执行顺序
ready
demo1.html:29 ready1
demo1.html:21 load
②JQ构造函数用法
<input type="button" id="btn" value="btn">
<script>
// window.onload = function(){
// document.getElementById('btn');
// }
// jQ
$(function () {
// 用法1.页面文档加载完成后执行
var $btn = $('#btn'); //#代表id选择器
// 函数可以接受一个回调函数，（页面加载完成后执行）
// 用法2.还可以接受一个css选择器，返回旋转为其对dom节点的jQuery包装对象
console.dir($btn);
// jq包装对象（所有选择返回的对象都是jq的包装对象，也就是一个伪数组）
var btn = $btn[0];//jq-->DOM
// DOM --> jq
var $btn2 = $(btn);
console.dir($btn2);
});
</script>
③JQ选择器
<body>
<p>我是一个短路</p>
<div class="cd">我也是div</div>
<div class="cd">我是一个div</div>
<h3 tm = "属性">标题标签</h3>
<ul class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
$(function(){
// 全部选择器，选择页面中所有标签元素
var $all = $('*');
console.dir($all)
// 类选择器
var $cd = $(".cd");
console.dir($cd);
var div1 = $cd[0];//获得dom
console.log('div1.innerHTML');
// 标签选择器和并集选择器
console.dir($('div,h3'));
// 交集选择器
console.dir($('div,cd2'));
});
// 过滤选择器和后代选择器
console.dir('list li:first');
// 包含选择器
var $div = $('div:contains("ll")');
console.log($div.text());
// var domDiv = $div[0];
// console.log(domDiv.innerHTML);
</script>
</body>
④jQ隐士迭代
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
html,body,div,table,td{
margin: 0;
padding: 0;
}
table{
/* 合并边框 */
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #ccc;
width: 400px;
}
td{
border: 1px solid #ccc;
}
</style>
<script src="./lib/jquery-1.11.3.min.js"></script>
<table>
<tr>
<td>name</td>
<td>age</td>
<td>job</td>
</tr>
<tr>
<td>liu</td>
<td>2</td>
<td>m</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
<body>
<script>
$(function(){
//dom 原始写法
// 行按照奇数行
var oddTrs = $('tr:odd');
// for(var i = 0;i<oddTrs.length;i++){
// var domTr = oddTrs[i];//拿到dom的天然标签对象
// domTr.style.backgroundColor = "#eee";
// }
//JQ提供隐士迭代的用法
//JQ设置dom的元素样式，提供了方法css（‘styleName’,'value'）
//如果传一个参数，代表获取，穿两个参数代表设置。
oddTrs.css('backgroundColor','#aaa');
//jQ:获取值只会返回一个元素的值。
//拿到所有的偶数行
$('tr:even').css('backgroundColor','#eee');
});
</script>
</body>
</html>
