Jquery初学

Jquery相当于JS的升级版它俩语法是一样的,把JS的很多功能封装了起来,用的也是JS语言写的,也支持JS的语法,可以混着使用,用起来方便简单

用Jquery的时候要引用一个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输出后

Jquery初学

找到的是一个DIV元素 JS找到的是DOM对象

Jquery输出后

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>

Jquery初学

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>

Jquery初学

找到的是一个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>

Jquery初学

只要加了索引,找到的就是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对象

Jquery初学

JS里面根据DIV找到所有元素

var b = document.getElementsByTagName("div");

Jquery里根据标签名找

<script type="text/javascript">

$(document).ready(function(e){

    var b = $("div");//根据标签名找
alert(b[]);
}); </script>

Jquery初学

JS里面还可以根据name找

可以找到  根据属性找

<input type="text" name="uid" />
</body>
<script type="text/javascript"> $(document).ready(function(e){ var b = $("[name='uid']");
alert(b[]);
}); </script>

Jquery初学

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初学

Jquery可以获取内嵌的样式  JS不行

上一篇:Flask入门第一天


下一篇:Mac下python初学之Image库(PIL)