jQuery

Posted 2020-11-05 瀛洲小李

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属性操作

1、html() 取出或设置html内容

// 取出html内容

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

// 设置html内容

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

2、text() 取出或设置text内容

// 取出文本内容

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

// 设置文本内容

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

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

// 取出图片的地址

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

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

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

绑定click事件

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

$(‘#btn1‘).click(function(){

    // 内部的this指的是原生对象

    // 使用jquery对象用 $(this)

})

jquery特殊效果

fadeIn() 淡入

    $btn.click(function(){

        $(‘#div1‘).fadeIn(1000,‘swing‘,function(){
            alert(‘done!‘);
        });

    });

fadeOut() 淡出
fadeToggle() 切换淡入淡出
hide() 隐藏元素
show() 显示元素
toggle() 依次展示或隐藏某个元素
slideDown() 向下展开
slideUp() 向上卷起
slideToggle() 依次展开或卷起某个元素