jQuery_02

2023-11-30 30

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： jQuery_02

1.工具下的类方法使用

1.1js与jQuery转换

<head>
<script src="js/jquery-3.6.4.js"></script>
</head>
<script>
    $(function(){
      $("#obtn").click(function(){
                //jquery转化为原生态js对象处理
                //根据数组下标获取
        //var val=$("#oInput")[0].value;
                //根据get方法来转换
                var val=$("#oInput").get(0).value;
        console.log(val);
       })
       })
        $(function(){
      $("#obtn").click(function(){
               //原生态js对象转换成jQuery对象处理
         var oInput=document.getElementById("oInput");
               //将一个原生态js对象传入$()内直接可以转换
         console.log($("oInput").val());
      })
       })
       })
</script>
    <input type="text" id="oInput">
    <button id="obtn">点击</button>

1.2.$对象中的类方法

1.2.1.each()方法遍历元素的方法


<script>
    $(function(){
      $("#obtn").click(function(){
            //使用方法：直接调用或通过$()返回的对象调用
            //使用$.each(obj,function(){})方法的形式来遍历输出  对象   对象数组
            //数组的定义
       var arr=["aa","bb","cc","dd"];
       $.each(arr,function(a,b){
           console.log(a,b,arr[a]);
       })
       })
    $(function(){
      $("#obtn").click(function(){
      //对象的定义
       var stu={
        "name":"李永安",
        "sex":"男",
        "age":18
       };
       })
    $(function(){
      $("#obtn").click(function(){
            //a代表属性名称   b代表属性值
       $.each(stu,function(a,b){
        console.log(a,b);
       });
       })
    $(function(){
      $("#obtn").click(function(){
            //对象数组
       var stus=[
        {
          "name":"李永安",
            "sex":"男",
            "age":18
        },
        {
              "name":"aa",
          "sex":"男",
          "age":18
        },
        {
          "name":"bb",
          "sex":"男",
          "age":18
        }
       ];
       })
    $(function(){
      $("#obtn").click(function(){
       $.each(stu,function(index,obj){
            // conloge.log(index,obj)
                  //name  属性名称   value  属性值
         $.each(obj,function(name,vlue){})
                 console.log(index,name,value,obj[name])  
         });
       })
</script>

1.2.2.type()方法获取属性类型

console.log($.type(123));
nsole.log($.type(new Date()));
console.log($.isFunction(method));
console.log($.isArray(arr));

1.2.3.trim()方法去除左右空格

var str="    a  bc   ";
console.log(str.length);
console.log($.trim(str).length);

1.2.4.paeseJSON 用户后台查到的数据传输给客户端，客户拿到数据进行解析，是否满足JSON格式；AJAS 无刷新技术

    $(function(){
      $("#obtn").click(function(){
             var mystul={"name":"张三"};
       console.log($.type(mystul));
       var mystu2="{\"name\":\"张三\"}";
             console.log($.type(mystul2));
             //作用：将一个满足JSON字符串的数据转成对应的对象或者对象数组
       var newstu=$.parseJSON(mystu2);
       console.log($.type(newstu))
             })

2.css属性和样式设置

2.1.attr():获取某个标签属性的值，或设置某个标签属性的值


 <head>
      <script src="js/jquery-3.6.4.js"></script>
    <style>
    .abc{
      border: 10px solid red;
    </style>
  </head>
     <body>  
         $("#btn1").click(function(){
         console.log($("img").arrt("src"));
         $("img").attr("src","img/羽绒服.jpg");
     <script>
        <img src="img/登山鞋.jpg" alt="" title="服装">
    <button id="btn1">btn1</button>
      </script>
      </body>

2.2.removeAttr():删除某个标签属性



 <head>
      <script src="js/jquery-3.6.4.js"></script>
    <style>
    .abc{
      border: 10px solid red;
    </style>
  </head>
     <body>  
         $("#btn1").click(function(){
         console.log($("img").arrt("src"));
         $("img").removeAttr("title");
     <script>
        <img src="img/登山鞋.jpg" alt="" title="服装">
    <button id="btn1">btn1</button>
      </script>
      </body>

2.3.addClass():给某个标签添加class属性值

 <head>
      <script src="js/jquery-3.6.4.js"></script>
    <style>
    .abc{
      border: 10px solid red;
    </style>
  </head>
        $("#btn1").click(function(){
               $("img").addClass("abc");
        })
        <img src="img/登山鞋.jpg" alt="" title="服装">
    <button id="btn1">btn1</button>

2.4.removeClass():删除某个标签class属性值

  <head>
      <script src="js/jquery-3.6.4.js"></script>
    <style>
    .abc{
      border: 10px solid red;
    </style>
  </head>
    <script>
    $(function(){
      $("#obtn").click(function(){
            $("img").removeClass("abc");
            })
    </script>
    <input type="text" id="oInput">
    <button id="obtn">点击</button>

2.5.prop():和attr()类似，区别在于prop用于属性值为Boolean类型的情况




  <head>
      <script src="js/jquery-3.6.4.js"></script>
    <style>
    .abc{
      border: 10px solid red;
    </style>
  </head>
    <script>
    $(function(){
      $("#obtn").click(function(){
                $("img").prop("src","img/羽绒服.jpg");
        $("input:checkbox").prop("checked",true);
        $("input:checkbox").attr("checked",true);
            })
    </script>
    <input type="text" id="oInput">
    <button id="obtn">点击</button>

2.6.html():获取某一个标签体内容(注意:该标签体中可以包含子标签)

  <head>
      <script src="js/jquery-3.6.4.js"></script>
    <style>
    .abc{
      border: 10px solid red;
    </style>
  </head>
    <script>
    $(function(){
      $("#obtn").click(function(){
                console.log($("odiv").html());
            })
    </script>
    <input type="text" id="oInput">
    <button id="obtn">点击</button>
        <div id="odiv" style="width: 100%; height:100px; border: 1px solid red;"></div>

2.7.text():获取某一个标签体内容(注意:该标签体不能包含子标签)

    <head>
      <script src="js/jquery-3.6.4.js"></script>
    <style>
    .abc{
      border: 10px solid red;
    </style>
  </head>
    <script>
    $(function(){
      $("#obtn").click(function(){
                console.log($("odiv").text());  
            })
    </script>
    <input type="text" id="oInput">
    <button id="obtn">点击</button>
        <div id="odiv" style="width: 100%; height:100px; border: 1px solid red;"></div>

2.8.val():主要用户获取/设置输入框的值



  <head>
      <script src="js/jquery-3.6.4.js"></script>
    <style>
    .abc{
      border: 10px solid red;
    </style>
  </head>
    <script>
    $(function(){
      $("#obtn").click(function(){
               // console.log($("odiv").val());
               // 获取值
                  console.log($("#username").val());
               // 设置值
          $("#username").val("你好");
            })
    </script>
    <input type="text" id="oInput">
    <button id="obtn">点击</button>
        <div id="odiv" style="width: 100%; height:100px; border: 1px solid red;"></div>
        <input type="text" id="username" value="1232432">

3.样式设置

  <head>
      <script src="js/jquery-3.6.4.js"></script>
    <style>
    .abc{
      border: 10px solid red;
    </style>
  </head>
  <body>
    <script>
    $(function(){
      $("#btn1").click(function(){
         //console.log($("img").css("width"));  
                 //设置一个属性
         $("img").css("width","50px");
                 //设置多个属性
           $("img").css({"width":"50px","height":"300px"});
       }) 
  <img src="img/登山鞋.jpg" alt="" title="服装">
  <button id="btn1">btn1</button>