实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
// 1. attr() 方法 语法 attr(name|properties|key,value|fn)
// 1.1 单个参数的时候是返回属性值
$('img:first').attr('alt')
// 1.2两个参数是 属和值 可动态添加
$('img:first').attr('alt','刘诗诗')
$('img:first').attr('title','刘诗诗')
// 1.3 可以用fn 返回属性值的函数,第一个参数为当前元素的索引值，第二个参数为原先的属性值
$('img:first').attr('alt',function(){
return this.src
})
// 2.removeAttr()方法 移除属性操作removeAttr(name)
$('img:first').removeAttr('alt')
// 3.addClass()方法 语法addClass(class|fn)添加类样式 可以添加多个类样式
$('ul li:first').addClass('red font')
// 4.removeClass() 语法removeClass([class|fn]) 函数返回的是一个或者多个类样式
$('ul li:first').removeClass('red')
// 5.toggleClass() 自动添加类样式 如果存在则移除 不存在则添加 语法toggleClass(class|fn[,sw]) sw是布尔值 用于判断是否存在
$('ul li:first').toggleClass('red')
// 6. data() 自定义属性 在DOM中存储数据 也是带有读取和设置的功能 DOM结构中的自定义的属性可不用带data- 即可读出数据，如果是动态添加的就必须添加前缀 data-name
console.log($('img').data('name'))
$('img').data('data-text','456')
//自定义属性添加和获取的时候必须加入data- 前缀 且无法读取原生的属性 可以读取动态设置的属性
console.log($('img').data('data-text'))
// 7.removeData() 移除属性 仅仅能删除动态添加的自定义属性 原始标签的原值不变
$('img').removeData('data-text')
// 8.css() 添加内联样式 相当于DOM中的style属性 语法css(name|pro|[,val|fn]) val可以返回函数
$('ul li a').css('color','lightgreen')
//可以用json格式传入对象 也可以用链式操作传入
$('ul li a').css({
'color':'lightgreen',
'font-size':'3em',
'background-color':'orange',
})
//读取样式中的值 color返回 的是rgb（）的字符串 jq中所有返回的的都是字符串 如果是数字需要转换成数值型
console.log($('ul li a').css('color'))
console.log($('ul li a').css('font-size'))
var val = parseFloat($('img').width())
val+=50
$('img').css('width',val+'px')
// 9.width()和height()的设置方法
$('img').width(300)
$('img').height(300)
$('img').width('400px')
$('img').height('400px')
//原有的基础上+200 即 400px+200px=600px 数值支持运算符运算
$('img').width('-=200px')
$('img').height('-=200px')
// 10.offset()方法获取元素的位置返回一个对象 包含top和left 2个值(偏移量)该方法只能读取属性不能
// console.log($('img').offset().left)
// console.log($('img').offset().top)
// 11. position()方法获取元素的位置返回一个对象 包含top和left 2个值(偏移量)该方法只能读取属性不能
// console.log($('img').position().left)
// console.log($('img').position().top)
// 12.scrollLeft() 获取匹配元素相对滚动条左侧的偏移。 可对隐藏的元素有效 可以设置值
})
</script>
<style type="text/css">
*{margin: 0;padding: 0;}
img{
display: block;
margin: 250px auto;
width: 200px;
border-radius:50px ;
}
.red{
color: red;
}
.font{
font-size: 1.2em;
}
</style>
<title></title>
</head>
<body>
<div class="banner">
<img src="../js/images/1.jpg" alt="pic" data-name = "123456"/>
<!--<img src="../js/images/2.jpg"/>
<img src="../js/images/3.jpg"/>
<img src="../js/images/4.jpg"/>
<img src="../js/images/5.jpg"/>
-->
<ul>
<li>这是是li01<a href="">这是个超级链接01</a></li>
<li>这是是li02<a href="">这是个超级链接02</a></li>
<li>这是是li03<a href="">这是个超级链接03</a></li>
<li>这是是li04<a href="">这是个超级链接04</a></li>
<li>这是是li05<a href="">这是个超级链接05</a></li>
<li>这是是li06<a href="">这是个超级链接06</a></li>
<li>这是是li07<a href="">这是个超级链接07</a></li>
<li>这是是li08<a href="">这是个超级链接08</a></li>
<li>这是是li09<a href="">这是个超级链接09</a></li>
<li>这是是li10<a href="">这是个超级链接10</a></li>
</ul>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
