jquery的概念:
jquery是一个JavaScript库极大的简化了JavaScript的编程。其拥有强大的选择器支持,不仅支持css中选择器。同时也拥有其独特的选择器,同时也解决了各种浏览器的兼容问题。jquery 选择器:
a:基础选择器,
b:层级选择器,
c:属性选择器,
d:伪类选择器;
基本的基础选择器有:- id选择器 ————–$(‘#id_name’)
- 元素选择器————$(‘tag_name’)
- 类选择器—————$(‘.class_name’)
- 群组选择器————$(‘class_name1,class_name1’)
层级选择器有:
- 后代选择器————$(‘M N’)
- 子代选择器————$(‘M>N’)
- 兄弟选择器————$(‘M~N’)
- 相邻选择器————$(‘M+N’)
暂时记录这些选择器,以后再做补充。
这里先处理一些问题:
- jquery和就JavaScript的共存和混用:
首先要弄清楚的一个问题是jquery和JavaScript是可以共存的但是两者是不可以混用的:
函数的效果:父子的div,点击子div让父div的style发生改变;
<body>
<div id="box">
<div class="box1"></div>
</di>
</body>
给两个div添加样式
#box{
height: 100px;
width: 100px;
background: red;
}
.box1{
height: 50px;
width: 50px;
background: blue;
}
混用如下错误的写法:
$(document).ready(function(){
$('#box').click(function(){
$(this).style.background='blue';
})
})
很显然这种效果是不会出现的,这里有2种方法可以将上述的函数div添加效果
$(document).ready(function(){
$('#box').click(function(){
$(this).get(0).style.background='blue';
})
})
$(document).ready(function(){
$('#box').click(function(){
$(this).css('background','blue');
})
})
第一中方法的get(0)是将jquery中获取dom节点变成了原生的就javascript的方法;第二种方法是基本的jquery的方法;
outWidth()和offsetWidth()方法
思考: 获取有个div的宽度用什么方法:
当然还有一种方法,
<div id="box">
<div class="box1"</div>
</div>
#box{
height: 100px;
width: 100px;
background: red;
padding:5px;
}
$(document).ready(function(){
alert($('#box').css('width'));
alert($('#box').outerWidth());
alert($('#box').innerWidth());
})
alert出的值分别是100px 110 和110
text()和html()的区别是;
<p>hello</p>
<p>word</p>
alert($('p').text();
alert($('p').html();
同样都是输出p标签里的内容;
alert($('p').text('<h1>hello</h1>'));
输出
alert($('p').html('<h1>hello</h1>'));
输出
hello
remove()和detach()方法的区别
同样是删除一个元素那么他们有什么区别呢。这边就是简单的一下介绍,两种情况:
思路:如果是一个没有添加方法元素块,那么remove()和detach()就都可以,如果有一个添加方法的的块元素,删除后又添加,如果用remove()添加后其之前的方法就不可以用了,如果是用detach()方法删除后在添加后之前的方法还是可以用的,只不过块元素的位置可能发生变化;
择父级元素;
$('.box1').parent().css('background','green');
选择父级及以上元素;
$('.box1').parents('#box').css('background','green');
选择靠近自己的父级元素,必须传参;
$('.box1').closest('#box').css('background','red');
选择同级的兄弟节点。传参表示筛选;
$('.one').siblings('.two') .css('background','red');
next() 不能传參;nextAll()可以传參选择的
$('.two').next().css('background','yellow');
$('.two').nextAll('.a').css('background','yellow');
可以不传參表示到最后,传參则表示在传參的之前
$('.one').nextUntil('.b').css('background','blue');
filter()和not()方法的作用是相反的
$('ulli').css('background','green').filter('.a').css('background','red'); $('ulli').css('background','green').not('.a').css('background','red');
单独装箱,每个节点都会打包
$('span').wrap('<div>')
可以多个相同的标签装箱;选中所有节点,集体打包 ;若果其中出现不一致的标签,其他标签会被剔除来;
$('span').wrapAll('<div>');
body 是不肯能拆的,只能拆其父元素;、
$('span').unwrap();
$('span').unwrap('<body>');