自学jQuery必看的基础知识总结【一】

文章目录

入口函数的四种写法
解决jQuery冲突问题

冲突问题描述
解决冲突方法一-------释放$的使用权
解决冲突方法二------自定义一个访问符号

jQuery的核心函数

jQuery接收的几种参数

入口函数的四种写法

推荐使用第三种

 //第一种
$(document).ready(function(){
   alert("我是第一个");
});
//第二种
jQuery(document).ready(function(){
  alert("我是第二个");
 });
//第三种
$(function(){
  alert("我是第三个");
});
//第四种
jQuery(function(){
  alert("我是第四个");
});

解决jQuery冲突问题

冲突问题描述

假如存在一个js文件，命名为text.js,其内容如下

var $ = 1;

将该文件引入使用了jQuery的html文件中

<script src="../jquery.js"></script>
<script src="../text.js"></script>
<script>  
    $(function(){
    alert("我是第一个");
  });
</script>

以上代码再浏览器运行后并不会出现弹出框，这是因为是顺序执行的，即 text.js 中的 $符号 覆盖了 jquery.js 中的 $符号

//换个位置
<script src="../text.js"></script>
<script src="../jquery.js"></script>
<script>  
    $(function(){
    alert("我是第一个");
  });
</script>

以上代码运行浏览器能显示弹出框

解决冲突方法一-------释放$的使用权

注意：
（1）释放操作必须在编写其他jQuery代码之前。
（2）释放之后就不能再使用$符号，改为使用jQuery

<script src="../jquery.js"></script>
<script src="../text.js"></script>
<script>  
  //1、释放$的使用权
  jQuery.noConflict();
  //使用jQuery
  jQuery(function(){
    alert("我是第一个");
  });

</script>

解决冲突方法二------自定义一个访问符号

注意事项同方法一

<script src="../jquery.js"></script>
<script src="../text.js"></script>
<script>  
  //2、自定义一个访问符号
  var jq = jQuery.noConflict();
  jq(function(){
    alert("我是第一个");
  });
</script>

jQuery的核心函数

$() 就是jQuery的核心函数

jQuery接收的几种参数

（1）接收一个函数
（2）接收一个字符串：可以是字符串选择器（返回一个jQuery对象，对象中保存了找到的DOM元素）；可以是一个代码片段（返回一个jQuery对象，对象中保存了创建的DOM元素）
（3）接收一个DOM元素：会被包装成一个jQuery对象返回

扫描二维码关注公众号，回复： 10713766 查看本文章

<body>
  <div class="box1"></div>
  <div id="box2"></div>
  <p>ppppp</p>
</body>
<script src="../jquery.js"></script>
<script>  
  //1、接收一个函数
  $(function(){
    alert("1");
  })

  $(function(){
    //2、接收一个字符串
      //2.1 接收一个字符串选择器
      //返回一个jQuery对象，对象中保存了找到的DOM元素
      var box1 = $(".box1");
      var box2 = $("#box2");
      console.log(box1);
      console.log(box2);
      //2.2 接收一个代码片段
      //返回一个jQuery对象，对象中保存了创建的DOM元素
      var $span = $("<span>hahahah</span>");
      console.log($span);
      //将创建的DOM元素追加到box2中
      box2.append($span);
      
    //3 接收一个DOM元素
    //会被包装成一个jQuery对象返回
    var p = document.getElementsByTagName("p")[0];
    console.log(p);
    var $p = $(p);
    console.log($p);     
  })
</script>