jQuery入门(一)---jQuery初体验(与原生js对比)

it2024-12-17  13

jQuery入门(一)---jQuery初体验(与原生js对比)

1、体验jquery2、什么是jquery?3、如何使用jQuery?4、jquery入口函数与window.onload入口函数的区别5、$是什么?6、什么是dom对象?什么是jQuery对象?6.1 dom对象6.2 jQuery对象6.3 jQuery 对象长什么样?6.4 dom对象转换为jQuery对象6.5 jQuery对象转换为dom对象6.5.1 使用下标取出来6.5.2 使用jQuery的方法 get() 7、jQuery文件结构

1、体验jquery

框架: <input type="button" value="设置边框" id="btnOne"/> <input type="button" value="设置文本" id="btnTwo"/> <div></div> <div></div> <div></div> 原生js写法: //入口函数 window.onload=function(){ //1 先要获取对应元素 var btnOne = document.getElementById('btnOne'); var btnTwo = document.getElementById('btnTwo'); var divs = document.getElementsByTagName('div'); //2 给btnOne按钮设置点击事件 btnOne.onclick = function(){ for(i=0;i<divs.length;i++){ divs[i].style.border = '1px solid red'; } } btnTwo.onclick = function(){ for(i=0;i<divs.length;i++){ divs[i].style.textContent = '我是设置的文本'; } } //再添加一个入口函数,此时后面的这个函数会覆盖前面的入口函数 window.onload = function(){ console.log('我又是一个入口函数'); } js缺点: 1、不能添加多个入口函数(window.onload),若添加了多个,后面的会覆盖前面的 2、原生js的api名字太长难记 3、原生js有点时候代码冗余 4、原生js中有些属性和方法有浏览器兼容问题,如textContent和innerhtml 5、原生js容错率较低,前面的代码出了问题,后面的代码执行不了 jQuery写法: //入口函数 $(document).ready(function(){ //设置边框 $('#btnOne').click(function(){ $('div').css('border','1px solid red'); }); //设置文本 $('#btnTwo').click(function(){ $('div').text('我是设置的文本'); }) }) //第二个入口函数 $(document).read(function(){ console.log('我又是一个入口函数'); }) //jQuery优势: 1、可以写多个入口函数 2、jQuery的api名字容易记忆 3、jQuery代码简洁(隐式迭代) 4、jQuery帮我们解决了浏览器兼容性问题 5、容错率较高,前面的代码出了问题,后面的代码可以执行

2、什么是jquery?

封装了很多方法的JavaScript库

3、如何使用jQuery?

(1)引入jquery文件(官网下载文件) <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

(2)写一个入口函数(可以写多个入口函数)

方法一 : $(document).ready(function( ){ $('div').width(100).height(100).css('backgroundColor', 'red').text('哈哈'); //链式编程 }) 方法二 : $ (function(){ $('div').width(100).height(100).css('backgroundColor', 'red').text('哈哈'); })

(3) 找到要操作的元素(jQuery选择器),执行相应操作。

4、jquery入口函数与window.onload入口函数的区别

(1) window.onload入口函数不能写多个,但jQuery入口函数可以。 (2) 执行时机不同:jQuery入口函数要比window.onload入口函数入先执行, 因为jQuery入口函数要等待页面上的dom树加载完成后执行, window.onload入口函数要等待页面上所有资源(dom树,外部css,js连接,图片)都加载完毕后执行

5、$是什么?

+ $是一个函数,如果报这个错,$ is not defined,就说明没有引入jQuery文件。 +参数传递不同,效果也不一样。 *如果参数传递的是一个匿名函数----入口函数 $(function(){ }); *如果参数传递的是一个字符串----选择器 / 创建一个标签 $('#one') id为one的选择器 $('<div>啦啦啦,我是一个div标签</div>'); *如果参数是dom对象,那他就会把dom对象转换为jQuery对象 $(dom对象);

6、什么是dom对象?什么是jQuery对象?

6.1 dom对象

元素js选择器获取到的对象,如 var btnOne = document.getElementById('btnOne'); 特点:只能调用dom方法或属性,不能调用jQuery的属性或方法 var btnOne = document.getElementById('btnOne'); //dom对象可以调用dom的属性和方法 √ btnOne.style.backgroundColor = ' red ' ; //dom对象不能调用jQuery的属性或方法 × btnOne.css('backgroundColor' , 'green' );

6.2 jQuery对象

利用jQuery选择器获取到的对象 特点:只能调用jQuery的方法或属性,不能调用原生js dom的属性和方法 var $btnOne = $( '#one' ); //jquery对象能调用jQuery的属性或方法 √ btnOne.css('backgroundColor' , 'green' ); //jQuery对象不可以调用dom的属性和方法 × btnOne.style.backgroundColor = ' red ' ;

6.3 jQuery 对象长什么样?

jQuery 对象:(伪数组,jQuery对象就是dom对象的一个包装集) var $btnOne = $( '#one' ); console.log($btnOne); ---> 普通对象: var btnOne = document.getElementById('one'); console.log(btnOne);

6.4 dom对象转换为jQuery对象

var div1 = document.getElementById('one'); var $div1 = $(div1); console.log($div1);

6.5 jQuery对象转换为dom对象

6.5.1 使用下标取出来

var $divs = $('div'); var div1 = $divs[0]; console.log(div1);

6.5.2 使用jQuery的方法 get()

var $divs = $('div'); var div2=$divs.get(1); console.log(div2);

7、jQuery文件结构

其实是一个自执行函数 (function(){ window.jQuery = window. $ = jQuery; }()) ; 引入一个js文件,是会执行js文件中的代码jQuery文件是一个自执行文件,执行这个jQuery文件中的代码,其实就是执行这个自执行函数这个自执行文件就是给window对象添加一个jQuery属性和$属性 和 j Q u e r y 是 等 价 的 , 是 一 个 函 数 。 c o n s o l e . l o g ( w i n d o w . j Q u e r y = = = w i n d o w . 和jQuery是等价的,是一个函数。 console.log ( window.jQuery===window. jQueryconsole.log(window.jQuery===window. ); true
最新回复(0)