jQuery
Posted bltstop
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery相关的知识，希望对你有一定的参考价值。
一. jQuery
1.模块 《=》类库 ，jQuery----DOM的一个类库。
2.查找元素
---DOM：
---jQuery:
---选择器：
---筛选：
注： 1. jQuery版本：1.x 兼容性高（推荐使用1.12）;2.x;3.x
jQuery安装：1)jquery.com 官网下载； 2)把.js文件放到html同级目录下即可。
2.引用：
在HTML中引用CSS样式时，用link链接到同级目录下的css文件即可；
也可以在HTML中：<style><style>编写样式；（两种方式）
在HTML中引用 .js 文件时，用script 引用同级目录下的 .js 文件；
也可以在HTML中：<script><script>编写代码；（两种方式）
注：<style>一般放在头部，<script>一般放在尾部
3.调用jQuery中的方法有两种方式： jQuery.方法名；
$.方法名。
3.操作元素
3.1获取标签：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="i1">123</div>
<script scr="jquery-1.12.4.js"></script>
<script>
$("#i1")
// 相当于document.getElementById("i1")
</script>
</body>
</html>
问：DOM中通过document.getElementById("i1")获取的标签与jQuery中用 $("#i1") 获取的标签，两种方式有什么区别？
答：jQuery中其实封装是DOM的方式去获取的标签，$("#i1") [0]获取的内容和document.getElementById("i1")获取的内容是一模一样的（可以通过这个方式互相转换）。由此看来$("#i1")获取的内容要比document.getElementById("i1")获取的内容多.
转换：jQuery对象------->DOM 对象：$("#i1") [0]；
DOM 对象--------->jQuery对象 :d = document.getElementById("i1")
$(d);
问：转换有什么作用？
答：当jQuery中封装的内容没有我们想要的时候，可以把jQuery对象转换为DOM 对象，然后我们再编写我们需要的原生态的代码。
3.2 jQuery选择器
作用：直接找到某个或某类标签
1）id
$("#id")
2) class
<div class=‘c1‘><div>
$(".c1")
3) 标签
<div class="c1"> <a>e</a> <a>f</a> </div> <div class="c2"> <a>r</a> </div>
$("a"):即可找到所有的a标签。
4）组合选择器
$("a，.c2")；找到所有a标签和c2。
5）层级选择器
$("#i10 a")：id=10标签下的a标签。（空格：子子孙孙）
$("#i10>a")：id=10标签下的儿子a标签。（> :儿子辈）
6）基本选择器
：first
：last
：eq()
7) 属性
<div xiaolaizi="123"> <a>e</a> <a>f</a> </div> <div xiaolaizi="456"> <a>r</a> </div>
$("[xiaolaizi]") ：具有xiaolaizi属性的所有标签；
$(‘[xiaolaizi="123"]‘) : xiaolaizi属性值3为123的标签；
8)表单选择器
<input type="text" /> <input type="file" /> <input type="password" />
$(‘input[type="text"]‘)：属性的方法，用表单的方法为： $(："text")
可查看：http://jquery.cuishifeng.cn/ jQuery中文文档
3.3示例1
<!--全选，反选，取消操作实例--> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="button" value="全选" onclick="checkAll();" /> <input type="button" value="反选" onclick="reverseAll();"/> <input type="button" value="取消" onclick="cancelAll();"/> <table border="1"> <thead> <tr> <th>选项</th> <th>IP</th> <th>PORT</th> </tr> </thead> <tbody id="tb"> <tr> <td><input type="checkbox" /></td> <td>1.1.1.1</td> <td>80</td> </tr> <tr> <td><input type="checkbox" /></td> <td>1.1.1.1</td> <td>80</td> </tr> <tr> <td><input type="checkbox" /></td> <td>1.1.1.1</td> <td>80</td> </tr> </tbody> </table> <script src="jquery-1.12.4.js"></script> <script> function checkAll() $(‘#tb:checkbox‘).prop(‘checked‘,true) function cancelAll() $(‘#tb:checkbox‘).prop(‘checked‘,false) function reverseAll() //这里的each会循环每一个checkbox,而不用再去写for循环，这是jquery帮我们写好的。 $(‘:checkbox‘).each(function (k) //k :当前索引 //console.log(k) //this,代指当前循环的每一个元素，且是DOM对象。是什么对象可以根据输出的形式去判断，用[ ]括起来的是jquery对象，< >的是DOM对象； //console.log(this); //反选，首先判断是否已经被选中 //DOM方法 // if(this.checked) // this.checked = false; // // else // this.checked = true; // //jquery方法 if($(this).prop(‘checked‘)) //prop:一个参数是获取值，针对checked和selected做操作。 $(this).prop(‘checked‘, false); //prop :两个参数是设置值； else $(this).prop(‘checked‘, true); //js中的三元运算方法 //var v = 条件？ 真值：假值 var v = $(this).prop(‘checked‘)? false:true; $(this).prop(‘checked‘,v); ) </script> </body> </html>
注：DOM中需要写for循环，而jquery中内置循环；
3.4 示例2——Tab菜单
筛选器：(http://jquery.cuishifeng.cn/)
$(this).next() 下一级
$(this).prev() 上一级
$(this).parent() 父级
$(this).children()
$(this).siblings() 同级
$(‘#i1).find(‘#i1‘) 子子孙孙中查找
添加样式和移除样式：
.addClass(‘hide‘)
.removeClass(‘hide‘)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .header background-color:burlywood; color: blue; .content min-height: 50px; .hide display: none; </style> </head> <body> <div style="height: 400px;width: 200px;border:1px solid black "> <div class="item"> <div class="header">标题1</div> <div class="content">内容1</div> </div> <div class="item"> <div class="header">标题2</div> <div class="content hide">内容2</div> </div> <div class="item"> <div class="header">标题3</div> <div class="content hide">内容3</div> </div> </div> <!--//标题太多，一个一个去绑定事件不合适，这里在jQuery中绑定事件--> <script src="jquery-1.12.4.js"></script> <script> $(".header").click(function () //匿名函数,当前点击的标签 //console.log(this); //看一下格式 ，看获取到的是DOM对象还是jQuery对象 //$(this) //DOm 对象转换为jQuery对象 //筛选器 $(this).next().removeClass(‘hide‘); $(this).parent().siblings().find(‘.content‘).addClass(‘hide‘); //上面两句话可以用一行代码搞定， //jQuery中支持链式编程 $(this).next().removeClass(‘hide‘).parent().siblings().find(‘.content‘).addClass(‘hide‘); ) </script> </body> </html>
模态编程框中
3.5 文本操作
$( ).text( ) #获取文本内容；
$( ).text(" ") #设置文本内容；
$( ).html( ) #获取标签内容；
$( ).html(" ") #设置标签内容；
$( ).val(" ")
$( ).val(" ")
3.6 样式操作
addClass
removeClass
toggleClass
3.7 属性（标签）操作
$(..).attr（） ：专门用于做标签上的自定义属性；
： 传一个参数，是获取属性；传两个参数，是添加属性；
$(..)removeAttr( ): 删除属性；
$(..).prop（）：专门用于checkbox,radio ;checkbox用attr（）版本不同时会出现bug;
:传一个参数是获取值，传两个参数是修改或者添加值；
PS: index 获取索引位置。
3.8 CSS 处理
$(‘t1‘).css( ‘样式名‘ ,‘样式值‘ );
点赞：
----$(‘t1‘).append():
----setInterval :定时器；
3.9 位置
$(window).scrolltop() :没有参数，获取值；
$(window).scrolltop(0) :有参数，设置值（移动到设置的位置）；window窗口，为对象，且只有一个。
scrollLeft() :
offset().top :指定标签在html中的坐标 ;
offset().left :
position() : 指定的标签相对父标签的坐标。
3.10 尺寸
height()
innerHeight()
outerHeight()
outerHeight(true)
// 纯高度，边框，外边距，内边距
3.10 阻止事件发生：
return false;
ps: 当页面框架加载完成之后，自动执行(自执行函数）。
$(function)()
以上是关于jQuery的主要内容，如果未能解决你的问题，请参考以下文章