jQuery框架基础（介绍、使用、获取元素与转换、常用API）

您所在的位置：网站首页 › jquery获取div的css值 › jQuery框架基础（介绍、使用、获取元素与转换、常用API）

jQuery框架基础（介绍、使用、获取元素与转换、常用API）

2023-03-14 15:36| 来源: 网络整理| 查看: 265

一、介绍

1. 首先理解库的概念：

是一个封装好的特定的集合，从而封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show等等

可以理解为仓库：可以把东西放在这个仓库，找东西时候只需要进入仓库即可

2. 优势开源、免费轻量级：核心文件kb单位兼容所有主流浏览器链式编程、隐式迭代对事件、样式、动画支持，大大简化了DOM操作支持第三方插件扩展开发树形菜单、日期控制、轮播图等等二、使用 1. 下载：

jQueryjQuery: The Write Less, Do More, JavaScript Libraryhttps://jquery.com/

2. 引入到文件 3. 可以通过一个jQuery方法进行测试

$('隐藏对象').hide();

4. jQuery入口函数

等同于原生JS的DOMContentLoaded

等待页面的js，css，图片等外部文件加载完成再去执行

$(function(){ . . . //页面的DOM加载完成的入口 }); 4. $理解与获取元素

$是jquery的一个别称，在代码中使用jquery代替$$是jquery的顶级对象，相当于js中的window$('') 引号里包含获取的元素 jQuery(function () { // alert(11); // $("div"). hiden(); jQuery("div").hiden(); });

5. jQuery对象和DOM对象的区别

用原生js获取到的元素元素就是DOM对象jquery获取到的元素就是jquery元素 jQuery对象本质：利用$对DOM对象包装后产生的对象（伪数组的形式存储） // 1.DOM对象：用原生js获取过来的对象就是dom对象那个 var myDiv = document.querySelector("div"); console.dir(myDiv); // 2.jQuery获取 $("div"); //$("div");是一个jquery对象 console.dir($("div")); 区别获取到的元素对象类型不同各自的样式修改：不可互换 //区别操作 var myDiv = document.querySelector("div"); // dom对象操作 myDiv.style.display = "none"; //jQuery对象操作 myDiv.hide(); //报错 6. DOM对象与jQuery对象转换

原生的一些属性和方法jquery没有给我们封装，想要使用这些属性和方法需要把jquery对象转换伪DOM对象才能使用DOM转jQuery可以直接使用$()包裹jQuery转DOM应该根据索引由于jq获取的对象以伪数组形式存储index是索引号 //DOM转换为jQuery对象 var myvideo = document.querySelector("video"); $(myvideo); //直接用$转化 //jQuery对象转换为DOM对象 //直接使用$('')包裹抓换 $('div')[index] $('div').get(index) 三、常用 API 查询手册：

jQuery API 1.11 中文文档 | jQuery API 在线手册jQuery API 1.11.3 中文手册最新版，在线地址：http://jquery.ttybz.comhttp://jquery.yanzhihui.com/index.html

1. jQuery选择器

$(function () { console.log($(".nav")); console.log($("ul li")); }); 2. 隐式迭代

遍历内部的DOM元素非过程就叫做隐式迭代

jQuery：给匹配到的所有元素进行循环遍历，执行对应的方法，而不用循环

可以理解为获取到所有元素可以直接使用样式

这里有几个字这里有几个字这里有几个字这里有几个字 $(function () { // 1.获取四个div console.log($("div")); // 2.注意jquery不能使用style：此时给四个div设置背景色 $("div").css("background", "blue"); $("div").css("color", "white"); // 隐式迭代：把匹配到的所有元素进行遍历循环 }); 3. 筛选选择器基础筛选选择器

$(function () { $("li").css("color", "black"); $("ul li:first").css("background", "red"); //第一个 $("ul li:last").css("background", "green"); //最后一个 $("ul li:eq(2)").css("color", "red"); //根据下标得到jquery指定对象并执行 $("ol li:odd").css("background", "yellow"); //奇数 $("ol li:even").css("background", "purple"); //偶数 });

筛选重点：类似于获取节点操作方式（）注意括号参数可以获取到指定元素

$(function () { // 1.查找父亲 console.log($(".son").parent()); //直接找到父级(亲爸爸) // 2.查找孩子 $(".nav").children("p").css("color", "red"); //只获得亲儿子 $(".nav").find("p").css("color", "green"); //会获得所有子孙后代 //3.查找兄弟：此处设置ul包含多个li结构，其中一个li设置类名items $("ol .items").siblings("li").css("color", "red"); //选择除了自己的所有兄弟 //4.查找指定下标元素：此处设置ul包含多个li结构 $("ul li").eq(1).css("color", "blue"); //此处方便直接修改添加变量 }); 选择器案例 - 下拉菜单显示

$(function () { // 鼠标经过：li的ul显示 $(".nav>li").mousemove(function () { $(this).children("ul").show(); }); $(".nav>li").mouseout(function () { $(this).children("ul").hide(); }); });

后期替换的操作方法：切换与滑进、滑出切换效果：使用一个stop方法停止上一次动画效果

$(function () { // 新的houver时间切换效果 $(".nav>li").hover( function () { // 动画队列机制：先暂停上一次动画再去执行下一次动画 // 方法必须写在动画前面 $(this).children("ul").stop().slideToggle(); } ); }); 页面分析：鼠标移动上去触发显示下拉，鼠标移除隐藏代码分析：显示隐藏方法太生硬于是采用滑进滑出效果获取元素鼠标移动上去事件：设置显示： show（）方法获取元素鼠标移动上去事件：设置隐藏： hide（）方法 4. 排他思想：主要用兄弟元素获取+隐式迭代点击点击点击点击点击点击点击 $(function () { $("button").click(function () { // 1.当前的元素变换背景颜色 $(this).css("background", "red"); // 2.其余兄弟去掉背景颜色 $(this).siblings("button").css("background", ""); }); }); 5. 以上总结案例:tab栏操作

$(function () { // 1.鼠标经过左侧li $("#left li").click(function () { // 得到当前li的this下标 var index = $(this).index(); console.log(index); // 3.让右侧盒子相应索引号显示 /* $(".content div").eq(index).show(); // 4.其他兄弟隐藏 $(".content div").eq(index).siblings().hide(); */ // 5-直接链式解决代码繁杂 $(".content div").eq(index).show().siblings().hide(); }); }); 页面效果：点击哪个标签就会显示哪个图片代码解析: 首先布置静态页面获取元素设置点击事件获取到当前获取到的元素的下标设置显示对应下标的图片并隐藏所有兄弟元素 6. 样式操作修改简单样式修改直接使用样式方法 // 1.简单样式修改 console.log($("div").css("width")); //返回原始值 $("div").css("width", "300px"); //进行修改 $("div").css(height, "300"); //报错属性名必须添加引号 $("div").css("width", 500); //无报错：如果后面的值是数字可以不用引号也不用单位 $("div").css({ width: 400, height: 400, backgroundColor: "red", }); 复杂样式修改：使用类型名操作：类似于DOM中的className（类名） // (1)添加类:addClass $("div").addClass("con"); // (2)添删除类:removeClass $("div").removeClass("con"); // (3)切换类:toggleClass $("div").toggleClass("con"); var div = document.querySelector("div"); div.onclick = function () { // 特点：calssName会直接修改原来的类名： // 如果要保留：赋值的内容就是在原先的类名基础上添加类名 this.className = "one change"; };

【本文地址】

jQuery框架基础（介绍、使用、获取元素与转换、常用API）

jQuery框架基础（介绍、使用、获取元素与转换、常用API）

今日新闻

推荐新闻