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，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不行