jq02--基础函数

jq是一个js函数库，主要是为事件处理特别设计的，现在我们继续学习一些jq函数。

1.jq效果：

    显示与隐藏：
        $().hide(speed,callback)    speed--"slow" "fast" 毫秒数  callback--回调函数
        $().show(speed,callback)    speed--"slow" "fast" 毫秒数  callback--回调函数
        $().toggle(speed,callback)    切换hide()与show()
    
    淡入与淡出：
        $().fadeIn(speed,callback)
        $().fadeOut(speed,callback)
        $().fadeToggle(speed,callback)        切换fadeIn与fadeOut
        $().fadeTo(speed,opacity,callback)    渐变为给定的不透明度(值介于0与1之间)
        
    滑动：
        $().slideDown(speed,callback)
        $().slideUp(speed,callback)
        $().slideToggle(speed,callback)        切换slideDown与slideUp

        
2.动画：
    $().animate({params},speed,callback)    必须的params参数定义形成动画的CSS属性

    $("button").click(function(){
        $("div").animate({
            left:'250px',
            opacity:'0.5',
            width:'150px',
            height:'150px'
        });
    });
    //默认地，所有HTML元素都有一个静态位置，无法移动
    //如需对元素位置进行操作，需要把元素的position设置为relative absolute或fixed
    //params的CSS属性使用驼峰camel格式，如：paddingLeft,marginRight，因为js无法识别”-“。

   
3.停止动画、效果：

    $(selector).stop(stopAll,goToEnd);
    
    $("panel").stop();

    
4.回调函数callback：

    $("p").hide(1000,function(){
        alert("The paragraph is hidden");
    });

    
5.JQuery--chaining:
    在相同的元素上进行多个操作

    $("#p1").css("color","red").slideUp(1000).slideDown(1000)

6.获取、设置内容与属性：
    text()    设置、返回元素的文本内容
    html()    设置、返回元素的内容(包括文本中的HTML标签)
    val()    设置、返回表单字段的值
    attr()    获取属性值

    获取：
    <p id="test">这是段落中的<b>粗体</b>文本。</p>    
    $("#test").text()    --这是段落中的粗体文本
    $("#test").html()    --这是段落中的<b>粗体</b>文本
    $("#test").val()    $("#w3s").attr("href")
    
    设置：
    <p id="test1">这是段落。</p>
    $('#test').text("Hello world!")            --Hello world!
    $('#test').text("<b>Hello world!</b>")    --<b>Hello world!</b>
    $('#test').html("<b>>Hello world!</b>") --Hello world!
    
text() html() val()的回调函数：
    $("#test").text(function(index,oldText){
        
    });
    
attr()设置多个属性：
    $("#w3s").attr({
        "href":"http://www.w3school.com.cn",
        "title":"W3S"
    });

    
7.添加元素、内容：
    添加HTML内容：
    append()    被选元素的结尾插入内容(区别)
    prepend()    被选元素的开头插入内容
    before()    被选元素之前插入内容(区别)
    after()        被选元素之后插入内容

    $("p").append("Some append Text");
    $("img").after("Some text after");
    $("img").before("Some text before");
    //append与after有区别
    //prepend与before有区别
    
    添加HTML元素：
    function appendText(){
        var txt1="<p>Text.</p>";               // 以 HTML 创建新元素
        var txt2=$("<p></p>").text("Text.");   // 以 jQuery 创建新元素
        var txt3=document.createElement("p");  // 以 DOM 创建新元素
        txt3.innerHTML="Text.";
        $("p").append(txt1,txt2,txt3);         // 追加新元素
    }
    
    添加HTML元素：
    function afterText(){
        var txt1="<b>I </b>";                    // 以 HTML 创建新元素
        var txt2=$("<i></i>").text("love ");     // 通过 jQuery 创建新元素
        var txt3=document.createElement("big");  // 通过 DOM 创建新元素
        txt3.innerHTML="jQuery!";
        $("img").after(txt1,txt2,txt3);          // 在 img 之后插入新元素
    }

 

8.删除元素：
    remove---删除被选元素(极其子元素)
    empty----从被选元素中删除子元素

    $("#div1").remove()
    $("#div1").empty()
    $("p").remove(".italic")    接受参数，对被删元素过滤 

 

转载于:https://www.cnblogs.com/kuai-man/p/10728865.html