query
jQuery API 中⽂⽂档 | jQuery API 中⽂在线⼿册 | jquery api 下载 | jquery api chm
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 100px;
height: 100px;
background-color: skyblue;
}
</style>
<div class="box" id="box"></div>
<script src="js/jquery-1.12.4.min.js"></script>
之前两种获取元素的⽅式
var box = ElementById("box");
var box = ElementsByTagName("div")[0];
使⽤ jQuery⽅法中的 $() ⽅法
$() ⽅法
是⼀个函数，内部传⼊⼀个参数，参数是获取内部元素的选择器
也解决了兼容问题
$(".box")
$("#box")
获取 css 样式属性 和 更改 css 样式属性
// 获取 css 样式，并设置
// css ⽅法中可以传⼊1-2各参数
console.log($("#box").css("width")); // 100px
// 更改 css 样式
$(".box").css("width", 200);
console.log($("#box").css("width")); // 200px
事件简化
// 不在是⼀个单独的 onclick 属性，⽽是直接⽤ click 事件名称当作⼀个⽅法，这个⽅法封装到元素对象之上$(".box").click(function (){
$(this).css("background-color", "red");
}); // 点击之后就会发⽣颜⾊变化
运动⽅法
// animate 中第⼀个位置运动的结束位置 , 第⼆个总时间
$(".box").animate({"width": 500},2000);
2、$() ⽅法
在 DOM 操作中，基本都是从获取元素开始的
jQuery 中封装了⼀个更加强⼤的获取元素⽅法 $()
在 jQuery 中，只有⼀个全局变量 $，这是 jQuery 的⼀⼤特点，避免了全局变量的污染
jquery字符串截取最开始变量不叫做 $，叫做 jQuery() ⽅法，在库中两个名字是并存的，都可以使⽤
$("p").css("background-color","red")
jQuery("p").css("background-color","red")
经典错误：$ 未定义
当没有引与 jquery 的 js ⽂件，会出现 $ 错误 $ is not defined
3、jQuery对象
$() ⽅法获取到的内容叫做 jQuery 对象
内部封装了⼤量的属性和⽅法,⽐如 .css() 和 .html() 和 .animate() 等⽅法都是 jQuery 对象的⽅法
通过 $() 获取的元素是⼀组元素，进⾏操作时是批量操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p {width: 50px;height: 50px;margin-bottom: 10px;}
</style>
</head>
<body>
<p>段落1</p>
<p>段落2</p>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
/
/ 通过 $() ⽅法获取到的是 Jquery 对象
// 获取的是⼀组 html 元素，会进⾏批量操作
$("p").css("background-color", "skyblue");
// 更改内部⽂案
$("p").html("你好");
// 动画
$("p").animate({"width": 500}, 1000);
</script>
</body>
</html>
①、jQuery 对象和原⽣ js 对象
jQuery 对象得到后，只能使⽤ jQuery 对象的⽅法，不能使⽤原⽣ js 元素对象的⽅法
console.log($("p").innerHtml); // undefined
$("p").style.backgroundColor = "red"; // Cannot set property 'backgroundColor' of undefined
原⽣ JS 对象也不能使⽤ jQuery 的⽅法
// 原⽣ js 不能进⾏批量操作
ps[0].html("hah"); // ps[0].html is not a function html 不是⼀个函数
jQuery 对象实际是⼀个类数组对象，内部包含所有的获取的原⽣ js 对象，以及⼤量的 jQuery 的⽅法和属性
<input type="button" value="按钮1">
<input type="button" value="按钮2" disabled="disabled">
<input type="button" value="按钮3">
<input type="text" value="按钮4">
<textarea name="" id="" cols="30" rows="10"></textarea>
// 基础选择器
$("*");
$("p");
$(".box");
$("#demo");
// ⾼级选择器
$(".box p").html("你好");
// 表单对象属性
// $("input: disabled") 不能有空格
$("input:disabled").css("background-color", "red"); // 被禁⽤
$("input:enabled").css("background-color", "skyblue"); // 没有被禁⽤
// 所有表单都被选⽤
$(":input").css("background-color", "yellow");
// 只会改变⽂本框
$(":text").css("background-color", "yellow");
5、筛选选择器和筛选⽅法
也叫过滤选择器，jQuery 中新增的⾃⼰的选择器
⽤法：在基础选择器后⾯增加⼀些筛选的单词，筛选出前⾯选择器的选中内容中⼀部分，或者可以作为⾼级选择器的⼀部分常⽤：
$(":first")第⼀个
$(":last")最后⼀个
$(":eq(index)")下标为 index 的项
$(":gt(index)")⼤于下标为 index 的项
$(":lt(index)")⼩于下标为 index 的项
$(":odd")下标为奇数的项
$(":even")下标为偶数的项
$(":not(selector)")去除所有与给定选择器匹配的元素

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。