知乐空间

jquery判断字符串是否为空

小编：收藏分享 分类：资讯 信息来源：

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 文件发生冲突

基本的语法介绍

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

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

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

例如：


    
hello

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选择器、并集选择器、交集选择器和全局选择器。

中国


China


加油


万


加油

​

层次选择器

000


    111
    
p1

    
        
p2

    


222


333

​

属性选择器

百度
新浪网
网易

测试1


测试2

​

过滤选择器

选择


    
    
  • a
    • 
    
  • b
    • 
    
  • c
    • 
    
  • d
    • 
    
  • e
    • 


​

事件

鼠标事件

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




​

键盘事件

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




​

表单事件

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


    
帐号：

    
电话：



​

鼠标悬停复合事件

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


​

连续点击复合事件

选择


    
    
  • a
    • 
    
  • b
    • 
    
  • c
    • 
    
  • d
    • 
    
  • e
    • 


​

事件的动态绑定

对 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” 或毫秒



    
    
    
    
​

改变元素的高（拉伸效果）

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

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

不改变元素的大小（淡入淡出效果）

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

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

链

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

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

  1. 背景变粉
  2. 字体变绿
  3. 向上收缩
  4. 向下拉伸


    
    hello
​

DOM 和 CSS 的操作

属性函数

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

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

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


    
    

    
​

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

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

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

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

text() 获得元素中的文本

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





​

    
中国加油


​

样式函数

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

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

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



    
    

    
​

width() 获得元素的宽度

width(number) 修改元素的宽度

height() 获得元素的高度

height(number) 修改元素的高度



    
    

    
​

类样式函数

addClass() 为元素添加类样式

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

toggleClass() 样式的切换；有->无，无->有



    
    
    
    

    
    
中华人民共和国

​

节点操作



​

    
    
  • 西游记
    • 
    
  • 三国演义
    • 
    
  • 水浒传
    • 


​

遍历节点

祖先元素

用于向上遍历 DOM 树的方法

  • parent() 返回被选元素的直接父元素，仅仅是上一级
  • parents() 返回被选元素的所有祖先元素，它一路向上直到文档的根元素，可以选择辈分


    
    
  • a
    • 
    
  • 
        b
    
    • 
    
  • c
    • 


​

同辈元素

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

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

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



p1


    
    
  • a
    • 
    
  • 
        b
    
    • 
    
  • c
    • 



p2


p3

​

后代元素

后代是子、孙、曾孙等等

  • children([selector]) 方法返回被选元素的所有直接子元素


    
    
  • a
    • 
    
  • b
    • 
    
  • c
    • 


​
  • find(选择器) 方法返回被选元素的后代元素，一路向下直到最后一个后代


    
    
  • 盘古
    • 
    
  • 蚩尤
    • 
    
  • 刑天
        
    龚工
    
    
    • 
    
    祝融
    


​

元素的过滤

first() 过滤第一个元素

last() 过滤最后一个元素

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

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

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



    
    
  • 盘古
    • 
    
  • 蚩尤
    • 
    
  • 刑天
    • 


​

案例

手风琴特效

购物车结算



    

        

            商品编号
            名称
            单价
            数量
            总价
        

        

            1
            炸香肠
            3
            
                -
                1
                +
            
            3
        

        

            2
            王八
            10
            
                -
                1
                +
            
            10
        

        

            3
            恐龙
            1000
            
                -
                1
                +
            
            1000
        

    

    

        总价：111

car.js

$(".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

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，请发送邮件至 ZLME@ZLME.COM 举报，一经查实，立刻删除。

留言与评论（共有 0 条评论）
验证码：