jq02--基础函数

时间：2021-12-09 08:55:03

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")    接受参数，对被删元素过滤

相关文章