我使用的是未压缩版本的jQ文件，你们可以使用压缩版的
什么是jQuery呢？
jq呢就是一个快速 、小型且功能丰富的JavaScript库,它使用一个在多种浏览器上工作易于使用的API
使得HTML文档便利和操作 事件处理 动画和Ajax等工作变得更加简单,随着多功能性和可扩展性的结合
jq改变了数百万人编写js的方式
<style> p{ 100px; height: 100px; margin-top: 20px auto; }</style> </head> <body> <input type="button" value="给盒子设置边宽" id="btn" /> <p></p> <p></p> <p></p> </body> <script src="jquery-3.5.1.js"></script> <script> $(document).ready(function(){ $("#btn").click(function(){ $("p").css("border","1px red solid"); }); });
jQ有哪些版本？之间的区别又有哪些？
所以简略说一下
官网可以下载所有的jQ文件，而这些jQ文件又有不同的版本号，适用于不同的浏览器
不同的版本号
JQuery 1.x 已经不更新了 支持老浏览器 IE6-8 Opera等
JQuery 2.x 已经不更新了 不支持浏览器
JQuery 3.x 正在更新中 不支持浏览器
每个版本有压缩和未压版的(压缩版有后缀min，想要查看源代码可以使用未压缩版的，所占空间较大)
压缩版的 是用于生产环境 实际开发过程
未压缩版的 适用于开发测试
什么是入口函数呢？入口函数有几种写法？jQ的入口函数与原生之间的区别又有哪些？
<script>
// 1.入口函数的第一种写法
/* $(document).ready(function(){
console.log("我是第一种入口函数的写法");;
}) */
// 第二种 简化版 使用较多
/* $(function(){
console.log("我是第二种入口函数写法");;
}) */
// 3.jQuery的入口函数与原生的区别
/* a.原生的入口函数只能写一个,如果写多个 后面的将前面的覆盖掉 前面的代码多不会执行
jQuery的入口函数可以写多个
b.执行时机
原生入口函数 等到所有的页面(dom树 外部的js文件 外部的css文件 图片)加载完毕后才会执行
jQ的入口函数可以写多个 */
window.onload = function(){
console.log("我是原生的入口函数");
}
$(function(){
console.log("我是jQ的入口函数");
})
</script>
接下来说一下"$"他到底是什么
// 1如果没有引入jq文件 那么就会报错 Uncaught ReferenceError : is not defined 那么说明一定是jq文件未引入 /* $(function(){ console.log(); }) */ //2. $从jQuery文件来的 那么它到底是什么？ /* (function(){ . })(window.Function(){ // 给window对象添加一个jq方法和$方法 对应的值是一个函数 window.jQuery = window.$ = jQuery; }) */ /* 3.script标签引入外部js的一个特点 如果引入外部的js文件 那么会不会在引入之后 就直接执行这个js文件里面的代码？ 会 那么对于jQuery也一样 jQuery文件是一个自执行函数 当我们引入jQuery文件的时候 就会自动执行 window.jQuery = window.$ = jQuery; 是不是也执行了？ */ // 引入jQuery文件后 直接把$ 和jQuery方法 作为属性给了window console.log(window); console.log($ === jQuery); // true console.log(window.$ === window.jQuery); //true // 入口函数 可以使用$ 也可以使用jquery jQuery(function(){ console.log(...); }) // 4.$既然是一个函数 那么它也可以传入多种参数 /* 如果传入的参数是一个匿名函数 那么$就是一个入口函数 如果传入的参数是一个字符串 那么$就是一个选择器获取元素 如果传入的参数是一个dom元素 那么$就是把这个DOM元素在转换成jQuery对象 */
DOM对象和jQuery对象转换和使用
<body>
<div class="box"id="first"></div>
<div class="box"id="one1"></div>
<div class="box"id="one1"></div>
<script src="./jquery-3.5.1.js"></script>
<script>
// 1 使用DOM元素(原生js的方法)给div添加属性
// 原生js选择器获取到的是dom对象 document.getElementsByClassName()
// 原生的DOM元素只能选用dom属性或者方法 不能调用jQuery的方法
var first= document.getElementById("first");
console.log(first);
// first.css("backgroundColor","green“); //报错 first.css is not a function
// first.style.backgroundColor = "green";
/* //2.使用jQuery对象
使用jQuery选择器获取都得是jQuery对象
只能调用jQuery的方法 不能调用原生的 */
var $first = $("first"); //获取到的是jQuery对象 保存jQuer1对象变量命名的时候最好使用$开头
console.log($first);
// $first.css("backgroundColor","green“); //jQuery对象调用jQuery方法
// $first.style.backgroundColor = "green"; // 保错 不能调用原生的方法或者属性
// 3.jQuery对象是什么？
// 根据特征来看 向数组 验证是不是数组
// jQuery 对象算是一个伪数组 不能调用数组里面的方法
console.log($first.__proto__ === Array.prototype); // false
console.log(Object.prototype.toString.call($first)); // [object Object]
// 4.DOM和jQuery对象的相互转换
// dom元素转换成jQuery对象 : 直接把dom作为参数传递给$方法
var $divFirst = $(first);
console.log($divFirst);
// 把jQuery对象转换成dom元素 直接使用下标取值 获取到的就是dom元素
$divs = $("div");
console.log($divs);
var divFirst = $divs[0];
console.log(divFirst);
// 调用jQuery的get方法 参数传索引
var divTwo = $divs.get(1);
console.log(divTwo);
</script>
设置文本和获取样式的方法
<style> .diva{ 100px; background-color: darkgray; border: 4px solid aqua; } </style> </head> <body> <button id="getbtn">获取文本</button> <button id="setbtn">设置文本</button> <input type="button" value="获取样式" id="getBtn1" /> <input type="button" value="设置样式" id="setBtn1" /> <div id="div1" id="box"> 我是div盒子 <p>我是一个p标签 <span>我是一个span标签</span> </p> </div> <div id="div1"> 我是div盒子 <p>我是一个p标签 <span>我是一个span标签</span> </p> </div> <div class="diva" style="height: 100px;"></div> <div class="divb" style="height: 100px;"></div> <div class="divc" style="height: 100px;"></div> <script src="./jquery-3.5.1.js"></script> <script> // text() 获取和设置文本的方法 // 可以获取到元素自生的文本 也可以获取到后代中元素中的文本 $(function() { $("getbtn").click(function() { var text = $(".div1").text(); console.log(text); // 获取全部的文本 console.log($("div").text()); //封装里面的迭代的方法 隐式迭代 }) // 2.设置文本 /* 只需要给text(参数) 加了参数后 就是给元素设置文本 会覆盖元素原有的方法 如果新设置的文本中包括了标签 那么他是不会解析标签的 当做文本内容来解读 */ $("#setbtn").click(function() { // 我要给box这个盒子设置文本 $("#box").text("<a>我是新设置的</a>"); }) // 样式的方法 // css用来获取或者设置样式的党发 $("#getBtn1").click(function() { // 获取div的样式 console.log($(".diva").css("height")); console.log($(".diva").css("border")); // 在所有的IE浏览器中 要写准确的样式 console.log($("diva").css("border-top-width")); console.log($("diva").css("border-top-color")); }) // 2.设置div这个盒子的样式 // 使用js方法设置样式 $("#setBtn1").click(function() { /* $(".div1").css("width",300); $(".diva").css("width","300px"); $(".diva").css("height","300px"); $(".diva").css("background-color","red"); $(".diva").css("border","5px solid pink"); */ // 3.使用css设置样式 $(".diva").css({ "300px", "height": 300, //background-color : "red", //如果属性名不用引号引起来 那么就换成驼峰命名法 "background-color": "red", border: "10px solid gols" }) }) }) </script>