博主信息
Victor的博客
博文
32
粉丝
0
评论
0
访问量
6167
积分:0
P豆:68

Jquery-基础语法备忘-2019年10月27日

2019年10月28日 19:59:56阅读数:522博客 / Victor的博客 / 前端基础
实例
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Jquery初级基础备忘</title>
    <script src="../static/jquery-3.4.1.js">
    </script>
    <script>
        $(document).ready(function() {
            $('p').click(function() {
                $(this).hide();
            });
        });
        /*
        jQuery 是一个 JavaScript 库。
        jQuery 极大地简化了 JavaScript 编程。
        jQuery 库包含以下特性:
        HTML 元素选取
        HTML 元素操作
        CSS 操作
        HTML 事件函数
        JavaScript 特效和动画
        HTML DOM 遍历和修改
        AJAX
        Utilities
        ====================================================================================
        基础语法是:$(selector).action()
        jQuery 使用 CSS 选择器来选取 HTML 元素。
        $("p") 选取 <p> 元素。
        $("p.intro") 选取所有 class="intro" 的 <p> 元素。
        $("p#demo") 选取所有 id="demo" 的 <p> 元素。
        
        jQuery 使用 XPath 表达式来选择带有给定属性的元素。
        $("[href]") 选取所有带有 href 属性的元素。
        $("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
        $("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
        $("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
        $(selector).hide(speed,callback);
        $(selector).show(speed,callback);
        可以使用 toggle() 方法来切换 hide() 和 show() 方法。 $(selector).toggle(speed,callback);
        $(selector).slideDown(speed,callback);
        $(selector).slideUp(speed,callback);
        $(selector).slideToggle(speed,callback);
        $(selector).animate({params},speed,callback);
        如需对位置进行操作,要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute!
        jQuery stop() 方法用于停止动画或效果,在它们完成之前。
        stop() 方法适用于所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画。
        $(selector).stop(stopAll,goToEnd);
        可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。
        可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
        因此,默认地,stop() 会清除在被选元素上指定的当前动画。
        当动画 100% 完成后,即调用 Callback 函数。
        $("p").hide(1000,function(){alert("The paragraph is now hidden");});
        链接(chaining)的技术,允许我们在相同的元素上运行多条 jQuery 命令,一条接着另一条
        =============================================================================================

        获得内容 - text()、html() 以及 val()
        三个简单实用的用于 DOM 操作的 jQuery 方法:
        text() - 设置或返回所选元素的文本内容
        html() - 设置或返回所选元素的内容(包括 HTML 标记)
        val() - 设置或返回表单字段的值

        attr() 方法用于获取属性值。

        append() - 在被选元素的结尾插入内容
        prepend() - 在被选元素的开头插入内容
        after() - 在被选元素之后插入内容
        before() - 在被选元素之前插入内容

        append() 和 prepend() 方法能够通过参数接收无限数量的新元素。可以通过 jQuery 来生成文本/HTML,或者通过 JavaScript 代码和 DOM 元素。
        
        remove() - 删除被选元素(及其子元素)
        empty() - 从被选元素中删除子元素
        remove() 方法也可接受一个参数,允许您对被删元素进行过滤。
                    该参数可以是任何 jQuery 选择器的语法。
        ================================================================================

        addClass() - 向被选元素添加一个或多个类
        removeClass() - 从被选元素删除一个或多个类
        toggleClass() - 对被选元素进行添加/删除类的切换操作
        css() - 设置或返回样式属性 css() 方法设置或返回被选元素的一个或多个样式属性。
        如需设置指定的 CSS 属性,请使用如下语法:css("propertyname","value");
        如需设置多个 CSS 属性,请使用如下语法:
        css({"propertyname":"value","propertyname":"value",...});
        ===================================================================================
        Query 提供多个处理尺寸的重要方法:
        width()
        height()
        innerWidth()
        innerHeight()
        outerWidth()
        outerHeight()
        width() 方法设置或返回元素的宽度(不包括内边距、边框或外边距)。
        height() 方法设置或返回元素的高度(不包括内边距、边框或外边距)。
        innerWidth() 方法返回元素的宽度(包括内边距)。
        innerHeight() 方法返回元素的高度(包括内边距)。
        outerWidth() 方法返回元素的宽度(包括内边距和边框)。
        outerHeight() 方法返回元素的高度(包括内边距和边框)。
        outerWidth(true) 方法返回元素的宽度(包括内边距、边框和外边距)。
        outerHeight(true) 方法返回元素的高度(包括内边距、边框和外边距)。
        $("#div1").width(500).height(500);给参数,设置元素的宽度和高度;
        ========================================================================================
        parent()
        parents()
        parentsUntil()
        parent() 方法返回被选元素的直接父元素。该方法只会向上一级对 DOM 树进行遍历。
        parents() 方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>)。
        parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。
        $("span").parentsUntil("div");
        例子返回介于 <span> 与 <div> 元素之间的所有祖先元素:
        -------------------------------------------------------------------------------
        children()
        find()
        children() 方法返回被选元素的所有直接子元素。该方法只会向下一级对 DOM 树进行遍历。
        $("div").children("p.1");
        find() 方法返回被选元素的后代元素,一路向下直到最后一个后代。
        --------------------------------------------------------------------------------
        有许多有用的方法让我们在 DOM 树进行水平遍历:
        siblings()
        next()
        nextAll()
        nextUntil()
        prev()
        prevAll()
        prevUntil()
        siblings() 方法返回被选元素的所有同胞元素。
        $("h2").siblings("p").css({"color":"red","border":"2px solid red"});
        next() 方法返回被选元素的下一个同胞元素。该方法只返回一个元素
        $("h2").next().css({"color":"red","border":"2px solid red"});
        nextAll() 方法返回被选元素的所有跟随的同胞元素
        $("h2").nextAll();
        nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。
        $("h2").nextUntil("h6");
        prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似,
        只不过方向相反而已:它们返回的是前面的同胞元素(在 DOM 树中沿着同胞元素向后遍历,而不是向前)。
        ------------------------------------------------------------------------------------------
        三个最基本的过滤方法是:first(), last() 和 eq(),它们允许您基于其在一组元素中的位置来选择一个特定的元素。
        过滤方法,比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。
        first() 方法返回被选元素的首个元素。
        $("div p").first().css("background-color","yellow");
        last() 方法返回被选元素的最后一个元素。
        eq() 方法返回被选元素中带有指定索引号的元素。
        索引号从 0 开始,因此首个元素的索引号是 0 而不是 1。下面的例子选取第二个 <p> 元素(索引号 1):
        $("p").eq(1);
        filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回。
        下面的例子返回带有类名 "intro" 的所有 <p> 元素:
         $("p").filter(".intro");
        not() 方法返回不匹配标准的所有元素。
        提示:not() 方法与 filter() 相反。
        下面的例子返回不带有类名 "intro" 的所有 <p> 元素:
        $("p").not(".intro");
          ======================================================================================================
                语法                          描述              
                $("*")                      选取所有元素      
                $(this)                     选取当前 HTML 元素    
                $("p.intro")                选取 class 为 intro 的 <p> 元素   
                $("p:first")                选取第一个 <p> 元素    
                $("ul li:first")            选取第一个 <ul> 元素的第一个 <li> 元素   
                $("ul li:first-child")      选取每个 <ul> 元素的第一个 <li> 元素    
                $("[href]")                 选取带有 href 属性的元素 
                $("a[target='_blank']")     选取所有 target 属性值等于 "_blank" 的 <a> 元素 
                $("a[target!='_blank']")    选取所有 target 属性值不等于 "_blank" 的 <a> 元素    
                $(":button")          选取所有 type="button" 的 <input> 元素 和 <button> 元素   
                $("tr:even")                选取偶数位置的 <tr> 元素 
                $("tr:odd")                 选取奇数位置的 <tr> 元素 
                =========================================================================================================
                鼠标事件    键盘事件    表单事件    文档/窗口事件
                click       keypress    submit      load
                dblclick    keydown     change      resize
                mouseenter  keyup       focus       scroll
                mouseleave              blur        unload
        */

        $(document).ready(function() {
            $('#btn1').click(function() {
                $('#test1').text(function(i, oldtext) {
                    return 'old text:' + oldtext + 'new text:' + 'Hello World! index:(' + i + ')';
                });
            });
            $('#btn2').click(function() {
                $('#test2').html(function(i, oldtext) {
                    return 'old HTML:' + oldtext + 'New HTML: Hello <strong>World!</string> index:(' + i + ')';
                });
            });
        })
    </script>
</head>

<body>
    <p>如果你点我,我就会消失。</p>
    <p>继续点我!</p>
    <p>接着点我!</p>
    <p id="test1">这是<b>粗体</b>文本。</p>
    <p id="test2">这是另一段<b>粗体</b>文本。</p>
    <button id="btn1">显示旧/新文本</button>
    <button id="btn2">显示旧/新 HTML</button>
</body>

</html>
运行实例 »
点击 "运行实例" 按钮查看在线实例


全部评论

文明上网理性发言,请遵守新闻评论服务协议

条评论
暂无评论暂无评论!