jQuery入门

最新推荐文章于 2024-07-04 10:38:01 发布

从此江山别

最新推荐文章于 2024-07-04 10:38:01 发布

阅读量94

点赞数 1

分类专栏： jQuery 文章标签： jQuery

本文链接：https://blog.csdn.net/weixin_43894722/article/details/84780172

版权

jQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

jQuery入门和一丢丢简单快捷键

直接上代码和一部分注释
入门

<body>
<div id="div1">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</div>
<div id="div2">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</div>
</body>
<script>
    /*var arr=[1,2,3,4];
    console.log(arr.length);
    console.log(arr.pop());//返回被删除的数据（末尾）
    console.log(arr.push(8));//返回新数组的长度；
    console.log(arr.shift());//删除数组头部元素，返回被删除元素；
    console.log(arr.unshift(10));//新增数组头部元素，返回被新元素；
    console.log(arr.reverse());//倒序
    console.log(arr.slice(0,-1));//截取
    console.log(document.getElementsByTagName("li"));返回HTML集合，是一个伪数组（有数组的属性，没有数组的方法）*/
    console.log(document.querySelectorAll("#div1 li"))
</script>

解决多库冲突

<script src="../../prototype.js"></script>
<script src="../../jquery-3.1.1.js"></script>
<script>
     var $j=jQuery.noConflict();
     /*方法一*/
    jQuery("#ccy").hide();
     /*方法二*/
    $j("#ccy").hide();
    /*方法三*/
    !function ($){
         $("#ccy").hide();
     }(jQuery);
     **与js比较**
     <head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #div1{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
    <!--$(document).ready(function(){});或者$(function(){})就绪函数
    js文档就绪函数和jQuery的区别：
    1.执行的时机不一样
        js的是等dom加载完毕，并且完全显示后执行
        jquery是等dom加载完之后即可执行（执行的时机会提前）
    2.js的文档就绪函数不能重复定义
        jQuery的可以重复定义
    3.js的没有简写方法
        jQuery的简写方案为$(function(){})；
    -->
</head>
<body>
    <div id="div1"></div>
    <button id="bu1">sf</button>
</body>
<script src="../../jquery-3.1.1.js">
    /*var btn = document.getElementById("bu1");
    var con = document.getElementById("div1");
    btn.onclick = function(){
        if(con.style.display!="none"){
            con.style.display="none";
        }else{
            con.style.display="block";
        }
    }*/
</script>
<script>
    /*js对象和jQuery对象是不能相互使用的*/
    var div1=$("#div1");
        $("#bu1").click(function(){
            div1.toggle();
        });
</script>

和js对象转换

<head>
    <meta charset="UTF-8">
    <title>js和jQuery对象的相互转换</title>
    <style>
        #div{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="div"></div>
    <button id="btn">Button</button>
</body>
<script src="../../jquery-3.1.1.js"></script>
<script>
    /*jquery 对象*/
    var jq = $("#btn");
    /*jquery转化js*/
    var js = jq[0];
    var js = jq.get(0);
    js.onclick=function(){

    };
    jq.click(function(){
       console.log(1);
    });
    var js=document.getElementById("btn");
    var jsDiv=document.getElementById("div");
    js.onclick=function(){
        jsDiv.style.display="none";
        /*js转化jquery   $()jQuery对象的加工厂   $=jQuery */
        var jqDiv=$(jsDiv);
        jqDiv.hide();
    }
</script>```

**几个简单的快捷键**
alt+上下方向键   快速移动
命名规则（驼峰命名法）：
1.所有的变量命名要有意义，看到名字就知道变量存储的数据
2.大驼峰  Person Animal Student Worker UniversityTeacher
3.小驼峰  name age height weight add show showInfo
4.全驼峰  PI ID
格式化：
ctrl alt l
ctrl shift f
代码缩进  Tab

今天就先到这了，我也是个初学者，以上都是在老师讲了的情况下自己跟着写的，有什么不对的地方或者建议请大胆的告诉我，大家一起共同进步，除非特殊情况今后几个月应该每天都会写点（节假日除外哈哈）。