jQuery简介
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的使用方式
jQuery 库是一个 JavaScript 文件，可以使用 HTML 的 <script> 标签引用它：
1.可以选择在<head></head>内引用
<head>
<script src="js/jquery-1.12.2.js"></script>
</head>
2.也可以直接在<body></body>内引用
<body>
<script src="js/jquery-1.12.2.js"></script>
</body>
jQuery选择器
jQuery选择器基于元素的id、类、类型、属性、属性值等查找，允许对HTML元素组或单个元素进行操作。
jQuery所有的选择器都以美元符号开头：$()。
jQuery选择器-基本选择器
- 元素选择器
$(function () {
//1.基本选择器
console.log($("button"));//使用标签名称匹配元素
});
- #id 选择器
$(function () {
//1.基本选择器
console.log($("#btn")); //使用id匹配元素
});
- class 选择器
$(function () {
//1.基本选择器
console.log($(".btn")); //使用class匹配元素
});
*选择器
$(function () {
//1.基本选择器
console.log($("*")); //匹配所有元素
});
jQuery选择器-层级选择器
$(function () {
//2.层级选择器
console.log($("ul>li"));//匹配ul下的直接子元素li
console.log($("ul li"));//匹配ul下的所有子元素li
console.log($("ul>li:first+li"));//匹配ul下的第一个li元素的后一个li元素
console.log($("ul>li:first~li"));//匹配ul下的第一个li元素的之后所有的li元素
console.log($("li:first"));//匹配第一个元素li
console.log($("li:last"));//匹配u最后一个元素li
console.log($("li:even"));//匹配ul下的索引为偶数的直接子元素li
console.log($("li:odd"));//匹配索引为奇数的元素li
console.log($("li:eq(2)"));//按照索引来获取索引为2的元素li
console.log($("li:gt(2)"));//匹配所有索引大于2的li元素
console.log($("li:lt(2)"));//匹配所有索引小于2的li元素
console.log($(":header"));//获取所有的h标签
console.log($(":root"));//直接获取html标签
});
jQuery选择器-内容选择器
$(function () {
//3.内容选择器
console.log($("div:contains('天气')"));//匹配文本内容包含字符串"天气"的div
console.log($("div:empty"));//匹配空元素div
console.log($("ul:has(.li2)"));//匹配class=".li2"的所有父元素里的ul
console.log($("div:parent"));//匹配作为父元素的div
});
jQuery选择器-可见性选择器
$(function () {
//4.可见性选择器 根据元素的显示隐藏匹配元素
console.log($("button:visible"));//匹配显示的button
console.log($("button:hidden"));//匹配隐藏的button
jQuery选择器-属性选择器
$(function () {
//5.属性选择器 根据元素的属性来匹配元素
console.log($("button[id]"));//匹配具有id属性的button元素
console.log($("button[id][class]"));//匹配具有id和class属性的button元素
console.log($("button[id='btn']"));//匹配具有id属性并且值为btn的button元素
console.log($("button[id='btn'][class='btn']"));//匹配具有id属性值为btn和class属性为btn的button元素
console.log($("button[id!='btn']"));//匹配具有id属性但值不为btn的button元素
console.log($("button[id^='b']"));//匹配具有id属性且值以字符b开头的button元素
console.log($("button[id$='n']"));//匹配具有id属性且值以字符n结尾的button元素
console.log($("button[id*='t']"));//匹配具有id属性且值包含字符t的button元素
jQuery选择器-子元素过滤选择器
$(function () {
//6.子元素过滤选择器
//first-child last-child 如果指定元素标签 找当前标签里面的第一个 如果没写 找所有元素里面的第一个
console.log($("ul :first-child"));//匹配ul内的所有作为父元素的元素的第一个子元素
console.log($("ul :last-child"));//匹配ul内的所有作为父元素的元素的最后一个子元素
//first-of-type last-of-type 如果写指定标签 获取指定标签里面的第一个 如果没写 获取所有类型标签里面的第一个
console.log($("ul :first-of-type"));//匹配ul内的所有类型的第一个子元素
console.log($("ul :last-of-type"));//匹配ul内的所有类型的最后一个子元素
console.log($("ul>li:nth-child(2)"));//括号里面写的是序号 1·开始
console.log($("ul>li:nth-last-child(2)"));//括号里面写的是序号 1·开始 后往前
console.log($("ul>:nth-last-of-type(1)"));//后往前 按类型获取标签里面的最后一个
console.log($("ul>:nth-of-type(1)"));//前往后 按类型获取标签里面的第一个
console.log($("ul:only-child"));//匹配的元素必须是父元素的唯一子元素
console.log($("ul>p:only-of-type"));//获取父元素里面同类型标签里面只有唯一的一个标签 全部获取到
jQuery选择器-表单选择器
$(function () {
//7.表单选择器
//表单类型
console.log($(":input"));//匹配所有 input, textarea, select 和 button 元素
console.log($(":text"));//匹配单行文本框
console.log($(":password"));//匹配密码框
console.log($(":radio"));//匹配单选按钮
console.log($(":submit"));//匹配表单提交
console.log($(":file"));//匹配文件选择
console.log($(":reset"));//匹配重置按钮
console.log($(":button"));//匹配button
console.log($(":checkbox"));//匹配复选框
//表单属性
console.log($("input:disabled"));//获取可用的标签
console.log($("input:enabled"));//获取不可用的
console.log($("input:checked"));//获取CheckBox radio 被选择的元素
console.log($("select option:selected"));//匹配被选择的下拉的option
jQuery属性操作
attr()方法
//获取表单的value属性
console.log($(":input").attr("value"));
//设置表单的value属性
$(":input").attr("value","输入");
//回调函数设置值
$(":input").attr("value",function () {
return "输入";
});
//设置多个属性
$(":input").attr({
value:"按钮",
type:"button"
});
//设置自定义属性
$(":input").attr("data","1");
removeAttr()方法
//删除表单的value属性
$(":input").attr("value","输入");
$(":input").removeAttr("value");
//删除表单的自定义属性
$(":input").attr("data","1");
$(":input").removeAttr("data");
prop()方法
//获取表单的value属性
console.log($(":input").prop("value"));
//设置表单的value属性
$(":input").prop("value","输入");
//回调函数设置值
$(":input").prop("value",function () {
return "输入";
});
//设置多个属性
$(":input").prop({
value:"按钮",
type:"button"
});
//设置自定义属性
$(":input").prop("data","1");//无法显示但可以获取到值
removeProp()方法
//删除表单的value属性
$(":input").attr("value","输入");
$(":input").removeProp("value");
//删除表单的自定义属性
$(":input").attr("data","1");
$(":input").removeProp("data");
removeAttr() 移除的是属性
removeProp() 移除的是属性值 但属性还在 编译器里面没有修改
jQuery CSS 类
添加类
$(function(){
//添加类
$("button").addClass("btn");
//链式操作添加多个类
$("button").addClass("btn").addClass("press");
//一次添加多个类
$("button").addClass("btn press");
移除类
$(function(){
//移除类
//不写参数指移除所有类
$("button").removeClass();
//移除指定类
$("button").removeClass("btn press");
});
类别切换
$(function(){
//类别切换 执行这个方法如果含有此类则移除，如果没有添加
$("button").toggleClass("btn");
});
jQuery 尺寸
$(function () {
//width height
//写参数为设置 不写则获取
//设置或者获取元素的宽和高
console.log($(".block").height());
console.log($(".block").width());
//包括补白(padding) 不包括边框
console.log($(".block").innerHeight());
console.log($(".block").innerWidth());
//包括补白和边框
//参数 options 设置为true 计算的时候包含边距
console.log($(".block").outerHeight());
console.log($(".block").outerWidth());
console.log($(".block").outerHeight(true));
console.log($(".block").outerWidth(true));
});
4647
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
