一、CSS
- css（‘color’）获取样式值
- css('font-size','3em') 设置样式值
- .css({
'text-align': 'center',
'line-height': '200px'
}) 设置样式值 - offset() 获取相对于窗口的top和left值
- position() 获取相对于父级的top和left值
- scrollTop() 获取滚动的值
- scrollTop(300) 设置滚动的值
- scrollLeft() 获取滚动的值
- scrollLeft(500) 设置滚动的值
- width() 获取宽度
- height() 获取高度
// 获取样式值，获取的是rgb颜色值
$('#div1').css('color')
// 设置样式值
$('#div1').css('font-size','3em')
// 设置多个样式值
$('#div1').css({
'text-align': 'center',
'line-height': '200px'
})
// 获取相对于窗口的top和left值
$('#div1').offset()
var x = $('#div1').offset().left
var y = $('#div1').offset().top
// 获取相对于父级的top和left值
$('#div1').position()
var t = $('#div1').position().left
var l = $('#div1').position().top
// 获取滚动的值
$('.wrap').scroll(function(){
$('.wrap').scrollTop()
$('.wrap').scrollLeft()
})
// 设置滚动的值
$('.wrap').scrollTop(300)
$('.wrap').scrollLeft(500)
// 获取宽高
$('.wrap').width()
$('.wrap').height()
html代码
二、DOM
- append(elem) 将标签插入到指定标签内
- appendTo(elem) 将标签插入到指定标签内
注意：这两种方法在方向上的区别
// 把标签插入指定标签内
$('.wrap').append('<a href="">我是一个链接</a>')
// 把标签插入指定标签内
$('<p>我是一段文字</p>').appendTo('.wrap')
- prepend() 把标签插入到指定标签的子标签的最前面
- prependTo() 把标签插入到指定标签的子标签的最前面
注意：这两种方法在方向上的区别
// 把标签插入到指定标签的子标签的最前面
$('.wrap').prepend('<p>生死契阔，与子成说；执子之手，与子偕老</p>')
// 把标签插入到指定标签的子标签的最前面
$('<p>山无棱，天地合，乃敢与君绝</p>').prependTo('.wrap')
- a.after(b) 把a插入到b的前面
- a.before(b) 把a插入到b的后面
- a.insertAfter(b)把b插入到a的前面
- a.insertBefore(b)把b插入到a的后面
注意：这几种方法在方向上的区别
// a.after(b) 把a插入到b的前面
$('#txt').after($('h1'))
// a.before(b) 把a插入到b的后面
$('#txt').before($('h1'))
// a.insertAfter(b)把b插入到a的前面
$('h1').insertAfter($('#txt'))
// a.insertBefore(b)把b插入到a的后面
$('h1').insertBefore($('#txt'))
- a.replaceWith(b) 用b替换a元素
// a.replaceWith(b) 用b替换a元素
$('em').replaceWith($('b'))
三、事件
1、 加载完毕,类似于js中的window.onload = function () {},效果如下。
onload是所有的标签flash等媒体文件加载完成之后执行；下面两种方法是只要页面结构加载完成就执行。
- $(document).ready(function() {
}); - $(function (){
});
// window.onload = function () {
// alert('欢迎使用jq')
// }
// $(document).ready(function(){
// alert('欢迎使用jq')
// });
$(function(){
alert('欢迎使用jq')
})
屏幕快照 2016-05-05 下午2.13.18.png
html代码
<style media="screen">
.box {
width: 200px;
height: 200px;
background-color: #55d123;
}
</style>
</head>
<body>
<div class="box">1</div>
</body>
2、绑定点击事件：$('#div1').on('click',function(){
});
3、删除事件：$('#div1').off();
// 鼠标点击选装30度
$('.box').on('click',function () {
$('.box').css({
transform: 'skewX(-30deg)',
})
})
// 移除点击事件
$('.box').off('click')
旋转效果
4、鼠标掠过事件：$('#div1').hover(function (){
},function (){
});
// 鼠标划入旋转360度，鼠标移出转回0度
$('.box').hover(function () {
$('.box').css({
'transform':'rotateZ(360deg)',
'transition-duration':'2s'
})
},function () {
$('.box').css('transform','rotateZ(0deg)')
})
5、绑定单击事件：$('#div1').click(function(){
});
6、绑定鼠标移动事件：$('#div1').mousemove(function(){
};
//点击改变背景和字体颜色
$('.box').click(function () {
$('.box').css({
'background-color': 'rgb(245, 32, 81)',
'color': '#fff'
})
})
// 鼠标移动字体放大
$('.box').mousemove(function(){
$('.box').css('font-size','5em')
})
鼠标移动并点点击后的效果
四、效果
- show() 显示；
- hide() 隐藏；
// 隐藏
$('.box').hide()
// 点击显示
$(document).click(function () {
$('.box').show()
})
- toggle() 显示或隐藏；
// 点击显示，再次点击隐藏
$(document).click(function () {
$('.box').toggle()
})
- slideDown() 向下展开；
- slideUp() 向上收起；
// 鼠标划入收起
$('.box').hover(function () {
$('.box').slideUp()
})
// 点击展开
$(document).click(function () {
$('.box').slideDown()
})
- slideToggle() 展开或收起；
// 点击收起，再次点击展开
$(document).click(function () {
$('.box').slideToggle()
})
- fadeIn() 淡入；
- fadeOut() 淡出；
// 点击淡入
$(document).click(function () {
$('.box').fadeIn()
})
// 鼠标划入淡出
$('.box').hover(function () {
$('.box').fadeOut()
})
- fadeTo(speed,opacity,callback) 把被选元素逐渐改变至给定的不透明度；
// fadeTo()把被选元素逐渐改变至给定的不透明度
$(document).click(function () {
// speed表示过渡时间单位为毫秒，可以选值有"slow","normal","fast"，此处也可自定义一个时间如：2000
// opacity必选规定淡入或淡出时的透明度
// callback可选。fadeTo 函数执行完之后，要执行的函数。
$('.box').fadeTo(2000，0.2)
})
// 鼠标划入淡出
$('.box').hover(function () {
$('.box').fadeOut()
})
*注意此函数的三个参数的用法：
1、speed表示过渡时间单位为毫秒，可以选值有"slow","normal","fast"， 此处也可自定义一个时间如：2000。
2、opacity必选规定淡入或淡出时的透明度。
3、callback可选。fadeTo 函数执行完之后，要执行的函数。
- fadeToggle() 淡入或淡出；
// 点击鼠标淡出，再次点击淡入
$(document).click(function () {
$('.box').fadeToggle()
})
- animate({
left: '50px',
top: '50px'
})任意属性做动画
$(document).click(function () {
$('.box').animate({
left: '-300px',
top: '500px',
},2000)
})
参考网站
以上内容纯属个人理解，由于水平有限，若有错漏之处敬请指出斧正，小弟不胜感激。
