css
jQuery中元素样式的操作方式：
1． 对象.css()；
2． 类样式的方式（后面三个方法）
css()
jQuery对象.css(‘属性名’,’属性值’);
如果属性值为空，也就相当于清除这个属性
如果不写属性值，那么就相当于获取该属性的属性值，得到的是一个字符串，如果想得到的是数字，要进行转换
其中有两个方法width()和height()得到的就是数字，不是字符串，而在设置宽高的时候，可写成字符串也可写成数字，可加px也可不加px。
注意：
属性名的写法可以是DOM操作中的js写法，也可以是css中的写法；
属性值里边如果有px单位，可写可不写，在DOM中是写的
hasClass()
jQuery对象.hasClass(‘样式名’);
判断jQuery对象中是否应用了某个类样式
removeClass()
jQuery对象.removeClass(‘样式名’);
移除jQuery对象的某个样式，如果是多个类样式同时删除，括号中的引号里面同时放多个类样式，并用空格隔开。
addClass()
jQuery对象.addClass(‘样式名’);
给jQuery对象添加某个类样式，如果是多个类样式同时添加，括号中的引号里面同时放多个类样式，并用空格隔开。
toggleClass(‘类样式’)
切换类样式：如果有这个类样式就删除掉，如果没有这个类样式就添加
offset
该方法获取的是一个对象，对象中有两个属性，left和top，这两个值是left和margin-left的和，以及top和margin-top的和。
同样可以设置left和top的值：对象.offset({‘left’:200,’top’:100})
几个宽高属性
innerWidth\innerHeight div的宽高，没有边框
outerWidth\outerHeight div的宽高，包括边框
scrollTop\scrollLeft
获取元素向上、向左卷曲出去的距离，这两个是方法，需要加()
scroll
滚动条滚动事件
$(‘#div’).scroll(function(){…})
val
jQuery对象.val() 表示获取该元素的value属性值
jQuery对象.val(‘值’) 表示设置该元素的value属性的值
可以设置很多标签，比如input、textarea、radio、checkbox等
在DOM中，获取value的值通过document.getElementById(‘id’).value
当调用下拉框select标签的这个方法时，$(‘#s1’).val(5)，选中select标签中value属性是5的这个option标签
text
jQuery对象.text() 表示获取该元素的文本内容
jQuery对象.text(‘值’) 表示设置该元素的文本内容的值
相当于DOM中innerText
html
jQuery对象.html() 表示获取一个html内容
jQuery对象.html(‘<p>增加一个p标签</p>’) 表示设置一个html内容
相当于DOM中innerHtml
hide/show
元素显示和隐藏，可以在方法中传入时间，显示出渐渐的效果，宽高都变
show(参数1,参数2);
参数1：数字，毫秒
字符串 slow normal fast
参数2：回调函数，当动画执行完毕后执行该函数
动画相关方法
slideUp\slideDown\slideToggle
滑入滑出，高度变化
参数1：数字，毫秒
字符串 slow normal fast
参数2：回调函数，当动画执行完毕后执行该函数
fadeIn\fadeOut\fadeToggle
淡入淡出，透明度变化
参数1：数字，毫秒
字符串 slow normal fast
参数2：回调函数，当动画执行完毕后执行该函数
animate
参数1：json对象，表示要变化到的css属性最终变化结果
参数2：时间
参数3：回调函数，可以继续写下一个动画
stop
停止上一次的操作，有点防抖的意思
children
当前标签下的所有子标签，如果在括号内加上标签名就可以查到特定的某种子标签
mouseenter/mouseleave、mouseover/mouseout
mouseover/mouseout会有父级元素事件冒泡的发生
mouseenter/mouseleave不会有事件冒泡的发生
index
获取当前li标签的索引值
对象.index();
这个地方在导航栏中经常使用，一个div中的元素和另一个div中的元素在切换元素的时候相对应。
find
在某个对象中查找其他标签
jQuery对象.find(‘li’)
获取其他兄弟元素的几种方式
prev() 当前元素的前一个兄弟元素
prevAll() 当前元素的前面所有的兄弟元素
next() 当前元素的后一个兄弟元素
nextAll() 当前元素的后面所有的兄弟元素
parent() 当前元素的父级元素
siblings() 查找某个对象的所有兄弟标签，如果括号里面加上特定的标签名，就是查找某个对象的兄弟标签中特定的某类标签
jQuery对象.siblings(‘li’)
获取/设置自定义属性
获取：
jQuery对象.attr(‘属性名’)
设置：
jQuery对象.attr(‘属性名’,’属性值’);
注意：（对于选中属性）
如果标签选中了 那么调用attr(‘checked’) 结果是checked
如果标签没有选中 那么调用attr(‘checked’) 结果是undefined
prop
获取/设置元素的选中
对象.prop(‘属性名’,’属性值’);
一般属性值为boolean类型
一个栗子，实现全选/全不选
<div id="cheBox">
<input type="checkbox" name="className">数学
<input type="checkbox" name="className">语文
<input type="checkbox" name="className">英语
<input type="checkbox" name="className">物理
</div>
<br/>
<input type="checkbox" name="classAll" id="all">全选
$('#all').click(function () {
$('input').prop('checked', $(this).prop('checked'));
});
$('#cheBox').find('input').click(function(){
var ckLength = $('#cheBox').find('input').length;
var checkedLen = $('#cheBox :checked').length;
if(checkedLen === ckLength){
$('#all').prop('checked',true);
}else{
$('#all').prop('checked',false);
}
});
网友评论