JQuery入门到精通教程(二)

简介: JQuery入门到精通教程(二)

JQuery入门到精通教程(二)


一,jQuery常用工具操作数组

1. $.each():遍历数组、对象、对象数组中的数据
2.$.trim():去除字符串两边的空格
3.$.type(obj):得到数据的类型
4.$.isArray(obj):判断是否是数组
5.$.isFunction(obj):判断是否是函数
6.$.parseJSON(obj):解析json字符串转换为js对象/数组

代码如下(示例):

<script type="text/javascript">
      $(function() {
        1对象
        var ob = {"id":"0","name":"彪悍的彪","pas":"123"};
        $.each(ob,function(k,v){
        console.log(k,v)
        });
        2数组
        var ob = ["id","0","name","彪悍的彪","pas","123"];
        $.each(ob,function(k,v){
          // console.log(k,v)
        });
        3对象数组
        var ob = [{"id":"0","name":"彪悍的彪","pas":"123"},{"id":"1","name":"彪悍的彪","pas":"123"}];
        $.each(ob,function(k,v){
          console.log(k,v)
        });
        4去除左右空格
        var aj = "    e   iooi"
        console.log($.trim(aj).length)
        5类型判断
        var kk="”"
        var kk=123.2
        console.log($.type(kk))
        6数组的判断
        console.log($.isArray(ob))
        7函数判断
        console.log($.isFunction(1))
        6.$.parseJSON(obj):解析json字符串转换为js对象/数组
        var ob = '["id","0","name","彪悍的彪","pas","123"]';
        console.log($.type(ob))//字符串
        var obj = $.parseJSON(ob)
        console.log($.type(obj))//数组
  })
  </script>

二、jQuery属性和CSS

1.attr():获取某个标签属性的值,或设置某个标签属性的值
  2.removeAttr():删除某个标签属性
  3.addClass():给某个标签添加class属性值
  4.removeClass():删除某个标签class属性值
  5.prop():和attr()类似,区别在于prop用于属性值为Boolean类型的情况,比如多选
  6.html():获取某一个标签体内容(注意:该标签体中可以包含子标签)
  7.text():获取某一个标签体内容(注意:该标签体不能包含子标签)
  8.val():主要用户获取/设置输入框的值

代码如下(示例):

<script type="text/javascript">
      $(function() {
        1获取设置某个标签的值attr
        var img=$("img").attr("src")//获取到标签为img的src属性
        console.log(img)
        var img=$("img").attr({src:"images/男包.jpg"})//设置标签为img的src属性
        console.log(img)
        var img=$("img").attr("title",function(){
          return this.src
        })//设置标签为img的title设置为src
        console.log(img)
        2.removeAttr():删除某个标签属性
        var p=$("img").removeAttr("src")//删除标签为img的src属性
        console.log(p);
        3.addClass():给某个标签添加class属性值
        var p=$("div").addClass("pr")//为标签div增加class为pr属性
        console.log(p);
        4.removeClass():删除某个标签class属性值
        var p=$("div").removeClass("protected")//为标签img删除class为protected
        console.log(p);
        5.prop():和attr()类似,区别在于prop用于属性值为Boolean类型的情况,比如多选
        var img=$("img").prop("src")//获取到标签为img的src属性
        console.log(img)
        var img=$("img").prop({src:"images/男包.jpg"})//设置标签为img的src属性
        console.log(img)
        6.html():获取某一个标签体内容(注意:该标签体中可以包含子标签)
        var img=$("p").html()
        console.log(img)
        7.text():获取某一个标签体内容(注意:该标签体不能包含子标签)
        var img=$("p").text()
        console.log(img)
        8.val():主要用户获取/设置输入框的值
        var img=$("input").val()
        console.log(img)
        })
    </script>

三、利用jQuery实现全选框功能

思路:

功能1:将子复选框的选中状态与全选框转态一致,

功能2:当子复选框中某一个取消了选中时全选框要取消选中,当子复选框全部选中时全选框要选中

代码如下(示例):

// 全选框
    $(function() {
        $("#all").click(function() {
          $(".hobby").prop("checked", all.checked) //子复选框随全选狂变化
        });
        // 当自复选框全部选中时全选框才选中
        $(".hobby").click(function() {
          if ($(".hobby:checked").length== $(".hobby").length) {
            $("#all").prop("checked", true)
          } else {
            $("#all").prop("checked", false)
          }
        })
        })

总结

欢迎大家对不懂的地方私信

目录
相关文章
|
26天前
|
开发框架 JSON JavaScript
ASP.NET Core3.1实战教程---基于Jquery单文件上传
ASP.NET Core3.1实战教程---基于Jquery单文件上传
18 0
|
2月前
|
存储 JavaScript 前端开发
JQuery入门基础
JQuery入门基础
20 0
|
3月前
|
JavaScript 前端开发 开发工具
jQuery入门级别介绍及选择器的使用----详细介绍
jQuery入门级别介绍及选择器的使用----详细介绍
23 0
|
4月前
|
JavaScript 前端开发
JQuery入门到精通教程()
JQuery入门到精通教程()
28 0
|
4月前
|
JavaScript 前端开发 Java
jQuery入门&选择器
jQuery入门&选择器
|
4月前
|
JavaScript 前端开发 索引
jQuery入门&以及选择器
jQuery 是一个快速、简洁的 JavaScript 库,其设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。
28 0
|
4月前
|
存储 JavaScript 前端开发
jQuery 入门&选择器
jQuery 入门&选择器
32 0
|
5月前
|
存储 JavaScript 前端开发
JQuery(入门~选择器)
JQuery 是快速、简洁的JavaScript库,也就是写好的JS文件。
|
5月前
|
存储 JavaScript 前端开发
jQuery:入门
jQuery:入门
68 0
|
6月前
|
XML JSON JavaScript
jQuery入门到实战
jQuery入门到实战
jQuery入门到实战

相关产品

  • 云迁移中心
  • 相关实验场景

    更多