Jquery——Day1(Jquery的风格方式、与Javascript的区别)

news/2024/7/10 23:10:25 标签: jquery, javascript, , 解决冲突的方式

首先,我们已经明白,

(1)Jquery=Javascript(JS

(2)$(function(){});===jquery(function(){});

即"$===jQuery"


1、window.onload和$(document).ready()两个方法的区别

(1)在Javascript在页面加载时,需要使用window.onload

  注意:a、必须等待页面全部加载完毕(包括图片),在执行包裹代码;

b、只能执行一次,如果有第二次,则第一次就会被覆盖;

c、无简写方式


(2)在Jquery页面加载时,使用的是$(document).ready()

  注意:a、在DOM结构加载完毕时,就可以执行包裹代码;

b、可以执行多次,且后边的不会覆盖前边的;

c、有简写方式,如“$(function(){})”


2、解决Jquery与其他的冲突

<script type="text/javascript" src="base.js">

<script type="text/javascript" src="jquery.js"></script>

(1)jQuery在其他之后导入

在这种条件下,“$”的所有权归jQuery所有,base由于冲突会失去作用。

解决办法:采用noConflict()方法解决冲突。

javascript">	jQuery.noConflict();    //将$所有权剔除
	var $$=jQuery;
	$(function(){
		alert($('#box').get(0));
		alert($$('#box').width());
	});


    (2)jQuery在其它之前导入

在这种情况下,“$”的所有权归base所有,即jQuery可以直接用jQuery对象调用,也可以用$$代替jQuery。

javascript">	var $$=jQuery;
	$(function(){        //这里是base的$
		alert($('#box').get(0));     //这里是base的$
	        alert($$('#box').width());   //这里是jQuery的$
	});

http://www.niftyadmin.cn/n/1659429.html

相关文章

Vue实现tab导航栏,支持左右滑动

本文主要介绍&#xff1a;利用Vue实现tab导航栏&#xff0c;并且通过flex布局实现左右滑动&#xff0c;计算按钮的位置&#xff0c;当点击第一屏展示的最后一个且还有元素未展示时&#xff0c;自动滑动显示出未显示的元素。 tab导航栏布局&#xff1a; <section class&quo…

Jquery——Day1(Jquery基本选择器+过滤选择器+表单选择器+表单过滤器)

A、jQuery常规选择器&#xff0c;大体上来讲&#xff0c;简单选择器、进阶选择器、高级选择器 1、简单选择器&#xff0c;分为id选择器、元素&#xff08;标签&#xff09;选择器、类&#xff08;class&#xff09;选择器 与css进行对比&#xff0c;css是为了添加样式&#xf…

Vue+Swiper 滑动到最后一个卡片时继续滑动跳转页面

最近PM提出了这样的一个需求&#xff0c;卡片可以横向滑动&#xff0c;当滑动到最后一个卡片&#xff0c;且还在滑动时&#xff0c;要跳转到另一个页面。这是就需要把握一个范围&#xff0c;当超过这个范围时&#xff0c;就进行跳转&#xff0c;否则不跳转。 1.首先通过swiper…

Jquery——Day2(基础DOM和css操作)

DOM(Document Object Model)&#xff0c;意思就是文档对象模型。一般而言&#xff0c;DOM操作分为3个方面&#xff0c;即DOM-CORE(核心)、HTML-DOM、CSS-DOM&#xff0c;在javascript中的DOM-CORE表示getElementById()、getElementByTagName()、getAttribute()、setAttribute()…

webp→png:图片格式的优雅降级

背景&#xff1a; 项目中一直使用的图片格式是png&#xff0c;因为其无损压缩&#xff0c;分辨率高的同时体积相对也会大一些&#xff0c;在H5中&#xff0c;如果使用了大量图片&#xff0c;而且每一张图片体积都很大&#xff0c;几百K甚至几兆&#xff0c;那页面的性能会很低。…

Jquery——Day2(包裹节点、节点操作)

1、包裹节点wrap <div>节点</div>&#xff08;1&#xff09;利用 wrap()方法对之前的代码包裹&#xff08;1&#xff09;wrap(html)&#xff1a;向指定元素包裹一层html代码 &#xff08;2&#xff09;wrap(element)&#xff1a;向指定元素包裹一层DOM对象节点 &…

Jquery——Day2(基础事件)

在jquery中&#xff0c;加载事件采用$(document).ready()方法&#xff0c;用它来代替JavaScript中的window.onload方法。 二者的区别在于&#xff08;1&#xff09;执行时机上&#xff0c;window.onload必须在网页所有元素加载到浏览器后才执行即访问网页中的元素&#xff1b;…

Jquery——Day3(事件对象+事件冒泡+默认行为阻止)

1、事件对象 即event对象&#xff0c;通过处理函数默认传递接受。 //通过处理函数传递事件对象&#xff1b; $(function(){$("input").bind(click,function(e){alert("欢迎光临&#xff01;");}); });凡是事件&#xff0c;都包含有 属性和方法A、event.ta…