jquery周末作业

jQuery:

jQuery是一个js库免费开源易用,提供了我们开发中常用到的操作DOM的API,解决了我们使用js操作DOM常遇到的一些问题,强大的选择器,简化我们的操作。

jQuery的特点:

a. 轻量级b. 富应用c. DOM操作、事件处理、运动动画、AJAXd. 跨浏览器(不再考虑浏览器兼容)e. 链式调用f. 隐式迭代g. 丰富的插件库 。

jQuery基本使用:

官网下载: https://code.jquery.com/主版本号3是不兼容ie9之前的浏览器主版本号1是兼容所有浏览器。

引入jQuery:

路径引入 <script src='文件路径'></script> 引入在线资源 <script src = "https://code.jquery.com/jquery-1.12.4.js"></script>

入口函数:

$(document).ready(function(){

//类似于原生js的window.onload

});   【简写为:$(function(){ });】

和window.onload的区别:

区别一:书写个数不同

【Js入口函数只能出现一次,出现多次会存在事件覆盖的问题。 jQuery的入口函数,可以出现任意多次,并不会存在事件覆盖问题。】

区别二:执行时机不同

【Js入口函数是在所有的文件资源加载完成后,才执行。这些文件资源包括:页面文档、外部的js文件、外部的css文件、图片等。 jQuery的入口函数,是在文档加载完成后,就执行。文档加载完成指的是:DOM树加载完成后,就可以操作DOM了,不用等到所有的外部资源都加载完成。】

扫描二维码关注公众号,回复: 5990478 查看本文章

DOM对象和jQuery对象:

jQuery对象:      jQuery选择器拿到DOM对象后又对其做了封装,让其具有了jQuery方法的jQuery对象,说白了,就是把DOM对                             象重新包装了一下。

jQuery对象转换为DOM对象:

第一种方式:var btn1 = $btn[0];

【此时就把jQuery对象$btn转换成了DOM对象btn1 (推荐使用此方式)第二种方式】

var btn2 = $btn.get(0);【此时就把jQuery对象$btn转换成了DOM对象btn2】

DOM对象转换为jQuery:

使用$(domObject)包裹就可以包装成一个jQuery对象

jQuery选择器:

基本选择器:"#"【Id选择器】

例如:$(“#btnShow”).css(“color”, “red”);选择id为btnShow的一个元素(返回值为jQuery对象)

"." 【类选择器】

例如:(“.liItem”).css(“color”, “red”);选择含有类liItem的所有元素

"element"【标签选择器】

例如:$(“li”).css(“color”, “red”);选择标签名为li的所有元素

"空格"【层级选择器(后代选择器)】

例如:$(“#j_wrap li”).css(“color”, “red”);选择id为j_wrap的元素的所有后代元素li

">"【子代选择器】

例如:$(“#j_wrap > ul > li”).css(“color”, “red”);选择id为j_wrap的元素的所有子元素ul的所有子元素li

猜你喜欢

转载自blog.csdn.net/qq_40104992/article/details/89419760