一、jQuery的下载
jQuery为第三方框架，是JavaScript的封装，用以简捷的实现某些功能。
学习jQuery的步骤为：
- 找官网：https://jquery.com/
- 看介绍：知道它是干嘛的
- 快速入门：观看一分钟上手或三分钟上手视频
- 下载，使用在线的，选择第三方下载：静态资源库（介绍了使用方法），因为版本更全，比较常用的是2.2.4版本，这个版本不需要我们考虑兼容性问题，开发过程中使用本地未压缩版本，方便我们查看源代码，项目上线后，使用压缩版本，减小所占空间。
二、jQuery的选择器
- jQuery的引用，使用script标签
// body的代码
<body>
<div id="box1">1</div>
<div id="box2">2</div>
</body>
<script src="../jquery.js"></script>
// 函数执行后：（jq的DOM方法）
// $().方法()或属性
// 函数执行前：（jq的全局方法）
// $.方法()或属性
- $和jQuery，从下面代码可以看出，jQuery最终暴露出来的两个变量其实是同一个内容，根据使用习惯，二选一即可。本文以 $ 为主。
console.log(jQuery);
console.log($);
console.log($ === jQuery);
console.log(typeof $); // function
- jQuery的选择器
// jq的id选择器：
// 所有选择器选择出来的元素都以数组的形式返回
var box1 = $("#box1")
// jq的DOM元素和原生js的DOM元素，做个比较：
// 单个是元素，多个数组
var box2 = document.getElementById("box2");
// jq的DOM元素必须解析之后，才能使用原生js的DOM的属性或方法
// box1[0].style.background = "yellow";
// jq的DOM元素，使用jq自身提供的方法，就不用解析,这里只做个实例
// box1.css("background","#ff0000");
// box2.style.background = "red";
// 原则上来说，原生jsDOM不能使用jq的DOM方法
// 但是，原生jsDOM对象可以被转成jq的DOM对象
// 这个时候就可以使用jq的方法了
// $(box2).css("background","#ff0000");
// 原生js的DOM对象和jq的DOM对象的转换方式：
// 原生js转jq
// $(原生DOM对象)
// jq转原生js
// jqDOM对象[0]
console.log(box1);
console.log(box2);
// jquery的选择器：所有选择器选择出来的元素都是以数组的形式返回
// 测试所用的body代码为：
<body>
<div id="box">1</div>
<div id="box">2</div>
<div id="box">3</div>
<div class="cont">4</div>
<div class="cont">5</div>
<div class="cont">6</div>
<ul class="list">
<li>link1</li>
<li>link2</li>
<li>link3</li>
<li>link4</li>
<li>link5</li>
<li>link6</li>
</ul>
<div class="msg">
<div class="xbox">
<h2>二级标题1</h2>
<h2>二级标题2</h2>
</div>
<h2>二级标题3</h2>
<h2>二级标题4</h2>
</div>
<span>7</span>
<span>8</span>
<span>9</span>
<input type="text" abc="hello">
<input type="text" abc="hello" qwe>
<input type="text" abc="world" qwe>
</body>
// 引入之后的script代码为
// id：失明特性
// $("#box").css("background","red");
// class
// $(".cont").css("background","red");
// 标签
// $("span").css("background","red");
// 属性
// $("input[abc=hello][qwe]").css("background","red");
// 包含：后代
// $(".msg h2").css("background","red");
// 群组：
// $("#box,.cont,span").css("background","red");
// 包含：子
// $(".msg>h2").css("background","red");
// 下一个兄弟
// $(".msg+span").css("background","red");
// 下所有兄弟
// $(".msg~span").css("background","red");
// 指定索引，从0开始
// $(".cont:eq(1)").css("background","red");
// $(".list li:eq(2)").css("background","red");
// 第一个或最后一个
// $(".list li:first").css("background","red");
// $(".list li:last").css("background","red");
// $(".list li:odd").css("background","red");
$(".list li:even").css("background","red");
// jq最大的特性：隐式迭代
// 隐式迭代就是，以对list颜色的改变为例，全部改变list的字体颜色，jq需要的代码为:
// $(".list").css("color","red");
// 而原生js的代码为：
// let items = document.getElementsByClassName('list')
// for(let i = 0;i<items.length;i++){
// items[i].style.color = 'red';
// }
三、jQuery的筛选方法（过滤器）
<body>
<div id="box">1</div>
<div id="box">2</div>
<div id="box">3</div>
<div class="cont">4</div>
<div class="cont">5</div>
<div class="cont">6</div>
<ul class="list">
<li>link1</li>
<li>link2</li>
<li>link3</li>
<li>link4</li>
<li>link5</li>
<li>link6</li>
</ul>
<div class="msg">
<div class="xbox">
<h2>二级标题1</h2>
<h2>二级标题2</h2>
</div>
<h2>二级标题3</h2>
<h2>二级标题4</h2>
</div>
<span>7</span>
<span>8</span>
<span>9</span>
<input type="text" abc="hello">
<input type="text" abc="hello" qwe>
<input type="text" abc="world" qwe>
</body>
<script src="../jquery.js"></script>
<script>
// 筛选方法（过滤器）
// $(".msg~h2").css("background","red");
// $(".msg").children("h2").css("background","red");
// 如果能够使用筛选方法，尽量不要使用过于复杂的字符串传参实现选择
// $(".msg h2").css("background","red");
// $(".msg").find("h2").css("background","red");
// $(".list").children("li").first().css("background","red");
// $(".list").children("li").last().css("background","red");
// $(".list").children("li").eq(3).css("background","red");
// $(".msg").next("span").css("background","red");// msg的第一个兄弟
// $(".msg").nextAll("span").css("background","red");// msg的所有兄弟
// $(".list").prev(".cont").css("background","red");// list的上一个cont
// $(".list").prevAll(".cont").css("background","red");// list的所有cont
// $(".list").siblings().css("background","red");// 除了list之外的所有兄弟
// $(".xbox").parent().css("border","solid 1px black");// xbox的父级
// $(".xbox").parents().css("border","solid 1px black");// xbox父级的父级都会被设置
$(".list").children("li").eq(3).end().css("background","red");// jQuery回到最近的一个"破坏性"操作之前，即: 将匹配的元素列表变为前一次的状态。
</script>
四、jQuery的属性操作
<body>
<div id="box" abc="hello">hello</div>
</body>
<script src="../jquery.js"></script>
<script>
// prop：prop(属性名称)获取具有true和false两个属性的属性值，prop(属性名称，属性值)设置具有 true 和 false 两个属性的属性值。
// 如果设置的是内置属性，会可见
// 如果设置的是自定义属性，会不可见
// $("#box").prop("title","这是一个title"); // 可见
// $("#box").prop("qwe","这是一个qwe"); // 不可见
// console.log($("#box").prop("qwe")); // undefined
// console.log($("#box").prop("title"));
// console.log($("#box").prop("abc")); // undefined
// console.log($("#box").prop("id"));
// removeProp 删除内置属性
// $("#box").removeProp("qwe");
// $("#box").removeProp("title");
// console.log($("#box").prop("qwe"));
// attr：attr(属性名称)，一个参数为获取属性值，attr(属性名称，属性值)两个参数为设置指定的属性值
// 不管内置还是自定义，都可见
// $("#box").attr("title","这是一个title");
// $("#box").attr("qwe","这是一个qwe");
// console.log($("#box").attr("qwe"));
// console.log($("#box").attr("title"));
// console.log($("#box").attr("id"));
// var box = $("#box");
// 移除指定的属性
// box.removeAttr("id");
// box.removeAttr("title");
// box.removeAttr("qwe");
// console.log(box.attr("qwe"));
// console.log(box.attr("title"));
// console.log(box.attr("id"));
// $("#box").attr({
// zxc:"hahaha",
// hello:"world",
// "class":"123"
// })
</script>
五、jQuery的样式操作
<body>
<div id="box">hello</div>
</body>
<script src="../jquery.js"></script>
<script>
// $("#box").css("background","red");
// $("#box").css("width","100px");
// $("#box").css("height","200px");
$("#box").css({
width:"100px",
height:200,
background:"red",
opacity:0.5,
fontSize:30,
lineHeight:"100px"
});
// console.log($("#box").css("width"));
// console.log($("#box").css("background-color"));
// console.log($("#box").css("font-size"));
// console.log($("#box").css("border"));
// console.log( $("#box").css(["width","height","border"]) );
// css这个方法，接收的参数，有个数不同的时候，有类型不同的时候
// 如果是一个：
// 如果是字符：获取
// 如果是对象：批量设置
// 如果是数组：批量获取
// 如果是两个：单个设置
</script>
3077
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
