这篇续着上篇的写吧。

4：jquery样式操作
5：jquery属性操作
6：绑定click事件
7：jquery特殊效果
8：jquery链式调用
9：jquery动画
10：尺寸相关、滚动事件
11：jquery事件
12：主动触发与自定义事件
13：事件委托
14：事件冒泡
15：jquery元素节点操作
16：滚轮事件与函数节流
17：json
18：ajax与jsonp
19：本地储存
20：jqueryUI

目录四

jquery样式操作

jquery用法思想二
同一个函数完成取值和赋值
操作行间样式

// 获取div的样式
$("div").css("width");
$("div").css("color");


//设置div的样式
$("div").css("width","30px");
$("div").css("height","30px");
$("div").css({fontSize:"30px",color:"red"});

特别注意
选择器获取的多个元素，获取信息获取的是第一个，比如：$(“div”).css(“width”)，获取的是第一个div的width。

操作样式类名

$("#div1").addClass("divClass2") //为id为div1的对象追加样式divClass2
$("#div1").removeClass("divClass")  //移除id为div1的对象的class名为divClass的样式
$("#div1").removeClass("divClass divClass2") //移除多个样式
$("#div1").toggleClass("anotherClass") //重复切换anotherClass样式

目录五

jquery属性操作

html() 取出或设置html内容

// 取出html内容

var $htm = $('#div1').html();

// 设置html内容

$('#div1').html('<span>添加文字</span>');

text() 取出或设置text内容

// 取出文本内容

var $htm = $('#div1').text();

// 设置文本内容

$('#div1').text('<span>添加文字</span>');

attr() 取出或设置某个属性的值

// 取出图片的地址

var $src = $('#img1').attr('src');

// 设置图片的地址和alt属性

$('#img1').attr({ src: "test.jpg", alt: "Test Image" });

目录六

绑定click事件

给元素绑定click事件，可以用如下方法：

$('#btn1').click(function(){
    // 内部的this指的是原生对象
    // 使用jquery对象用 $(this)
})

目录七

特殊效果

js代码

$(function(){
    $("#btn1").click(function(){
        //$("#div1").fadeIn()
        $("#div1").fadeToggle()
    });
    $("#btn2").click(function(){
        $("#div1").fadeOut()
    });
    $("#btn3").click(function(){
        //$("#div1").show()
        $("#div1").toggle()
    });
    $("#btn4").click(function(){
        $("#div1").hide()
    });
    $("#btn5").click(function(){
        //$("#div1").slideDown()
        $("#div1").slideToggle()
    });
    $("#btn6").click(function(){
        $("#div1").slideUp()
    });
    $("#btn7").click(function(){
        //$("#div1").show("fast")
        $("#div1").show(3000,function(){
           alert('广告加载完毕')
        });
    });
})

html代码


<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title>04_jquery特殊效果.html</title>
    <script type="text/javascript" src="./js/jquery-1.12.4.js"></script>
    <script type="text/javascript" src="js/04_01.js"></script>
    <link type="text/css" rel="stylesheet" href="./css/css_04_01.css" />
</head>
<body>
<div>
    <h1>特殊效果</h1>
</div>
<div>
    <input type="button" id="btn1" value="淡入"/>
    <input type="button" id="btn2" value="淡出"/>
    <input type="button" id="btn3" value="显示"/>
    <input type="button" id="btn4" value="隐藏"/>
    <input type="button" id="btn5" value="向下展开"/>
    <input type="button" id="btn6" value="向上卷起"/>
    <input type="button" id="btn7" value="控制时间"/>
</div>
<div id="div1"></div>
</body>
</html>

jquery样式操作,属性操作,绑定click事件,特殊效果:(二)