在搞JQuery了，不知道转行拿到前端的offer要多久呢呢... ..
.
关于JQ对象的筛选方法
1.JQuery对象和DOM(元素)对象;创建HTML元素
//1.获取对象的方式不同
var DOMObject = document.getElementById('div');
var jQueryObject = $('#div');
//2.检测方式：只有DOM对象才有nodeType属性，jquery对象才有jquery
console.log(DOMObject.nodeType); //1
console.log(jQueryObject.jquery); //返回版本号1.12.4
//3.转换：
console.log($(DOMObject));//注意***不能带分号***
console.log(jQueryObject.get(0));
//4.创建HTML元素(创建一个j)
var link1 = $('<a href="http://www.baidu.com">百度</a>').attr({
fontSize : 20,
target : '_blank'
});
link1.appendTo('body');//添加在body后面
console.log(link1);2.元素的提取:
<body>
<div id="div"></div>
<li class="item.1">1</li>
<li class="item.2">2</li>
<li class="item.3">3</li>
<li class="item.4">4</li>
<li class="item.5">5</li>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script>
$(function () {
var elements = $('li');
//1.提取DOM元素.
console.log(elements[0]);//<li class="item.1">1</li>;注意:这里转换成dom元素是没有.的
console.log(elements.get(0));//<li class="item.1">1</li>
console.log(elements.get(-1));//从最后一个开始算起<li class="item.5">5</li>
console.log(elements.get());//返回意思数组
// console.log(elements.toArray());//和get()一样 用上面的就行
//2.提取Jquery元素
console.log(elements);//所有li的Jquery对象
console.log(elements.eq(0));//Jquery第一个对象
console.log(elements.first());//Jquery第一个对象
console.log(elements.eq(-1));//Jquery最后一个对象
console.log(elements.last());//Jquery最后一个对象
})
</script>
</body>3.关于父子元素的查找:
<body>
<div id="box1">
<div id="box2">
<div id="box3">啊啊
<p id="info">good</p>
<ul>
<li class="item1">1</li>
<li class="item2">2</li>
<li class="item3">3</li>
<li class="item4">4</li>
<li class="item5">5</li>
<li class="item6">6</li>
</ul>
</div>
</div>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function () {
//1.查找父元素
var element = $('#info').parents();//所有祖先元素[0]div#box3...[n]html
var element1 = $('#info').parents('#box1')//可在parents中筛选
var element2 = $('#info').parent();//查找他(单个)的父元素div.box3
var element6 = $('#info').parentsUntil('#box1');//1.1.不包括自身到box1之前(左开右开);2.不加参数和parents()方法一样
console.log(element);
console.log(element1);
console.log(element2);
console.log(element6);
//2.查找子元素
/*childern('selector')多个同级子元素的筛选 selector为空显示全部子元素*/
var element3 = $('#box3').children('p');//1.p#info;2.注意:children是直接子元素要找孙子就用find()
var element4 = $('#box3').contents();//长度为5,包括1.box3的文本;2.3.p元素和p元素文本.4.5.ul和文本
/*常用的find*/
var element5 = $('#box1').find('li');//直接定位过去前面的最好范围小点.响应快
console.log(element3);
console.log(element4);
console.log(element5);
//3.closest与parent的区别:
/*
*(1)closet('selector')一定要有sele元素
*(2)closet,从自身开始查找返回0或1,parents()返回数组,不查找自身
*/
var element7 = $('#info').closest('#info');//
//var element1 = $('#info').parents('#box1')//可在parents中筛选
console.log(element7);
})
</script>4.兄弟元素查找的方法:(body元素参考3)
<script>
$(function () {
//1.往下查找兄弟元素
console.log($('.item3').next());//item4
console.log($('.item3').nextAll());//item4,5,6
console.log($('.item3').nextUntil());//1.不加参数就到头,
console.log($('.item3').nextUntil('.item6'));//2.不包含item6
//2.往上查找兄弟元素
console.log($('.item4').prev());//item3
console.log($('.item4').prevAll());//item3,2,1
console.log($('.item4').prevUntil());//1.不加参数就到头,
console.log($('.item4').prevUntil('.item1'));//2.不包含item1
//3.siblings除自身外的兄弟姐妹
console.log($('.item2').siblings());//除了item2
})
</script>5.添加,筛选,遍历JQ元素
<script>
$(function () {
//1.添加JQ元素
console.log($('.item1').add('.item2').add('.item3'));
//2.过滤元素.not('selecter');filter('selecter')
console.log($('li').not('.item3'));//1.除去item3元素//2.不加参数不删除,显示所有元素
console.log($('li').filter('.item3'));//1.剩下item3元素//2.不加参数全部删除,没有任何元素
//not和filter(函数)可以加上function 1.this指向传进来的dom对象,将dom转换成jq元素调用方法
//注意注意:hasClass(不加点) 可以认为是本来就是检测class所以没必要加点咯.
console.log($('li').not(function (index) {
return $(this).hasClass('item3')
}));
console.log($('li').filter(function (index) {
return $(this).hasClass('item3')
}));
//3.获取子集
console.log($('li').slice(1,2));//该数字为索引值,左闭右开//得到item2;
console.log($('li').slice(-2));//从后开始计算个数//item9,item8;
//4.转换元素 map(callback) 将一个JQ对象转换成另一个JQ对象
//map() 把每个元素通过函数传递到当前匹配集合中，生成包含返回值的新的 jQuery 对象。
console.log($('div').map(function (DomElement) {
return this.id;
}));//返回的是(JQ对象)字符串数组;
//5.遍历元素each()改变JQ对象
$('div').each(function (DomElement) {
return this.title = this.id;
});
})
</script>