59、jQuery初识
jQuery是由原生js写的所以说所有jQuery制作出来的效果都可以使用js做出来，jQuery出现的目的是为了优化代码，提高码代码的效率它将很多功能封装。
本篇导航：
一、jQuery的认识
1、何为jquery
1 jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多 javascript高手加入其team。
2 jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE!
3 它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器
4 jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。
5 jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。
2、优势
短小、精悍，写起来简单，省事儿，开发效率高
3、js与jquery关系
jQuery就是JS写的
JS是基础，jQuery是工具
4、jQuery介绍
1）版本
1.x 兼容IE8。。。
3.x 最新
2）.min.js 压缩的 生产环境用
3）.js 没有压缩的 开发用
5、下载即使用
1）下载：https://jquery.com/
2）导入jquery： <script src="jquery-3.2.1.js"></script>
3）使用：jQuery.xxxxx --> $() .xxx
二、jQuery对象
1、jquery对象
jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是 jQuery独有的。如果一个对象是 jQuery对象，那么它就可以使用jQuery里的方法
简单说:
用jQuery选择器查出来的就是jQuery对象
2、jquery对象和Dom对象
jQuery对象，它只可以使用jQuery方法，不能使用DOM的方法，DOM对象也不能使用jquery方法
3、jquery对象和DOM对象的转化
1）jquery对象转DOM对象
jquery对象[0] --> $(".c1")[0]
2）DOM对象转jquery对象
$(DOM对象)
4、基础语法
$(selector).action()
三、选择器和筛选器
1、选择器
1）基本选择器
- ID选择器 $("#id")
- 类选择器 $(".class")
- 标签选择器 $("element")
- 所有标签 $("*")
- 组合选择器 $("#id,.class")
2）层级选择器
- 从一个标签的子子孙孙去找 $("父亲 子子孙孙") $("#id a")
- 从一个标签的儿子里面找 $("父亲>儿子标签") $("#id>a")
- 找紧挨着的标签 $("标签+下面紧挨着的那个标签") $("#id+a")
- 找后面所有同级的 $("标签~兄弟标签") $("#id~a")
3）属性选择器
通过属性查找 $("input[type='text']")
2、筛选器
1）基础筛选器
$(" :first") 获取第一个元素
$(" :not('')") 去除所有与给定选择器匹配的元素
$(" :even") 匹配所有索引值为偶数的元素
$(" :odd") 匹配所有索引值为奇数的元素
$(" :eq") 匹配一个给定索引值的元素
$(" :gt") 匹配所有大于给定索引值的元素
$(" :last") 获取最后个元素
$(" :focus") 匹配当前获取焦点的元素。
2）内容
$(":contains") 匹配包含给定文本的元素
$(" :empty") 匹配所有不包含子元素或者文本的空元素
$(" :has('')") 匹配含有选择器所匹配的元素的元素
$(" :parent") 匹配含有子元素或者文本的元素
3）可见性
$(" :hidden) 匹配所有不可见元素，或者type为hidden的元素
$(" :visible") 匹配所有的可见元素
4）表单
:input
:text
:password
:checkbox
:radio
:submit
:button
:image
:file
5）表单属性
:enable 匹配所有可用元素
:disable 匹配所有不可用元素
:checked 匹配所有选中的被选中元素
:selected 匹配所有选中的option元素
3、方法形式的筛选
1）过滤
$("").eq() 获取当前链式操作中第N个jQuery对象
$("").first() 获取第一个元素
$("").last() 获取最后一个元素
$("").hasClass() 检查当前的元素是否含有某个特定的类，如果有，则返回true
$("").has() 保留包含特定后代的元素
$("").not() 从匹配元素的集合中删除与指定表达式匹配的元素
$("").slice(start,end) 选取一个匹配的子集
2）查找
$("").children() 所有子元素的元素集合
$("").find() 搜索所有与指定表达式匹配的元素。
$("").next() 取得后一个同辈元素
$("").nextAll() 取得后所有同辈元素。
$("").nextUntil() 查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止。
$("").offsetParent() 返回第一个匹配元素用于定位的父节点。
$("").parent() 取得一个包含着所有匹配元素的唯一父元素的元素集合。
$("").parents() 取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通过一个可选的表达式进行筛选。
$("").parentsUntil() 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。
$("").prev() 取得前一个同辈元素。
$("").prevall() 取得前所有同辈元素。
$("").prevUntil() 查找当前元素之前所有的同辈元素，直到遇到匹配的那个元素为止。
$("").siblings() 取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。
4、示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery选择器筛选器练习</title>
<link href="bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!--导航栏开始-->
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div> <!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">哪吒</a></li>
<li><a id="i1" href="#">Egon</a></li>
<li><a class="c1" href="#">日天</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Alex</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!--导航栏结束--> <div class="container"> <div class="jumbotron">
<div id="j1" class="container">
<h1 class="c1">学厨师，去新东方。</h1>
<h1 class="c1">学Python，就来老男孩。</h1>
<p id="p1"><a class="btn btn-primary btn-lg" href="#" role="button">查看更多</a></p></div>
</div>
<hr>
<div class="row">
<div class="col-md-12">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>爱好</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Egon</td>
<td>杠娘</td>
<td>
<button class="btn btn-warning">编辑</button>
<button class="btn btn-danger">删除</button>
</td>
</tr>
<tr>
<th>2</th>
<td>Yuan</td>
<td>日天</td>
<td>
<button class="btn btn-warning">编辑</button>
<button class="btn btn-danger">删除</button>
</td>
</tr>
<tr id="tr3">
<th>3</th>
<td>八级哥</td>
<td>英语</td>
<td>
<button class="btn btn-warning">编辑</button>
<button class="btn btn-danger">删除</button>
</td>
</tr>
</tbody>
</table>
</div>
</div> <hr>
<div class="row">
<div class="col-md-12">
<form id="f1">
<div class="form-group">
<label for="exampleInputEmail1">邮箱</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">密码</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">上传头像</label>
<input type="file" id="exampleInputFile">
<p class="help-block">只支持img格式。</p>
</div>
<button id="btnSubmit" type="submit" class="btn btn-default">提交</button>
</form>
</div>
</div> <hr> <div class="row">
<div class="col-md-12">
<div class="checkbox-wrapper">
<div class="panel panel-info">
<div class="panel-heading">jQuery学习指南</div>
<div id="my-checkbox" class="panel-body">
<div class="checkbox">
<label>
<input type="checkbox" value="0">
jQuery一点都不难
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="1" checked>
jQuery一学就会
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="2">
jQuery就要多练
</label>
</div> <div class="checkbox">
<label>
<input type="checkbox" value="3" disabled>
jQuery学不好
</label>
</div>
</div>
</div>
</div>
<hr>
<div class="radio-wrapper"> <div class="panel panel-info">
<div class="panel-heading">我来老男孩之后...</div>
<div class="panel-body">
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
我要上课玩手机
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
我要上课好好听
</label>
</div>
</div>
</div>
</div>
</div>
</div> <hr> <div class="row">
<div class="col-md-12">
<h2>练习题：</h2>
<ol id="o1">
<li>找到本页面中id是<code>i1</code>的标签</li>
<li>找到本页面中所有的<code>h2</code>标签</li>
<li>找到本页面中所有的<code>input</code>标签</li>
<li>找到本页面所有样式类中有<code>c1</code>的标签</li>
<li>找到本页面所有样式类中有<code>btn-default</code>的标签</li>
<li>找到本页面所有样式类中有<code>c1</code>的标签和所有<code>h2</code>标签</li>
<li>找到本页面所有样式类中有<code>c1</code>的标签和id是<code>p3</code>的标签</li>
<li>找到本页面所有样式类中有<code>c1</code>的标签和所有样式类中有<code>btn</code>的标签</li>
<p id="p2" class="divider"></p>
<li>找到本页面中<code>form</code>标签中的所有<code>input</code>标签</li>
<li>找到本页面中<code>label</code>标签下的<code>input</code>标签</li>子标签
<li>找到本页面中紧挨着<code>label</code>标签的<code>input</code>标签</li>
<li>找到本页面中id为<code>p2</code>的标签后面所有和它同级的<code>li</code>标签</li>
<p id="p3" class="divider"></p>
<li>找到id值为<code>f1</code>的标签下面的第一个input标签</li>
<li>找到id值为<code>my-checkbox</code>的标签下面最后一个input标签</li>
<li>找到id值为<code>my-checkbox</code>的标签下面没有被选中的那个input标签</li>
<li>找到所有含有<code>input</code>标签的<code>label</code>标签</li>
</ol>
</div>
</div> </div> <script src="jquery-3.2.1.js"></script>
<script src="bootstrap-3.3.7/js/bootstrap.js"></script>
</body>
</html>
四、属性
1、属性
1）如果你的选择器选出了多个对象，那么默认只会返回第一个的属性
attr(name|pro|key,val|fn)
- 一个参数 获取属性的值
- 两个参数 设置属性的值
removeAttr(name)
- 删除属性的值
prop(n|p|k,v|f)
- 属性的返回值是布尔类型
removeProp(name)
- 删除属性的值
2）jquery中的循环
each
- $.each(数组/对象, function(i, v){}) - $("div").each(function(){})
3）练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>点击加载图片</title>
<style>
img{
height: 600px;
width: 800px;
}
</style>
</head>
<body> <img src="xxx.png" alt="美女" data-src="Bootstrap_i1.png">
<img src="xxx.png" alt="美女" data-src="Bootstrap_i3.png">
<img src="xxx.png" alt="美女" data-src="Bootstrap_i4.png"> <script src="jquery-3.2.1.js"></script>
<script>
$("img").on("click", function () {
var imgPath = $(this).attr("data-src");
$(this).attr("src", imgPath)
}) </script>
</body>
</html>
点击加载图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全选反选取消</title> <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css">
</head>
<body> <div class="container">
<div class="row">
<div class="panel panel-default">
<div class="panel-heading">
<button id="all" class="btn-btn-default">全选</button>
<button id="cancel" class="btn-btn-default">取消</button>
<button id="reverse" class="btn-btn-default">反选</button>
</div>
<div class="panel-body">
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row"><input type="checkbox"></th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row"><input type="checkbox"></th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row"><input type="checkbox"></th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<script src="jquery-3.2.1.js"></script>
<script>
// 全选
$("#all").on("click", function () {
// 统一的操作
$(":checkbox").prop("checked", true);
}); //取消
$("#cancel").on("click", function () {
$(":checkbox").prop("checked", false);
}); // // 反选
$("#reverse").on("click", function () {
// 取出所有的checkbox
var checkboxEles = $(":checkbox");
// 翔哥的耻辱
// checkboxEles.prop("checked", !(checkboxEles.prop("checked")))
// 要循环checkbox
// 选中的就取消
// 没选中的就选中
checkboxEles.each(function () {
var thisCheckbox = $(this); // 在教室里走的那个人
var isChecked = thisCheckbox.prop("checked"); // 是否选中 // 方法一：判断的方式
if (isChecked) {
// 取消选中
thisCheckbox.prop("checked", false);
} else {
// 选中
thisCheckbox.prop("checked", true);
} // // 方法二：直接取反的方式
// thisCheckbox.prop("checked", !isChecked); })
})
// $("#reverse").on("click", function () {
// $(":checked").prop("checked", false);
// $(":not(:checked)").prop("checked", true);
// }) </script> </body>
</html>
全选反选取消
2、css
addClass(class|fn) 为每个匹配的元素添加指定的类名。
removeClass([class|fn]) 从所有匹配的元素中删除全部或者指定的类。
toggleClass(class|fn[,sw]) 切换，有就去掉，没有就加上
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>示例一</title>
<style>
.dp {
height: 100px;
width: 100px;
border-radius: 50%;
border: 1px solid #cccccc;
display: inline-block;
} .dp2 {
background-color: yellow;
}
</style>
</head>
<body> <div class="dp"></div> <button id="switch" class="btn btn-default">开关</button> <script src="jquery-3.2.1.js"></script>
<script> //jQuery绑定事件
$("#switch").on("click", function () {
// 找灯泡
$(".dp").toggleClass("dp2");
}) </script>
</body> </html>
灯泡
3、HTML代码/文本/值
没有参数就是获取对应的值 有参数就是设置对应的值
html([val|fn])
加 html标签
.html("<span>添加span标签</span>")
text([val|fn])
加文本
.text("我是文本")
val([val|fn|arr])
操作的value
- input
- 获取的是输入的内容
- checkbox
- 获取的是value值
- select
- 单选 就是获取值
- 多选 得到的是一个数组，设置的时候也要是数组
五、CSS
1、css
- .css("color") -> 获取color css值
- .css("color", "#ff0000") -> 设置值
- .css({"color": "#cccccc", "border": "1px solid #ff0000"}) -> 设置多个值
- .css(["color", "border"]) -> 获取多个值
2、位置
.offset
- 获取相对位置
- 比较的对象是 html .position
- 获取相对已经定位的父标签的位置
- 比较的是最近的那个做过定位的祖先标签 scrollTop([val])
- 返回顶部
scrollLeft([val])
- 返回最左
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>返回顶部</title>
<style>
.c1 {
height: 100px;
}
.hide {
display: none;
}
#b1 {
position: fixed;
right: 15px;
bottom: 15px;
}
</style>
</head>
<body> <div class="c1">1</div>
<div class="c1">2</div>
<div class="c1">3</div>
<div class="c1">4</div>
<div class="c1">5</div>
<div class="c1">6</div>
<div class="c1">7</div>
<div class="c1">8</div>
<div class="c1">9</div>
<div class="c1">10</div>
<div class="c1">11</div>
<div class="c1">12</div>
<div class="c1">13</div>
<div class="c1">14</div>
<div class="c1">15</div>
<div class="c1">16</div>
<div class="c1">17</div>
<div class="c1">18</div>
<div class="c1">19</div>
<div class="c1">20</div>
<div class="c1">21</div>
<div class="c1">22</div>
<div class="c1">23</div>
<div class="c1">24</div>
<div class="c1">25</div>
<div class="c1">26</div>
<div class="c1">27</div>
<div class="c1">28</div>
<div class="c1">29</div>
<div class="c1">30</div>
<div class="c1">31</div>
<div class="c1">32</div>
<div class="c1">33</div>
<div class="c1">34</div>
<div class="c1">35</div>
<div class="c1">36</div>
<div class="c1">37</div>
<div class="c1">38</div>
<div class="c1">39</div>
<div class="c1">40</div>
<div class="c1">41</div>
<div class="c1">42</div>
<div class="c1">43</div>
<div class="c1">44</div>
<div class="c1">45</div>
<div class="c1">46</div>
<div class="c1">47</div>
<div class="c1">48</div>
<div class="c1">49</div>
<div class="c1">50</div>
<div class="c1">51</div>
<div class="c1">52</div>
<div class="c1">53</div>
<div class="c1">54</div>
<div class="c1">55</div>
<div class="c1">56</div>
<div class="c1">57</div>
<div class="c1">58</div>
<div class="c1">59</div>
<div class="c1">60</div>
<div class="c1">61</div>
<div class="c1">62</div>
<div class="c1">63</div>
<div class="c1">64</div>
<div class="c1">65</div>
<div class="c1">66</div>
<div class="c1">67</div>
<div class="c1">68</div>
<div class="c1">69</div>
<div class="c1">70</div>
<div class="c1">71</div>
<div class="c1">72</div>
<div class="c1">73</div>
<div class="c1">74</div>
<div class="c1">75</div>
<div class="c1">76</div>
<div class="c1">77</div>
<div class="c1">78</div>
<div class="c1">79</div>
<div class="c1">80</div>
<div class="c1">81</div>
<div class="c1">82</div>
<div class="c1">83</div>
<div class="c1">84</div>
<div class="c1">85</div>
<div class="c1">86</div>
<div class="c1">87</div>
<div class="c1">88</div>
<div class="c1">89</div>
<div class="c1">90</div>
<div class="c1">91</div>
<div class="c1">92</div>
<div class="c1">93</div>
<div class="c1">94</div>
<div class="c1">95</div>
<div class="c1">96</div>
<div class="c1">97</div>
<div class="c1">98</div>
<div class="c1">99</div>
<div class="c1">100</div> <button id="b1" class="hide">屠龙宝刀，点击就送</button>
<script src="jquery-3.2.1.js"></script>
<script>
$(window).scroll(function () {
if ($(window).scrollTop() > 100) {
$("#b1").removeClass("hide");
}else {
$("#b1").addClass("hide");
}
})
$("#b1").on("click", function () {
$(window).scrollTop(0);
})
</script>
</body>
</html>
返回顶部
3、尺寸
height([val|fn])
- 元素的高度
width([val|fn])
innerHeight()
- 带padding的高度
innerWidth()
outerHeight([soptions])
- 在innerHeight的基础上再加border的高度
outerWidth([options])
六、文档操作
1、内部插入
append(content|fn) --> 往后加
appendTo(content) A.append(B) -> 把B添加到A的后面
A.appendTo(B) -> 把A添加到B的后面 prepend(content|fn) --> 往前加
prependTo(content) A.prepend(B) -> 把B添加到A的前面
A.prependTo(B) -> 把A添加到B的前面
2、外部插入
after(content|fn) --> 往后加
insertAfter(content) A.after(B) --> 把B添加到A的后面
A.insertAfter(B) --> 把A添加到B的后面 before(content|fn) --> 往前加
insertBefore(content) A.before(B) --> 把B添加到A的前面
A.insertBefore(B) --> 把A添加到B的前面
3、包裹
wrap(html|ele|fn)
A.wrap(B) --> B包A
unwrap()
- 不要加参数 wrapAll(html|ele)
wrapInner(html|ele|fn)
4、替换
replaceWith(content|fn)
A.replaceWith(B) --> B替换A replaceAll(selector)
A.replaceAll(B) --> A替换B
5、删除
empty()
- 清空 内部清空
remove([expr])
- 删除 整体都删除
detach([expr])
- 剪切 多保存在变量中，方便再次使用
6、复制
clone([Even[,deepEven]])
默认只复制标签，参数设置为true也会复制其绑定的事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>克隆</title>
</head>
<body>
<button class="c1">一刀999</button> <script src="jquery-3.2.1.js"></script>
<script>
$(".c1").on("click", function () {
$(this).clone(true).insertAfter($(this));
})
</script>
</body>
</html>
59、jQuery初识的更多相关文章
- 前端---JQuery初识
---恢复内容开始--- BOM JQuery认识 JQuery基本选择器 JQuery高级选择器 1.javascript基础部分包括三个部分: ECMAScript:JavaScript的语法标准 ...
- 前端07 /jQuery初识
前端07 /jQuery初识 目录 前端07 /jQuery初识 1.jquery介绍 1.1 jquery的优势 1.2 jquery是什么? 1.3 jquery的导入 2.jQuery的使用 2 ...
- jQuery初识、函数、对象
初识jQuery 官方地址:http://jquery.com/ what:一个优秀的JS函数库(封装了BOM.DOM(主要)) why: HTML元素选取(选择器) HTML元素操作 CSS操作 H ...
- 10、jQuery初识
jQuery是由原生js写的所以说所有jQuery制作出来的效果都可以使用js做出来,jQuery出现的目的是为了优化代码,提高码代码的效率它将很多功能封装. 本篇导航: jQuery的认识 jQue ...
- JQuery初识
一.什么是JQuery JQuery官方网站上是这样解释的:JQuery是一个快速简洁的JavaScript库,它可以简化HTML文档的元素遍历.事件处理.动画及Ajax交互,快速开发We ...
- jQuery基础学习(一)—jQuery初识
一.jQuery概述 1.jQuery的优点 jQuery是一个优秀的JavaScript库,极大地简化了遍历HTML文档.操作DOM.处理事件.执行动画和开发Ajax的操作.它有以下几点优 ...
- jQuery初识之选择器、样式操作和筛选器(模态框和菜单示例)
一.jQuery 1.介绍 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架). jQuery设计的 ...
- jQuery 初识 筛选器 属性选择器
---------------------------大事使我们惊讶,小事使我们沮丧,久而久之,我们对这二者都会习以为常. 一 jQuery是什么? ［1］ jQuery由美国人John Resi ...
- python jquery初识
jQuery的介绍 jQuery是一个快速,小巧,功能丰富的JavaScript库.它通过易于使用的API在大量浏览器中运行,使得HTML文档遍历和操作, 事件处理动画和Ajax更加简单.通过多功能 ...
随机推荐
- 必应词典英语学习APP案例分析
一.调研,评测 1.在此次作业之前并没有听过这个学英语app,必应听起来就像英语单词bing,第一次听到觉得这个app很奇怪,但没有将它和英语挂上钩.但是使用一阵子之后我觉得这个名字很好上口,其次这个 ...
- 团队作业10——复审和事后分析（Beta版本）
团队作业10--事后分析(Beta版本) http://www.cnblogs.com/newteam6/p/6953992.html 团队作业10--复审(Beta版本) http://www.cn ...
- 事后诸葛亮分析（Beta阶段）
设想和目标 1.我们的软件要解决什么问题?是否定义得很清楚?是否对典型用户和典型场景有清晰的描述? 解决用户想要随时锻炼四则运算能力的问题:定义的很清楚:有清晰描述. 2.是否有充足的时间来做计划? ...
- 201521123050《Java程序设计》第3周学习总结
1. 本周学习总结 2. 书面作业 1.代码阅读 public class Test1 { private int i = 1;//这行不能修改 private static int j = 2; p ...
- 201521123060 《Java程序设计》第14周学习总结
1.本周学习总结 1.1以你喜欢的方式(思维导图或其他)归纳总结多数据库相关内容. 2.书面作业 1.MySQL数据库基本操作 1.1建立数据库,将自己的姓名.学号作为一条记录插入.(截图,需出现自己 ...
- 201521123060 《Java程序设计》第13周学习总结
1.本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 2.书面作业 1.网络基础 1.1比较ping www.baidu.com与ping cec.jmu.edu ...
- sscanf和正则表达式
sscanf() - 从一个字符串中读进与指定格式相符的数据. 函数原型: Int sscanf( string str, string fmt, mixed var1, mixed var ...
- pl/sql developer 连接服务器上的数据库
1, 在本地安装的Oracle中找到目录 oracle\product\11.2.0\dbhome_1\network\admin, 它下面一般有两个文件可以进行编辑tnsnames.ora li ...
- web自动化1-selenium简介及环境搭建
selenium 开源软件 支持多浏览器Firefox.Chrome.IE 跨平台Windows.Mac.Linux 多语言 java python Ruby php js 对web支持好,多种API ...
- 自学Unity3D 之 贪吃蛇
从一个Java程序员转换去做VR ,先开始自学U3D 吧, 最近跟着一起做一个贪吃蛇的项目 从传课网上面再学 第一天: 因为之前已经对VR 的开发有了一些了解,也买了本书,了解了Unity的基本操作. ...