初识jQuery(适合初学者哟.........)

Posted 2020-07-09

 您要知道!!

  jQuery是目前使用最广泛的javascript函数库。据统计，全世界排名前100万的网站，有46%使用jQuery，远远超过其他库。

   微软公司甚至把jQuery作为他们的官方库。对于网页开发者来说，学会jQuery是必要的。因为它让你了解业界最通用的技术，

   为将来学习更高级的库打下基础，并且确实可以很轻松地做出许多复杂的效果。

 

 

我们先来学习一下jQuery的语法结构:

$(selector).action();

1.工厂函数$()

在jQuery中,"$"美元符号等价于jQuery,即$()=jQuery(),$()的作用是将DOM对象转化为jQuery对象,只有将DOM对象装化为jQuery对象后,才能使用jQuery的方法

注意!!!!!!:

当$()参数是DOM对象时,该对象不需要使用双引号包裹起来,如果获取的是document对象,则写作$(document)

2.选择器

jQuery几乎支持CSS中的所有选择器,如:标签选择器,类选择器,ID选择器,后代选择器

语法:

$(selector)

选择表达式可以是CSS选择器：

1 $(document)//选择整个文档对象
2 $(‘#myId‘)//选择ID为myId的网页元素  
3 $(‘div.myClass‘)//选择class为myClass的div元素    
4 $(‘input[name=first]‘)//选择name属性等于first的input元素

(1).首先我们来学习jQuery的第一个方法addClass();

addClass()方法是jQuery中用于进行CSS操作的方法之一,它的作用是向被选元素添加一个或多个样式,它的语法结构如下

语法
jQuery 对象.addClass([样式名])
其中,样式名可以是一个也可以是多个,多个样式名需要用空格隔开

实现的功能：

增加一条样式规则： .addClass(‘myClass’)

增加多条样式规则： .addClass(‘myClass yourClass’)

(2).jQuery的css方法

语法:
css("属性","属性值");

 定义和用法

  css() 方法返回或设置匹配的元素的一个或多个样式属性。

实例 1

将所有段落的颜色设为红色：

$("button").click(function(){
    $("p").css("color",function(){return "red";});
    });

实例 2

逐渐增加 div 的宽度：

$("div").click(function() {
  $(this).css(
    "width", function(index, value) {return parseFloat(value) * 1.2;}
  );
});

(3).jQuery对象和DOM对象的相互转换

jQuery对象转成DOM对象： 
两种转换方式将一个jQuery对象转换成DOM对象：[index]和.get(index); 
(1)jQuery对象是一个数据对象，可以通过[index]的方法，来得到相应的DOM对象。 
如：var $v =$("#v") ; //jQuery对象 
var v=$v[0]; //DOM对象 
alert(v.checked) //检测这个checkbox是否被选中 
(2)jQuery本身提供，通过.get(index)方法，得到相应的DOM对象 
如：var $v=$("#v"); //jQuery对象 
var v=$v.get(0); //DOM对象 
alert(v.checked) //检测这个checkbox是否被选中 
DOM对象转成jQuery对象: 
对于已经是一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了。$(DOM对象) 
如：var v=document.getElementById("v"); //DOM对象 
var $v=$(v); //jQuery对象 
转换后，就可以任意使用jQuery的方法了。 
通过以上方法，可以任意的相互转换jQuery对象和DOM对象。需要再强调注意的是：DOM对象才能使用DOM中的方法，jQuery对象是不可以用DOM中的方法。 

下面是其它的相关使用方法：
1、DOM对象转jQuery对象 
普通的Dom对象一般可以通过$()转换成jQuery对象。 

如：$(document.getElementById("msg")) 
返回的就是jQuery对象，可以使用jQuery的方法。 

2、jQuery对象转DOM对象 
由于jQuery对象本身是一个集合。所以如果jQuery对象要转换为Dom对象则必须取出其中的某一项，一般可通过索引取出。 
如： $("#msg")[0]，$("div").eq(1)[0]，$("div").get()[1]，$("td")[5] 

这些都是Dom对象，可以使用Dom中的方法，但不能再使用jQuery的方法。 

以下几种写法都是正确的： 
$("#msg").html(); 
$("#msg")[0].innerHTML; 
$("#msg").eq(0)[0].innerHTML; 
$("#msg").get(0).innerHTML;