jQuery常见方法应用

　　jQuery是一个JavaScript函数库，jQuery的好处在于写的少做的多，jQuery的功能包括HTML的元素选取和操作，css的操作，绑定事件函数，JavaScript特效和动画，html dom的遍历和修改，ajax方法等。

　　使用jQuery的流程首先要下载jQuery文件，jQuery的包括压缩版和未压缩版本，未压缩版本可用于开发，是可读代码。jQuery是Javascript文件，需要用script标签引用他。

　　　jQuery可以链式操作 ，也叫作方法链。比如$("#p1").css("color","red").slideUp(2000).slideDown(2000);

　　　jQuery对象是jQuery函数的一个实例，是一个类数组对象，数组中存放的是DOM对象，而DOM对象是Node的实例。对jQuery对象的操作实际上是对jQuery数组中的DOM对象的操作。jQuery对象和DOM对象可以相互转化。jQuery对象的获取通常是使用选择器来获取的。比如，获取所有clss为one元素:$(".one");

　　基础常用的方法应用

　　　　1.选择器 . $(selector)

　　　　　　用法大多和JavaScript的用法相同，写法不同

　　　　　　标签选择器： $("p")选择所有的p标签元素

　　　　　　id选择器:$("#id") 选择id名字为 id 的元素

　　　　　　$(".classname")  类选择器  $("[href]")元素选择器 等等 。

　　　　　　参考博客jQuery知识点整理有思维导图。

　　　　2.jquery绑定事件  常用方法 $("p").click(funciton(){函数体 }) 

　　　　3.效果： 

　　　　　　　　显示隐藏：可是设置函数和线性运动

　　　　　　　　$("p").hide();隐藏    

　　　　　　　　$("p").show();显示  

　　　　　　　　$("p").toggle(); 隐藏的时候显示，显示的时候隐藏

$("p").click(function(){
  　　$(this).hide();
});  //绑定了一个单击事件 ，让p元素在单击的时候消失

　　　　　　　　淡入淡出

　　　　　　　　　　fadeIn() 淡入已隐藏的元素　　　　

　　　　　　　　　　fadeout() 淡出可见元素

　　　　　　　　　　fade Toggle() 方法 淡出就淡入 淡入就淡出

　　　　　　　　　　fadeTo()  渐变为设定的不透明度 $("#div1").fadeTo("slow",0.15);

　　　　　　　　滑动

　　　　　　　　　　slideDown();向下滑动   slideUp(); 向上滑动  slideToggle(); 反过来滑动

　　　　　　　　动画

　　　　　　　　　　 animate()创建动画  可以操作多个属性  height opacity等  也可以使用相对值  “+=”

$("#ID").click(function(){
  $("#div").animate({ 
    width: 100px,
    height: "100px, 
    border: 10px,
  }, 1000 );
});

 

　　　　　　　　　　停止动画 stop() 

　　　　　　4.HTML方法

　　　　　　　　如一段代码

　　　　　　　　　text()  设置或者返回所选元素的文本内容

　　　　　　　　　html() 设置或返回所选元素的 元素内容

　　　　　　　　　val()  获取或设置input的value值

　　　　　　　　　attr()  获取属性值

　　　　　　　append()  在被选元素的结尾插入内容(在被选元素的里面的后面)

　　　　　　　prepend()   在被选元素的开头插入内容 (在被选元素的里面的前面)

　　　　　　　after()   在被选元素之后插入内容 (在被选元素的外面的后面)

　　　　　　　before()   在被选元素之前插入内容 (在被选元素的外面的前面)

　　　　　　　remove()  删除元素和被选择的内容 

　　　　　　　empty()  删除所选元素的所有子元素

　　　　　　　addClass()  添加class name

　　　　　　　removeClass() 从被选元素删除一个或多个类

　　　　　　　css()  设置css样式  在里面设置css样式 用“”

　　　　　　　width() height() 设置所选元素的大小

　　　　5.查找

　　　　　　parent(); 返回该元素的所有父元素

　　　　　　$("span").parentsUntil("div");返回介于 与

元素之间的所有祖先元素

　　　　　　children()  返回该元素的所有直接子元素

　　　　　　find(“span”)  返回所有的后代里面的 所有span元素

　　　　　　siblings(); 返回被选元素的所有同胞元素。

　　　　  　  next();  返回被选元素的下一个同胞元素。

　　　　　　nextAll(); 返回被选元素下面所有的兄弟元素

　　　　　　nextUntil() 返回两个元素之间的所有的兄弟元素   $("h2").nextUntil("h6");  返回

与

元素之间的所有同胞元素：

　　　　　　first()  返回第一个元素

　　　　　　last()  返回倒数第一个元素

　　　　　　eq()  返回对应的元素  $("p").eq(1);返回索引号为1的元素 即第二个(因为是从0开始) 

　　　　　　　　　　console.log($('div').eq(1).get(0));

　　　　　　filter() 制定一个标准 ，不满足这个标准的元素就会被删除，然后返回匹配元素。

　　　　　　　　　　var $result = $('div').filter(function(index,item){ return index == 2; });

　　　　　　not() 返回不符合标准的元素

　　　　　6.常用工具方法　　　　　　　　　　　　　

　　　　　　$.browser.version 显示当前浏览器的版本号

　　　　　　$.each()  例遍数组

　　　　　　　　$('div').each(function(index,item){ console.log(index,'--',item); });

　　　　　　$.inArray(val,arr,[from])  查看对应元素的位置从0开始计数(如果没有找到则返回 -1 。

　　　　　　$.toArray()   返回一个包含jQuery对象结合中的所有DOM元素数组。

　　　　　　　　　　　　 console.log($('div').toArray());

　　　　　　$.unique(array)  删除数组中重复元素

　　　　　　$.type()  检测数据类型  

　　　　　　$.trim(str)  去掉字符串起始和结尾的空格

　　　　　　$.get(); //以数组的形式返回DOM节点。 console.log($('div').get());

　　　　　　     eq返回的是一个jquery对象，get返回的是一个html 对象数组。返回的是jQuery对象，就可以继续调用其他方法，返回的是html数组就不能调用jQuery的其他方法。

 

　　　　　　$extend()：

　　　　　　　　1）用法1：合并参数(对象)。当extend（）里面是参数的时候，则arg1，arg2合并后返回。

var results=$.extend({name:'nick'},{sex:'handsome'});
results={name:'nick',sex:'handsome'};

 　　　　　　　　　　需要注意的一点是：在使用$.extend()中参数名冲突了，后面的值会替换前面的值。

var results=$.extend({},{name:'nick',sex:'male'},{sex:'handsome'});
results={name:'nick',sex:'handsome'};

 

　　　　　　　　2）用法二：extend的clone

　　　　　　　　　　$.extend(boolean,arg,arg1,arg2……);

　　　　　　　　　　　当boolean为true的时候，为深clone。

ar results=$.extend(true,{},{user:{name:'nick',love:'money'},age:25},{user:{name:'summer',like:'car'},sex:'handsome'});
//返回值
results={"user":{"name":"summer","like":"car"},"age":25,"sex":"handsome"};

　　　　　　　　　　　　　当Boolean值为false的时候(默认情况)，为深clone

var results=$.extend(false,{},{user:{name:'nick',love:'money'},age:25},{user:{name:'summer',like:'car'},sex:'handsome'});

//返回值

results={"user":{"name":"summer","like":"car"},"age":25,"sex":"handsome"};

　　　　　　　　 3）添加方法。

jQuery.extend({
    min: function(a, b) {
        return a < b ? a : b;
    },
    max: function(a, b) {
        return a > b ? a : b;
    }
});
jQuery.min(2, 3); //  2 
jQuery.max(4, 5); //  5

　　　　　　　　

　

转载于:https://www.cnblogs.com/wangzheng98/p/11242853.html