自学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对象返回

<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>

在这里插入图片描述

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值