Jquery初学
Jquery相当于JS的升级版它俩语法是一样的，把JS的很多功能封装了起来，用的也是JS语言写的，也支持JS的语法，可以混着使用，用起来方便简单
用Jquery的时候要引用一个Jquery包
带min是压缩版，不带就是非压缩版
引入Jquery包引入当前页面
<script src="jquery-1.11.2.min.js"></script>
在引用其他多个JS文件的时候一定是Jquery在最前面
Jquery与Js的方法与不同
Jquery里面的：$ 符号代表的是选择器 所有选取内容都用
PHP里面的$符号是代表变量
</body>
<script type="text/javascript">
在使用Jquery的时候，有些事件，特效都需要加载完网页之后再过来执行，Jquery里面提供了一种方式，要在JS代码最外层加上一句话
页面加载完成 相当于加了一个事件
$(document).ready(function(e)){
一般JS代码都在这里面写，这里面出现的代码就是页面加载完成之后执行
});
</script>
JS DOM对象
1 选取元素
2 操作内容
3 操作属性
4 操作样式
JS与Jquery区别
1.对于两种方式对比找元素
$(document).ready(function(e){ //JS 找元素 根据一个找 var a = document.getElementById("aa"); alert(a); //Jquery 找元素 var b = $("#aa"); alert(b); });
JS输出后
找到的是一个DIV元素 JS找到的是DOM对象
Jquery输出后
Jquery找到的是Jquery对象
两个找到的是不一样的东西
如果我想取里面的JS对象出来和上边的一模一样，取DOM对象
<script type="text/javascript"> $(document).ready(function(e){ //JS 找元素 根据一个找 var a = document.getElementById("aa"); alert(a); //Jquery 找元素 var b = $("#aa"); alert(b[0]); //取数组的索引0，b相当于一个数组 }); </script>
var b = $("#aa"); 根据ID找
alert(b[0]);
取数组的索引0，b相当于一个数组
把Jquery对象转化DOM对象的时候就取索引[0]
<div id="aa">22</div> <span id="aa">33</span> </body> <script type="text/javascript"> $(document).ready(function(e){ //根据class找 var a = document.getElementsByClassName("aa"); alert(a); }); </script>
找到的是一个div一个span,两个class名相同的元素，Collection一般代表集合的意思但在JS里面是数组的意思，如果想取某一项的时候根据索引就可以找到
Jquery
根据class找
代表class名为aa的找到所有元素
<script type="text/javascript"> $(document).ready(function(e){ var b = $(".aa"); //代表class名为aa的找到所有元素 alert(b); }); </script>
只要加了索引，找到的就是DOM对象
如果想要找第一个元素的Jquery对象
<script type="text/javascript"> $(document).ready(function(e){ var b = $(".aa"); //代表class名为aa的找到所有元素 alert(b.eq(0)); //b.eq 点在JS里面是调用方法 找到的是Jquery对象 }); </script>
b.eq 点在JS里面是调用方法，使用eq也可以取到里面的元素，只不过取到的是Jquery对象
JS里面根据DIV找到所有元素
var b = document.getElementsByTagName("div");
Jquery里根据标签名找
<script type="text/javascript"> $(document).ready(function(e){ var b = $("div");//根据标签名找 alert(b[0]); }); </script>
JS里面还可以根据name找
可以找到 根据属性找
<input type="text" name="uid" /> </body> <script type="text/javascript"> $(document).ready(function(e){ var b = $("[name='uid']"); alert(b[0]); }); </script>
JS里面操作内容主要应用到的
1 非表单元素
a.innerHTML 操作元素里的html代码
a.innerTEXT 操作元素里面的文本
2 表单元素
a.value 代表操作表单元素的值
Jquery里面操作内容
1 非表单元素
var b =$("#aa");
b.html(); 使用这个方法就可以操作HTML代码了，括号里不写参数的话就是获取内容可以直接输出，如果里面写参数了，给这个元素加上HTML代码
b.text(); 操作元素里面的文本
2 表单元素
b.val(); 不写参数就是获取，写参数就是设置
操作属性
在JS里面操作属性
a.setAttribute("",""); 设置属性，括号里面写两个参数
a.removeAttribute(""); 移除属性
a.getAttribute(""); 获取属性的值
Jquery里面操作属性
设置属性 b.attr("","");
移除属性 b.removeAttr("");
获取属性的值 b.attr("");
还有一种方式也可以操作属性 复选框，单选按钮 比较特殊
b.prop("",""); 属性名，属性值变成了true，false
操作样式
b.css("background-color","red"); 背景色设置一个样式
Jquery可以获取内嵌的样式 JS不行
