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,b相当于一个数组
}); </script>
var b = $("#aa"); 根据ID找
alert(b[0]);
取数组的索引0,b相当于一个数组
把Jquery对象转化DOM对象的时候就取索引[0]
<div id="aa"></div>
<span id="aa"></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()); //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[]);
}); </script>
JS里面还可以根据name找
可以找到 根据属性找
<input type="text" name="uid" />
</body>
<script type="text/javascript"> $(document).ready(function(e){ var b = $("[name='uid']");
alert(b[]);
}); </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不行