核心重点：$符号是jquery的一个对象，jQ中所有的方法和属性都添加在这个对象中，$等价于jquery。
onload事件和ready的区别:
执行时机：onload事件时必须等页面完全加载完毕后才能执行，ready是当页面的节点加载完毕后就可以执行，比onload早一点。
添加个数：onload只能添加一个，多次添加执行最后一次覆盖掉前面的，ready事件可以添加多个，且互相之间不会覆盖。（onload事件与ready事件也不会覆盖）；
注：addEventListener的方法添加多个重复事件，不会发生覆盖的情况。
- 简化写法：onload没有简化写法，ready事件可以简写为:$(function(){})
取名规则：如果是通过jQ获取到的节点对象，需要在节点前加上$符号。通过DOM操作获取到的节点
DOM节点与jQ对象不能混用对方的属性及方法，如果想用必须先转换类型。
jQ与DOM之间的转换：
jquery==>>DOM
方法1：利用数组的下标形式获取：
var $div2 = $('#div1');
var divDom = $div2[0];
divDom.style.background = 'red';
方法2：使用get获取函数
var divDom2 = $div2.get(0);
console.log(divDom2);
DOM==>>jQuery
在DOM节点变量名外包裹上$（）；
var $divJq = $(div1);
console.log($divJq);
工具类：
<script type="text/javascript">
//工具类
console.log($.type([])); // Array
console.log($.type({})); //object
console.log($.type(new Date())); //date
</script>
遍历对象：
//遍历对象
$.each([10,20,30],function(index,value){
console.log(index,value);
});
$.each({name:"张三",age:18},function(key,value){
console.log(key,value);
});
each：
//each()方法：遍历获取到每一个节点元素
$('li').each(function(){
// console.log($(this).text());
//拼接内容
var $text = $(this).text()+'<span style="color:red">促销</span>'
$(this).html($text);
$(this).addClass('p')
})
选择器：
id ，类 ，标签
<script type="text/javascript">
//使用ID选择器
var div1 = $('#div1');
console.log(div1);
使用class选择器
var div2 = $('.div2');
console.log(div2);
使用标签选择器
var div3 = $('div');
console.log(div3);
</script>
通配符选择器，群组选择器，后代选择器
//通配符选择器
$('*').css('margin','10px');
//群组选择器
var $s =$('#div1,.p,#div2');
console.log($s);
$s.css('background','blue');
//后代选择器
$('#div1 p').css('color','yellow');
var $sum = $('#div1 p');
console.log($sum);
$sum[0].style.color = 'red';
直接子选择器，统配符选择器和子选择器的配合；
//直接子选择器
var ps2 = $('section > p');
console.log(ps2);
//通配符选择器与子选择器的配合使用
var $ps = $('#div > *');
console,log($ps);
//找到id为div下的所有子元素
jQuery高级选择器：
/*
find() $(".container".find('h2')); 查找子集中的h2
children() $('article').childred(); 获取直接所有子元素
parent() $('header').parent(); 获取直接父级元素
parents() $('header').parents(); 获取所有父级元素，直到html标签位置
next() $('header').next(); 获取下一个兄弟元素
nextAll() $('header').nextAll(); 获取下面所有兄弟元素
prev() $('header').prev(); 获取上一个兄弟元素
prevAll() $('header').prevAll(); 获取上面所有兄弟元素
siblings() $('header').siblings(); 获取所有兄弟元素
*/
详解：
<script type="text/javascript">
$(document).ready(function(){
//后代选择器及find（）
//find():是jquery对象的方法 必须有参数，否则无法返回对应的后代标签。后代选择器
$('p span').css('color','red');
$('p').find('span').css('background','blueviolet');
var $span = $('p').find('span');
console.log($span);
//子选择器
var $two = $('#div1>.div2');
console.log($two);
//全部的子标签
var $c = $('#div1').children();
console.log($c);
var $d = $('#div1').children('.div8');
console.log($d);
//children 如果没有参数则获取的是该标签的所有子元素，如果有参数 则获取该参数，如果参数不存在则返回空；
var $n = $('.div22+div')
console.log($n);
//next选择器（兄弟选择器）：选中指定标签后的另一个兄弟标签，如果不是
var $nn = $('.div22').next();
console.log($nn);
//next方法：选中某个标签后的紧邻的另一个标签，这个方法参数可以为空，选中的是跟在他后面的标签。
//如果参数不为空，当标签后跟有指定的标签，则返回这个标签，如果不是指定的标签则返回空。
//nextAll（~） 选择器:如果指定标签后跟有并不是指定的标签，则会把不是指定的标签排除，寻找想要的标签。
var $d1 = $('.div222 ~ div');
console.log($d1);
var $d2 = $('.div222').nextAll();
console.log($d2);
//nextAll（） ：如果没有参数，则获取到当前指定标签后的所有的标签，如果有参数则获取指定的标签。排除不相关的标签
//prev
var $b = $('#div3').prev('div');
console.log($b);
//prev():当方法没有参数的时候 获取的是当前标签的前一个标签，如果有参数，当参数是当前元素的前一个元素，则返回参数对应的标签，如果参数不是当前元素的前一个标签则返回空；
//prevAll（）如果没有参数，则获取到当前指定标签前的所有兄弟的标签，如果有参数则获取指定的兄弟标签。排除不相关的标签
var $All = $('#div3').prevAll('a');
var one = $All[2];
console.log($All);
console.log(one);
var $ss = $('#div3').siblings("a");
console.log($ss);
//siblings（）；如果没有参数，则获取到的是与指定标签同级的所有兄弟标签。如果有参数，则获取到指定标签的所有兄弟参数标签。
});
</script>
属性选择器:
<script type="text/javascript">
$(document).ready(function(){
//属性选择器
//得到id属性的所有标签
var one = $('[id]');
console.log(one);
//得到id为div的标签
var two = $('[id=div]')
console.log(two);
//不等于某个属性 ， 得到的是出不等于的标签以外的所有的标签
var three = $('[id!=div]')
console.log(three);
//以d开头的所有标签
var four = $('[id^=d]')
console.log(four);
//以div为结尾的所有标签
var five = $('[id$=div]');
console.log(five);
})
</script>
过滤选择器：
<script type="text/javascript">
$(document).ready(function(){
//得到第一个元素和最后一个元素
// var $first = $('*:first'); //html
// var $first = $('#div1:last'); //无论是first还是last 都是本身 因为 寻找的必须是 标签元素不能是id或者class
var $first = $('#div1 div:first'); // class为d1 的div
var $last = $('#div1 div:last'); // class 为d4的div
console.log($first);
console.log($last);
//得到偶数和奇数
var $even = $('*:even'); //全部标签排序（包括子标签及父标签一起）下标为偶数的。从0开始
var $odd = $('*:odd'); //下标为奇数
console.log($even);
console.log($odd);
//反选 not（）
// var $not = $(':not(#div1.d2)'); //选取除了#div1.d2以外的所有标签
var $not = $('div:not(#div1.d2)');// 在div中获取除了#div1.d2以外的所有标签；
console.log($not);
//eq ，gt,lt ,header n代表下标数字
var $eq = $('*:eq(n)'); //*(可改变 指定范围)从html开始获取下标为n的标签 n可以使负数 倒数第n个
console.log($eq);
var $gt = $('*:gt(n)');//*（可改变 指定范围）从html开始会下标为n以后所有的标签（父元素及子元素）
console.log($gt);
var $lt = $("*:lt(n)"); //*（可改变 指定范围）指的是下标为n上面所有的标签
console.log($lt);
var $head = $('*:header');//*（可改变 指定范围）获取*所有的h标签
console.log($head);
//nth-child
var $one = $('#div1 div:nth-child(3)'); // 获取指定下标的元素 下标从1开始；
console.log($one);
var $oneo = $(':nth-child(1)'); //所有父元素中的第一个子元素。。。。。
console.log($oneo);
var $two = $(" :nth-child(2n)"); // 从head开始获取下标为2的倍数的标签
console.log($two);
var $three = $('*:nth-child(even)');//从head开始获取下标为偶数的标签
console.log($three);
var $four = $(':nth-child(odd)'); // 从head开始获取下标为奇数的标签
console.log($four);
})
</script>
内容选择器，可见选择器，表单选择器，nth-child，
/*
$('div:eq(1)');//下标为1的div，下标从0开始，可以写负数，负数为倒数第N个
$('div:eq(-1)');
//内容选择器
$('div:contains("big")'); //找到内容中带有big的标签
//可见性选择器
$(div:visible); //找到可见的div
$('div:hidden'); //找到隐藏的div (dis play:none/hidden='hidden')
//表单选择器
$(':input'); 获取所有的Input
$(':text'); 获取所有输入框
//子元素选择器
$("ul li:first-child"); 获取第一个li
$('ul li:last-child'); 获取最后一个li
$('ul li:nth-child(2n+1)'); 获取第2n+1个 可以填写(n,even , 2n+1,odd);奇数偶数
*/
网友评论