• 首页 首页 icon
  • 工具库 工具库 icon
    • IP查询 IP查询 icon
  • 内容库 内容库 icon
    • 快讯库 快讯库 icon
    • 精品库 精品库 icon
    • 问答库 问答库 icon
  • 更多 更多 icon
    • 服务条款 服务条款 icon

jQuery:工具方法和amp;CSS属性和方法

武飞扬头像
X4866233
帮助3

$工具中的类方法(静态方法)

1.1 each() 遍历  数组 对象 对象数组

  1.  
    //数组的定义
  2.  
    var arr = []
  3.  
    var arr = new Array();
  4.  
     
  5.  
    //遍历对象
  6.  
    $(function() {
  7.  
    //一、$工具方法
  8.  
    //1.1$.each 遍历对象 数组
  9.  
    //定义对象
  10.  
    var stu = {"name":"张三","age":38};
  11.  
    //遍历对象 k指的是索引 v指的是元素
  12.  
    $.each(stu,function(k,v){
  13.  
    console.info(k,v);
  14.  
    })
  15.  
    })
  16.  
    //遍历数组
  17.  
    $(function() {
  18.  
    //定义数组
  19.  
    var stus= ["张三","李四","王五","赵六"];
  20.  
    //遍历数组
  21.  
    $.each(stus,function(i,n){
  22.  
    console.info(n);
  23.  
    })
  24.  
    })
  25.  
    //遍历对象数组
  26.  
    $(function() {
  27.  
    //定义对象数组 [{}]
  28.  
    var stus = [{"name":"张大三","age":38},{"name":"张小三","age":39}];
  29.  
    //遍历对象数组
  30.  
    $.each(stus, function(i, stu) {
  31.  
    //console.info(stu.name,stu.age);
  32.  
    $.each(stu, function(a, b) {
  33.  
    console.info(b);
  34.  
    })
  35.  
    })
  36.  
    })
学新通

2、$.trim():去掉字符串两端的空格

  1.  
    $(function() {
  2.  
    // 1.2$.trim() 去除前后的空格
  3.  
    var str = " zking ";
  4.  
    console.info(str.length);
  5.  
    console.info($.trim(str).length);
  6.  
    })

3 type() 判断值类型

  1.  
    console.log($.type("hhhh"))//String
  2.  
    console.log($.type(jQuery))//function

4.$.isArray():判断是否是数组

  1.  
     
  2.  
    $(function() {
  3.  
    // 1.4 $.isArray() 判断是否是数组
  4.  
    var stu = {"name": "张三","age": 38};
  5.  
    var stus = [{"name":"张大三","age":38},{"name":"张小三","age":39}];
  6.  
    console.info($.isArray(stu));
  7.  
    })
  8.  
     

5. parseJSON() 将满足json定义的字符串转换成一个对象或者对象数组

  1.  
    var stu = '["aa","bb","cc"]';
  2.  
     
  3.  
    // 通过parseJSON转换
  4.  
     
  5.  
    var stuArr = $.parseJSON(stu)

6.isFunction() 判断是否是一个函数 

console.log($.isFunction())

 jQuery属性和CSS

  1.  
    //1.属性
  2.  
    //attr() 获取某个标签属性的值,或设置某个标签属性的值
  3.  
    //获取
  4.  
    console.log($("#oUl1>li:first").attr("id"))
  5.  
    //设置
  6.  
    $("#oUl1>li:first".attr("id","hh"))
  7.  
    //2 removeAttr() 删除某个标签属性
  8.  
    $("#oUl1>li:first".removeAttr("id")
  9.  
    //3 addClass() 给某个标签添加class属性值
  10.  
    $("#oUl1>li:eq(1)").addClass("demo");//demo设置的样式
  11.  
    //4 removeClass() 删除某个标签class属性值
  12.  
    $("#oUl1>li:eq(1)").removeClass("demo1");
  13.  
    //5 prop() 和 attr() 类似,区别在于prop用于属性值为Boolean类型的情况下
  14.  
    console.log($("#oUl1>li:first").prop("id"))
  15.  
    //6 html() 获取某一个标签体内容(该标签体中可以包含子标签)
  16.  
    console.log($("#sid").parent().html())
  17.  
    //7 text() 获取某一个标签体内容(该标签体不能包含子标签)
  18.  
    console.log($("#sid").parent().text())
  19.  
    //8 val() 获取或设置表单元素中的value值
  20.  
    console.log($("#sid").parent().val())
  21.  
     
  22.  
    //CSS
  23.  
    // 获取表格中第一行tr的背景颜色
  24.  
    // 复合属性:有多个值(背景,是否平铺等等)
  25.  
    console.log($("table>tbody>tr:first").css("backgroundColor"))
  26.  
    //位置
  27.  
    offset() 获取指定标签相对整个大容器(body)的一个相对距离(top left)
  28.  
     
  29.  
    console.log($("#demo3").offset().left)
  30.  
    console.log($("#demo3").offset().top)
  31.  
    position() 获取指定标签相对于父标签的位置
  32.  
     
  33.  
    console.log($("#demo3>div").position().top)
  34.  
    console.log($("#demo3>div").position().left)
  35.  
    scroll() 获取滚动条被滚去的距离
  36.  
     
  37.  
    $(document).scroll(function() {
  38.  
    console.log($(this).scrollTop());
  39.  
    });
学新通

这篇好文章是转载于:学新通技术网

  • 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
  • 本站站名: 学新通技术网
  • 本文地址: /boutique/detail/tanhhheaga
系列文章
更多 icon
同类精品
更多 icon
继续加载