jquery基础入门
Posted jiangmingbai
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery基础入门相关的知识，希望对你有一定的参考价值。
目录
一、jquery介绍和引用
jQuery是目前使用最广泛的javascript函数库
jQuery的版本分为1.x系列和2.x，3.x系列，1.x系列兼容低版本的游览器，2.x和3.x系列放弃支持低版本游览器，目前使用最多的是1.x系列
引入页面
jQuery是一个函数库，一个js文件，页面用script标签引入这个js文件就可以使用
<script type="text/javascript" src="./jquery-1.12.4.min.js"></script>
二、jquery选择器
jQuery用法思想就是通过选择器选择某个元素，然后对它进行某种操作
1、jquery基本的选择器
// id选择器
$("#id")
// 类选择器
$(".class")
// 标签选择器
$("p")
// 层级选择器
$("ul li span")
// 属性选择器
$("input[name=user]")
2、选择同胞和父辈元素
<!-- html -->
<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">
<p class="p1">行元素</p>
<ul>
<li>学校</li>
<li>曹彰</li>
<li>操场</li>
<li >班级</li>
<li>学生</li>
</ul>
</div>
<div class="div4">div4</div>
</body>
// 选择div元素前面紧挨着的同辈元素
$(".div2").prev();
// 选择div前的所有同辈元素
$(".div4").prevAll();
// 选择div后面仅挨着的同辈元素
$(".div2").next();
// 选择div后面所有的同辈元素
$(".div1").nextAll();
// 选择li的父元素
$("li").parent();
// 选择所有div的所有子元素
$(".div3").children();
// 选择div的同级元素
$(".div3").siblings();
// 选择div3内的ul
// find()在当前选中元素的上下文中找到符合条件的后代，返回的是子元素,也就找到的ul元素
$("div3").find("ul");
3、过滤选择器
// 选择包含p标签元素的div元素
$(".div3").has("p");
// 选择class不等与div3的div元素
$("div").not(".div3");
// 选择class等于div3的div元素
// filter()过滤DOM元素包装集，是指操作当前元素集，删除不匹配的元素，得到一个新的集合
$("div").filter(".div3");
// 重点：根据选择集的索引选择元素
$("div").eq(2);
4、获取元素的索引值
有时候需要获的匹配元素相对于其他元素的索引位置，此时可以使用index方法获取
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3"></div>
alert($(".div2").index()) //弹出1
三、jquery操作样式
1、获取元素样式
<div class="div1" style="width: 200px;height: 50px;background: #0033cc">div1</div>
// 获取div的样式
alert($(".div1").css("width"));
alert($(".div1").css("background"));
2、修改样式
// 修改样式只需要在css()中，添加一个对象即可。
$(".div1").css({background: "red",width:"500px"})
3、添加或移除class属性
一般我要设置一个帮了该class属性的css样式，通过添加或者移除的方式来动态切换该元素的css样式
<!-- css样式-->
<style type="text/css">
.div10{
width: 500px;
height: 100px;
background: red;
}
</style>
<!-- html-->
<div class="div4">div4</div>
<div>动态div</div>
// 添加class属性
$(".div4").next().click(function () {
$(".div4").next().addeClass("div10")
})
// 移除class属性
$(".div4").next().click(function () {
$(".div4").next().removeClass("div10")
})
// 添加删除来回切换
$(".div4").next().click(function () {
$(this).toggleClass("div10")
})
四、绑定click事件
1、可元素绑定click事件 可以用如下方法
// 通过选择器定位元素然后调用click方法，click内传一个function
// function内可以使用$(this)代表选择元素，然后在点击后的一系列操作
$(".div4").next().click(function () {
$(this).toggleClass("div10")
})
2、jquery链式动用
jquery对象的方法会在执行完后返回这个jquery对象，所有jquery对象的方法可以连起来写
// 第二个li标签的下一个li修改了样式隐藏，它的同胞节点的子节点隐藏和显示切换
$("li").eq(2).next().css().parent().hide().siblings().children().toggle()
- 案例一：菜单莱切换，点击展开菜单1的子元素，在点击菜单2，展开菜单2子元素的同时，菜单1自动收起（隐藏）子元素
- 弹出框的制作：通过点击确定按钮或者x号，自动隐藏弹窗，也就是点击后找到它的父节点隐藏
五、jquery操作属性
| 方法 | 描述 |
|---|---|
| attr() | 设置或者返回元素属性和值 |
| removeAttr() | 从所有匹配的元素移除指定属性 |
// 案例
// HTML
<input type="text" id="name" value="米"><br>
<button class="show" type="button">显示姓名</button>
// 点击按钮的时候，获取input标签的type属性
$(".show").click(function () {
alert($("input").attr("type"))
})
// 点击按钮的时候，把input标签的type属性改成password
$(".show").click(function () {
$("input").attr("type","password")
})
// 点击按钮的时候移除掉input标签的value属性
$(".show").click(function () {
$("input").removeAttr("value")
})
六、jquery操作元素
1、获取文本内容
| 方法 | 描述 |
|---|---|
| text() | 设置或返回所选元素的文本内容 |
| html() | 设置或返回所选元素的内容(包括HTML) |
| val() | 设置或返回表单字段的值 |
// 案例text()，html()方法实例
// HTML元素
<div class="edit">
<a>获取内容1</a>
<a>获取内容2</a>
<a>获取内容3</a>
<a>获取内容4</a>
</div>
// text()方法实例
// 点击后获取元素的文本内容
$(".edit").click(function () {
alert($(this).text());
})
// 点击后修改元素的文本内容，会清楚内部所有子节点，变更成新的文本内容
$(".edit").click(function () {
$(this).text("新文本内容");
})
// 如何在原始文本的内容添加呢
// 在text方法传一个回调函数，接收两个参数
// index : 索引 0
// Text : 原始的文本内容
$(".edit").click(function () {
$(this).text(function (index, Text) {
return Text + "新的文本"
})
})
// html方法实例
// 和text()使用一摸一样
// 1、直接调用方法是获取选中元素的所有子元素
// 2、方法内传参数则把子元素替换成新添加的
// 3、在元素子元素上添加，html()方法一样传一个调函
// 数设置index，和Text 两个参数，此时Text代表原始多有子元素，return Text+"<a>新添加的</a>"即可
// 一般添加html我们也不适用这个方法使用下面将说到的四个方法来添加html内容
// 所以我们用的更多时获取
// val()方法
// HTML
<input type="text" id="name" value="米"><br>
<button class="show" type="button">显示姓名</button>
// 点击按钮时获取输入框的内容
$(".show").click(function () {
alert($("input").val())
})
// 点击按钮时设输入框内容
$(".show").click(function () {
$("input").val("输入框设置jq内容")
})
// 如何保留原来的输入框内容，思路和前面两个方法逸一样
// 方法内设置传一个回调函数，设置参数index和Text
// Text 就代表原来的文本内容
$(".show").click(function () {
var ele = $("input");
ele.val(function (index,Text) {
return index+Text+"jq输入框新设置内容"
})
})
2、添加新的HTML内容
| 方法 | 描述 |
|---|---|
| append() | 在被选元素内部的尾部添加子元素 |
| prepend() | 在被选元素内部的开头添加子元素 |
| after() | 在被元素之后添加一个同级元素 |
| before() | 在被元素之前添加一个同级元素 |
3、删除元素/内容
| 方法 | 描述 |
|---|---|
| remove() | 删除被选元素(包括子元素) |
| empty() | 删除被选元素的子元素（置空的意思） |
// 案例
// HTMl元素
<ol>
<li>1111111111</li>
<li>22222222222</li>
<li class="li_end">333333333</li>
</ol>
<button class="b_4" type="button">结尾追加</button>
<button class="b_5" type="button">开始追加</button>
<button class="b_6" type="button">之后最佳</button>
<button class="b_7" type="button">之前追加</button>
<button class="b_8" type="button">删除元素</button>
<button class="b_9" type="button">删除子元素</button>
// append()：末尾添加子元素
$(".b_4").click(function () {
$("ol").append("<li class=‘sfa‘>追加内容</li>")
});
// prepend()：开始添加子元素
$(".b_5").click(function () {
$("ol").prepend("<li>追加内容</li>");
});
// after():同级后面添加元素
$(".b_6").click(function () {
$("ol").after("<li>追加内容</li>");
});
// before(): 同级前面添加元素
$(".b_7").click(function () {
$("ol").before("<li >追加内容</li>");
});
// remove()：删除元素，删我们append添加的元素
$(".b_8").click(function () {
$("li").remove(".sfa");
});
// empty():置空ol元素（删除所有的li元素）
$(".b_9").click(function () {
$("ol").empty();
});
七、jquery效果函数
| 方法 | 描述 |
|---|---|
| animate() | 对被元素应用自定义的动画 |
| fadeln() | 逐渐改变元素的透明度，从隐藏到可见 |
| fadeout() | 逐渐改变元素的透明度，从可以减到隐藏 |
| hide() | 隐藏备选元素 |
| show() | 显示备选元素 |
| toggle() | 对被选元素进行隐藏和显示切换 |
| slideDown() | 通过调整高度来滑动显示被选元素 |
| slideToggle() | 对备选元素进行滑动隐藏和滑动显示切换 |
| slideUp() | 通过调整高度来滑动隐藏被选元素 |
| stop() | 停止在备选元素上运行动画 |
八、jquery事件
具体详细内容请参考jQuery在线手册即可，有详细的说明
| 方法 | 描述 |
|---|---|
| click() | 鼠标点击事件 |
| change() | 元素改变时触发 |
| mousemove() | 鼠标进入（进去子元素也触发） |
| mouseout() | 鼠标移除（离开子元素也触发） |
| mouseenter() | 鼠标进入（进去子元素不触发） |
| mouseleave() | 鼠标移除（离开子元素不触发） |
| hover() | 同时mouseenter（移入）触发第一个函数和mouseleave（移出）触发第二个函数 |
| resize() | 游览器大小发生变化 |
| scroll() | 滚动条的位置发生变化 |
| submit() | 用户提交表单 |
九、ajax
1、ajax简介
ajax技术的目的时让javascript发送http请求，与后台通信，获取数据和信息。ajax技术的元素时实例xmlhttp对象，使用此对象与后台通信，ajax通信的过程不会影响后续的javascript的实行，从而实现异步
局部更新和无刷新
ajax可以实现局部刷新，也叫做无刷新，无刷新指的是整个页面不刷新，只是局部刷新，ajax可以自己发送http请求，不用通过游览器的地址栏，所以页面整体不会刷新，ajax获取到后台数据，更新页面显示数据的部分，就做到了页面局部刷新
同源策略
ajax请求的页面或资源只能是同一个域下面的资源，不能是其他域的资源，这是在设计ajax时基于安全的考虑
2、ajax使用方法
// 使用jquery调用ajax()方法传一个字典对象
$.ajax({
key:value
})
| 常用参数 | 描述 |
|---|---|
| url | 接口地址 |
| type/method | 请求方法，GET或者POST等 |
| dataType | 设置返回的数据格式，常用的是json，也可以是html，不设置会自动解析 |
| data | 请求数据，如果是json格式需要用JSON.stringify(data)处理 |
| success | 设置请求的成功后的回调函数 |
| error | 设置请求失败后的回调函数 |
| async | 设置是否异步，默认是true，表示异步 |
| timeout | 设置请求的超长时间毫秒，当async设置为false，同步的时候，timeout是不生效的 |
| cache | 默认为true（当dataType为script时，默认为false） |
| 更多.... | 请移步jq在线手册 |
案例发送一个登录请求
// HTML页面
<form action="">
账号: <input type="text" name="username" id="username">
密码: <input type="password" name="username" id="password">
<input id="dl" type="button" value="登录">
<div class="error_msg"></div>
</form>
// 案例
// ajax请求，点击登录按钮发送
$(function () {
$("#dl").click(function () {
// 获取登录信息
var username = $("#username").val();
var pwd = $("#password").val();
// 方式一 success ，error
// $.ajax({
// url:"/login",
// type:"post",
// data:{"user":username,"pwd":pwd},
// dataType:"json",
// success:function (data) {
// if (data.code==="1"){
// alert(data.msg)
// }else {
// $(".error_msg").text(data.msg).css({color:"red",fontSize:"10px"})
// }
// },
// error:function () {
// alert("请求失败")
// }
// })
// 方式二：done fail 现在用方式二的越来越多
$.ajax({
url: "/login",
method: "post",
data: {"user": username, "pwd": pwd},
dataType: "json"
}).done(function (data) {
if (data.code === "1") {
alert(data.msg)
} else {
$(".error_msg").text(data.msg).css({color:"red",fontSize:"10px"})
}
}).fail(function () {
alert_error_req("登录接口")
})
})
})
以上是关于jquery基础入门的主要内容，如果未能解决你的问题，请参考以下文章