jquery判断字符串是否为空(jquery设置input的value值)

Introduction to jQuery

  • jQuery 是一个快速、简洁的 JavaScript 框架,是目前最流行的 JavaScript 程序库,它是对 JavaScript 对象和函数的封装
  • jQuery 的设计思想是 Write less, do more
  • 实现隔行变色效果,JavaScript 要循环加判断,而 jQuery 只需一句关键代码
$(\"tr:even\").css(\"background-color\", \"#ccc\");

jQuery Function

  • 访问和操作 DOM 元素
  • 控制页面样式
  • 对页面事件进行处理
  • 扩展新的 jQuery 插件
  • 与 Ajax 技术完美结合

jQuery 能做的 JavaScript 也都能做,但使用 jQuery 能大幅提高开发效率

jQuery Advantages

  • 体积小,压缩后只有 100 KB 左右
  • 强大的选择器
  • 出色的 DOM 封装
  • 可靠的事件处理机制
  • 出色的浏览器兼容性

jQuery Usage

jQuery 作为一个单独存在的 js 文件,并不会与其他的 js 文件发生冲突

<script class=wp-block-code><script>
    $(selector).action();
</script>

工厂函数 $():将 DOM 对象转化为 jQuery 对象

选择器 selector:获取需要操作的 DOM 元素

方法 action():jQuery 中提供的方法,其中包括绑定事件处理的方法 “$” 等同于 “jQuery”

例如:

<body>
    <p>hello</p>
</body>
<script    alert($(\"p\").text());
</script>

jQuery 对象与 DOM 对象

DOM 对象和 jQuery 对象分别拥有一套独立的方法,不能混用

$(\"#title\").html();
// 等同于
document.getElementById(\"title\").innerHTML;

如果要混用它们,就要进行转换

  • DOM 对象转 jQuery 对象
// a 是 DOM 对象
var a = document.getElementById(\"name\");
// b 是 jQuery 对象
var b = $(a);
  • jQuery 对象转 DOM 对象
// a 是 jQuery 对象
var a = $(\"#name\");
// b 是 DOM 对象
var b = jqObject.get(0);

选择器

基本选择器

基本选择器包括标签选择器、类选择器、ID选择器、并集选择器、交集选择器和全局选择器。

<p>中国</p>
<p>China</p>
<p class=\"jy\">加油</p>
<p id=\"wan\">万</p>
<h3 class=\"jy\">加油</h3>
​
<script    // 标签选择器,获得所有的 p
    $(\"p\").css(\"color\",\"red\");
    // 类选择器
    $(\".jy\").css(\"color\",\"red\");
    // ID 选择器,更具备唯一性
    $(\"#wan\").css(\"color\",\"red\");
    // 并集选择器 \".jy\" 和 \"#wan\"
    $(\".jy,#wan\").css(\"color\",\"red\");
    // 交集选择器,既是 h3 标签,又拥有 \".jy\" 的元素
    $(\"h3.jy\").css(\"color\",\"red\");
</script>

层次选择器

<h3>000</h3>
<div id=\"x\">
    111
    <p>p1</p>
    <div>
        <p>p2</p>
    </div>
</div>
<h3>222</h3>
<h3>333</h3>
​
<script    // 后代选择器,忽略层级,选取所有后代元素
    $(\"#x p\").css(\"color\",\"red\");
    // 子代选择器,只选取子层的元素
    $(\"#x>p\").css(\"color\",\"red\");
    // 相邻元素选择器,下一个紧邻的兄弟元素 h3
    $(\"#x+h3\").css(\"color\",\"red\");
    // 同辈元素选择器,#x 元素之后的的所有兄弟元素 h3
    $(\"#x~h3\").css(\"color\",\"red\");
</script>

属性选择器

<a href=\"www.baidu.com\">百度</a>
<a href=\"www.sina.com.cn\">新浪网</a>
<a href=\"http://www.163.com\">网易</a>
<p href=\"x\">测试1</p>
<p href=\"x\" title=\"x\">测试2</p>
​
<script    // 选取拥有 href 属性的元素
    $(\"[href]\").css(\"color\",\"red\");
    // 选取拥有 href=x 的元素
    $(\"[href=\'x\']\").css(\"color\",\"red\");
    // 选取 a 标签中 href 不等于 x 的元素
    $(\"a[href!=\'x\']\").css(\"color\",\"red\");
    // 选取 href 属性以 www 开头的元素
    $(\"[href^=\'www\']\").css(\"color\",\"red\");
    // 选取 href 属性以 com 结尾的元素
    $(\"[href$=\'com\']\").css(\"color\",\"red\");
    // 选取 href 属性包含 a 的元素
    $(\"[href*=\'a\']\").css(\"color\",\"red\");
    // 选取拥有 href 属性和 title 属性,并且 title=x 的 p 元素
    $(\"p[href][title=\'x\']\").css(\"color\",\"red\");
</script>

过滤选择器

<h2 id=\"h2#x\">选择</h2>
<ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
    <li>e</li>
</ul>
​
<script    // 第一个 li
    $(\"li:first\").css(\"color\",\"red\");
    // 最后一个 li
    $(\"li:last\").css(\"color\",\"red\");
    // 偶数行的 li
    $(\"li:even\").css(\"color\",\"red\");
    // 奇数行的 li
    $(\"li:odd\").css(\"color\",\"red\");
    // 下标为 2 的 li
    $(\"li:eq(2)\").css(\"color\",\"red\");
    // 下标大于 1 的 li
    $(\"li:gt(1)\").css(\"color\",\"red\");
    // 下标小于 2 的 li
    $(\"li:lt(2)\").css(\"color\",\"red\");
    // 使用转义符
    $(\"#h2\\\\#x\").css(\"color\",\"red\");
</script>

事件

鼠标事件

鼠标事件是当用户在文档上移动或单击鼠标时而产生的事件。

<img width=\"300\">
<img width=\"300\">
<img width=\"300\">
​
<script    // 点击一下,切换照片
    $(\"img\").click( function(){
        // this 是事件触发的源头
        $(this).attr( \"src\",\"img/2.jpg\" );
    } );
    // 移动到元素上
    $(\"img\").mouseover( function(){
        $(this).css( \"border\",\"2px solid red\" );
    } );
    // 离开元素
    $(\"img\").mouseout( function(){
        $(this).css( \"border\",\"2px solid white\" );
    } );
</script>

键盘事件

用户每次按下或者释放键盘上的键时都会产生事件。

<input>
<h3></h3>
​
<script    $(\"input\").keyup( function(){
        // 获取框中的值
        var str = $(this).val();
        // 将 h3 元素中的文本内容更改为 str
        $(\"h3\").text( str );
    } );
</script>

表单事件

当元素获得焦点时,会触发 focus 事件,失去焦点时,会触发 blur 事件。

<form action=\"\">
    <p>帐号:<input id=\"a\" value=\"请输入帐号...\"></p>
    <p>电话:<input id=\"b\"></p>
</form>
​
<script    // 获得焦点(激活/点击一下)
    $(\"#a\").focus(function(){
        $(this).val(\"\");
    });
​
    // 失去焦点(未激活/未点击)
    $(\"#a\").blur(function(){
        $(this).val(\"请输入帐号...\");
    });
</script>

鼠标悬停复合事件

hover() 方法相当于 mouseover 与 mouseout 事件的组合。

<img width=\"400\">
​
<script    $(\"img\").hover(
        function(){
            $(this).css(\"border\",\"5px solid red\");
        },
        function(){
            $(this).css(\"border\",\"5px solid white\");
        }
    );
</script>

连续点击复合事件

<h2>选择</h2>
<ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
    <li>e</li>
</ul>
​
<script    $(\"h2\").click(function(){
        // 连续点击,ul 的可见和隐藏进行切换
        $(\"ul\").toggle();
    });
</script>

事件的动态绑定

对 dom 元素绑定事件的另一种写法

  • 绑定一个事件
$(\".del\").on(\'click\', function() {
    alert(\'hello\');
})
  • 绑定多个事件
$(\".del\").on(\'click mouseover\', function() {
    alert(\'hello\');
})

元素的隐藏和显示

改变元素的宽和高(带动画效果)

  • show(speed):显示
  • hide(speed):隐藏
  • toggle(speed) 等价于 show + hide:显示的隐藏,隐藏的显示

可选的 speed 参数规定隐藏/显示的速度,可以取以下值:”slow”、”fast” 或毫秒

<style>
    div{
        width: 200px;
        height: 200px;
        background-color: black;
    }
</style>
<body>
    <button id=\"btn1\">显示</button>
    <button id=\"btn2\">隐藏</button>
    <button id=\"btn3\">切换</button>
    <div></div>
​
    <script    <script>
        $(\"#btn1\").click(function(){
            $(\"div\").show(\'slow\');
        });
        $(\"#btn2\").click(function(){
            // fast:快速的
            // slow:缓慢的
            // 毫秒:自定义
            $(\"div\").hide(2000); 
        });
        $(\"#btn3\").click(function(){
            $(\"div\").toggle(1000);
        });
    </script>
</body>

改变元素的高(拉伸效果)

  • slideDown(speed):显示
  • slideUp(speed):隐藏
  • slideToggle(speed) 等价于 slideDown + slideUp

可选的 speed 参数规定隐藏/显示的速度,可以取以下值:”slow”、”fast” 或毫秒

<script>
    $(\"#btn1\").click(function(){
        // 向下伸展
        $(\"div\").slideDown(1000);
    });
    $(\"#btn2\").click(function(){
        // 向上收缩
        $(\"div\").slideUp(1000);
    });
    $(\"#btn3\").click(function(){
        // 切换
        $(\"div\").slideToggle(1000);
    });
</script>

不改变元素的大小(淡入淡出效果)

  • fadeIn(speed) 显示
  • fadeOut(speed) 隐藏
  • fadeToggle(speed) 等价于 fadeIn + fadeOut 动画
  • fadeTo(speed, 透明度) 方法允许渐变为给定的不透明度(值介于 0 与 1 之间)

可选的 speed 参数规定隐藏/显示的速度,可以取以下值:”slow”、”fast” 或毫秒

<script>
    $(\"#btn1\").click(function(){
        // 显示:映入眼帘
        $(\"div\").fadeIn(1000);
    });
​
    $(\"#btn2\").click(function(){
        // 隐藏:淡出我的视线
        $(\"div\").fadeOut(1000);
    });
​
    $(\"#btn3\").click(function(){
        // 切换
        $(\"div\").fadeToggle(1000);
    });
​
    $(\"#btn4\").click(function(){
        // 1 秒内变成 50% 的透明度
        $(\"div\").fadeTo(1000,0.5);
    });
</script>

链是允许在同一个元素上在一条语句中运行多个 jQuery 方法,可以把动作/方法链接在一起。

例如:点击一次按钮,让 div 完成 4 个指定动作:

  1. 背景变粉
  2. 字体变绿
  3. 向上收缩
  4. 向下拉伸
<style>
    div{
        width: 200px;
        height: 200px;
        background-color: black;
        color:white;
        font-size: 3em;
    }    
</style>
<body>
    <button>试试</button>
    <div>hello</div>
​
    <script    <script>
        $(\"button\").click(function(){
            $(\"div\").css(\"background-color\",\"pink\").css(\"color\",\"green\").slideUp(1000).slideDown(1000);
        });
    </script>
</body>

DOM 和 CSS 的操作

属性函数

attr(“属性”) 获得元素的属性值。

attr(“属性”, “新值”) 修改元素的属性值。

attr(样式参数) 样式参数可以写成 json 格式。

<body>
    <button id=\"btn1\">点我试试</button>
    <hr>
    <img title=\"风景图\" width=\"300\">
​
    <script    <script>
        $(\"#btn1\").click(function(){
            $(\"img\").attr(\"src\",\"img/2.jpg\");
            $(\"img\").attr(\"title\",\"高清风景图\");
            $(\"img\").attr({width:\"200\",height:\"200\"});
        });
    </script>
</body>

val() 获得表单元素中的 value 值

val(“x”) 修改表单元素中的 value 值

html() 获得元素中的内容(标签 + 文本)

html(“x”) 修改元素中的内容(标签 + 文本)

text() 获得元素中的文本

text(“x”) 修改元素中的文本

<button>试试</button>
<hr>
<input id=\"username\">
​
<div>
    <h1><i>中国加油</i></h1>
</div>
​
<script    $(\"button\").click(function(){
        // input 框中的值
        alert($(\"input\").val());
        // 修改 input 框中的值
        $(\"input\").val(\"66666\");
        // 获得 div 中的内容(包含标签信息)
        alert($(\"div\").html());
        // 获得 div 中的内容(不包含标签信息,只包含文本内容)
        alert($(\"div\").text());
        // 修改 div 中的内容(全部内容都覆盖)
        $(\"div\").text(\"祖国万岁!\");
    });
</script>

样式函数

css(“属性”) 获得该属性值

css(“属性”, “值”) 设置属性的值

css({json}) 设置多个属性的值

<style>
    div{
        width: 150px;
        height: 150px;
        background-color: #000;
    }
</style>
<body>
    <button>试试</button>
    <hr>
    <div></div>
​
    <script    <script>
        $(\"button\").click(function(){
            // 获取 css 属性,width 的值
            var w = $(\"div\").css(\"width\");
​
            // 一个键值对
            $(\"div\").css(\"background-color\",\"pink\");
​
            // 链式编程
            $(\"div\").css(\"background-color\",\"pink\").css(\"border-radius\",\"50%\");
​
            // json 为参数
            $(\"div\").css({
                opacity:\"0.4\",
                background:\"orange\",
                borderRadius:\"50%\"
            });
        });
    </script>
</body>

width() 获得元素的宽度

width(number) 修改元素的宽度

height() 获得元素的高度

height(number) 修改元素的高度

<style>
    div{
        width: 150px;
        height: 150px;
        background-color: #000;
    }
</style>
<body>
    <button>试试</button>
    <hr>
    <div></div>
​
    <script    <script>
        $(\"button\").click(function(){
            //(无参)获取宽度
            var w = $(\"div\").width();
            //(无参)获取高度
            var h = $(\"div\").height();
            alert(\"宽:\"+w+\"px,高:\"+h+\"px\");
            //(传参)修改宽度
            $(\"div\").width(\"300\");
            //(传参)修改高度
            $(\"div\").height(\"300\");
        });
    </script>
</body>

类样式函数

addClass() 为元素添加类样式

removeClass() 将元素的类样式移除

toggleClass() 样式的切换;有->无,无->有

<style>
    div{
        width: 100px;
        height: 100px;
        background-color: #000;
    }
    .a{
        background: palevioletred;
        border-radius: 50%;
    } 
    .b{
        border:5px dashed darkcyan;
        opacity: 0.6;
    }
    .cn{
        background: #000;
        color: #FFF;
        font-family: 字魂49号-逍遥行书;
    }
</style>
<body>
    <button id=\"btn1\">试试</button>
    <button id=\"btn2\">取消透明度</button>
    <button id=\"btn3\">样式切换</button>
    <hr>
    <div></div>
    <h1>中华人民共和国</h1>
​
    <script    <script>
        $(\"#btn1\").click(function(){
            // $(\"div\").addClass(\"a\");
            $(\"div\").addClass(\"a b\");
        });
​
        $(\"#btn2\").click(function(){
            $(\"div\").removeClass(\"b\");
        });
​
        $(\"#btn3\").click(function(){
            $(\"h1\").toggleClass(\"cn\");
        });
    </script>
</body>

节点操作

<input>
<button id=\"test\">测试</button>
​
<ul>
    <li>西游记</li>
    <li>三国演义</li>
    <li>水浒传</li>
</ul>
​
<script    $(\"#test\").click(function(){
        var bookname = $(\"input\").val();
        // 通过工厂函数,创建新的 li 节点
        var newli = $(\"<li>\"+bookname+\"</li>\");
​
        /* 添加子节点 */
        // newli 添加到 ul 后面
        $(\"ul\").append(newli);
        // newli 添加到 ul 后面
        newli.appendTo(\"ul\");
        // newli 添加到 ul 前面
        $(\"ul\").prepend(newli);
        newli.prependTo(\"ul\");
​
        /* 添加同辈节点 */
        // newli 添加到最后的 li 的后面
        $(\"li:last\").after( newli );
        newli.insertAfter(\"li:last\");
        //newli 添加到最后的 li 的前面
        $(\"li:last\").before(newli);
        newli.insertBefore(\"li:last\");
​
        /* 替换节点 */
        // 将第二个 li 替换成 newli
        $(\"li:eq(1)\").replaceWith(newli);
        newli.replaceAll( \"li:eq(1)\" );
​
        /* 复制节点 */
        // 复制第一个 li,并插入到最后一个 li 的后面
        $(\"li:first\").clone().insertAfter(\"li:last\");
​
        /* 删除节点 */
        // 清空了节点上的文本(节点并没有消失)
        $(\"li:eq(1)\").empty();
        // 删除节点
        $(\"li:eq(1)\").remove();
    });
</script>

遍历节点

祖先元素

用于向上遍历 DOM 树的方法

  • parent() 返回被选元素的直接父元素,仅仅是上一级
  • parents() 返回被选元素的所有祖先元素,它一路向上直到文档的根元素,可以选择辈分
<p><button>测试</button></p>
<ul>
    <li>a</li>
    <li>
        <b>b</b>
    </li>
    <li>c</li>
</ul>
​
<script    $(\"button\").click(function(){
        // 找爸爸
        var x = $(\"b\").parent().html();
        // 找祖宗 ul
        var x = $(\"b\").parents(\"ul\").html();
        // 找祖宗 body
        var x = $(\"b\").parents(\"body\").html();
        alert( x );
    });
</script>

同辈元素

next() 获取紧邻匹配元素之后的元素

prev() 获取紧邻匹配元素之前的元素

siblings([selector]) 获取位于匹配元素前面和后面的所有同辈元素

<button>测试</button>
<p>p1</p>
<ul>
    <li>a</li>
    <li>
        <b>b</b>
    </li>
    <li>c</li>
</ul>
<p>p2</p>
<p id=\"x\">p3</p>
​
<script    $(\"button\").click(function(){
        // 紧邻的下一个元素
        var x = $(\"ul\").next().text();
        // 紧邻的上一个元素
        var x = $(\"ul\").prev().text();
        // 所有的兄弟中 id=x 的
        var x = $(\"ul\").siblings(\"#x\").text();
        // ul 的所有兄弟:1 个 button,3 个 p,2 个 script
        var arr = $(\"ul\").siblings();
        for(var i = 0 ;i< arr.length ;i++){
            alert(arr[i]);
        }
    });
</script>

后代元素

后代是子、孙、曾孙等等

  • children([selector]) 方法返回被选元素的所有直接子元素
<button>测试</button>
<ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>
​
<script    $(\"button\").click(function(){
        // 所有子节点:a b c
        var x =  $(\"ul\").children().text();
        // ul 中的第一个子节点
        var x =  $(\"ul\").children(\"li:first\").text();
        alert(x);
    });
</script>
  • find(选择器) 方法返回被选元素的后代元素,一路向下直到最后一个后代
<button>测试</button>
<ul>
    <li>盘古</li>
    <li>蚩尤</li>
    <li>刑天
        <p>龚工</p>
    </li>
    <h3>祝融</h3>
</ul>
​
<script    $(\"button\").click(function(){
        // 在 ul 中查找 p 元素,忽略层级
        var x = $(\"ul\").find(\"p\").text();
        // 在 ul 中查找 h3 元素,忽略层级
        var x = $(\"ul\").find(\"h3\").text();
        // 不知道找什么
        var x = $(\"ul\").find().text();
        alert(x);
    });
</script>

元素的过滤

first() 过滤第一个元素

last() 过滤最后一个元素

eq(index) 过滤到下标为 index 的元素

not() 除了什么之外的元素

is() 返回布尔,判断是不是这种元素

<button>测试</button>
<ul>
    <li>盘古</li>
    <li>蚩尤</li>
    <li>刑天</li>
</ul>
​
<script    $(\"button\").click(function(){
        // 第一个 li
        var x = $(\"li\").first().text();
        // 最后一个 li
        var x = $(\"li\").last().text();
        // 下标为 1 的 li
        var x = $(\"li\").eq(1).text();
        // 除了下标为 1 的其余所有 li
        var x = $(\"li\").not(\"li:eq(1)\").text();
        // 返回布尔型,li 的父节点是不是 ul
        var x = $(\"li\").parent().is(\"ul\");
        alert(x);
    });
</script>

案例

手风琴特效

<style>
    dd {
        /* 隐藏元素 */
        display: none;
    }
</style>
<body>
    <nav>
        <header>网站</header>
        <ul>
            <li>
                <dl>
                    <dt>求职</dt>
                    <dd>1.简历</dd>
                    <dd>2.面试</dd>
                    <dd>3.入职</dd>
                </dl>
            </li>
            <li>
                <dl>
                    <dt>教育</dt>
                    <dd>1.看视频</dd>
                    <dd>2.做作业</dd>
                    <dd>3.在线辅导</dd>
                </dl>
            </li>
            <li>
                <dl>
                    <dt>创业</dt>
                    <dd>1.帮助小企业</dd>
                    <dd>2.头脑风暴</dd>
                    <dd>3.赚钱啦</dd>
                </dl>
            </li>
        </ul>
    </nav>
    <script    <script>
        $(\"nav dt\").click(function(){
            // 所有的 dd 全部都闭合上,除了自己的兄弟
            $(\"dd\").not($(this).siblings()).slideUp(500);
            // 自己的兄弟进行切换,显示闭合上,闭合的显示出来
            $(this).siblings().slideToggle(500);
        });
    </script>
</body>

购物车结算

<style>
    .minus,.plus{
        border:1px solid #999;
        /* 超链接 a 是行内元素 */
        /* 转换成行内块显示,才能改变宽和高 */
        display: inline-block;
        width: 20px;
        height: 20px;
        text-align: center;
        text-decoration: none;
    }
</style>
<body>
    <table border=\"1\" cellspacing=\"0\" width=\"400\">
        <tr>
            <td>商品编号</td>
            <td>名称</td>
            <td>单价</td>
            <td>数量</td>
            <td>总价</td>
        </tr>
        <tr>
            <td>1</td>
            <td>炸香肠</td>
            <td>3</td>
            <td>
                <a href=\"#\" class=\"minus\">-</a>
                <span>1</span>
                <a href=\"#\" class=\"plus\">+</a>
            </td>
            <td>3</td>
        </tr>
        <tr>
            <td>2</td>
            <td>王八</td>
            <td>10</td>
            <td>
                <a href=\"#\" class=\"minus\">-</a>
                <span>1</span>
                <a href=\"#\" class=\"plus\">+</a>
            </td>
            <td>10</td>
        </tr>
        <tr>
            <td>3</td>
            <td>恐龙</td>
            <td>1000</td>
            <td>
                <a href=\"#\" class=\"minus\">-</a>
                <span>1</span>
                <a href=\"#\" class=\"plus\">+</a>
            </td>
            <td>1000</td>
        </tr>
    </table>
    <p style=\"width: 400px; text-align: right;\">
        总价:<b style=\"color:red;\">111</b> <button>提交订单</button>
    </p>
    <script    <script class=wp-block-code>$(\".plus\").click(function(){
    // 获得原来的商品数量
    var i = $(this).prev().text();
    i++;
    // 现在的商品数量
    $(this).prev().text(i);
    // 商品单价
    var price = $(this).parent().prev().text();
    // 商品总价
    var total = i*price;
    // 现在商品的总价
    $(this).parent().next().text(total);
    getTotal();
});
​
​
$(\".minus\").click(function(){
    var i = $(this).next().text();
    i--;
    // 数量已经是 0 了,询问用户是否删除该商品
    if(i == 0){
        if( confirm(\"是否删除该商品?\") ){
            $(this).parents(\"tr\").remove();
        }
    }else{
        $(this).next().text(i);
        // 商品单价
        var price = $(this).parent().prev().text();
        // 商品总价
        var total = i*price;
        // 现在商品的总价
        $(this).parent().next().text(total);
    }
    getTotal();
});
​
// 计算所有商品的总价
// function getTotal(){
//     // 总价钱
//     var sum = 0;
//     var arr = $(\"tr:not(tr:first)\").find(\"td:last\");
//     for(var i = 0;i<arr.length ; i++){
//        sum += Number(arr[i].innerHTML) ;
//     }
//     $(\"b\").text(sum);
// }
​
function getTotal(){
    // 总价钱
    var sum = 0;
    $(\"tr:not(tr:first)\").find(\"td:last\").each(function(){
        sum += Number($(this).text());
    });
    $(\"b\").text(sum);
}
(0)
仰望辉煌。  的头像仰望辉煌。  

相关推荐

发表回复

登录后才能评论