JQuery知识总结 -- 这些必须知道！

1.1 初认识

作用相当于onload事件,等dom结构渲染完毕即可执行

但又有所不同

onload 事件是等页面文档、外部的 js 文件、css文件、图片加载完毕才执行内部代码。

// 第一种 $(function () { ... // 内容 }) ; // 第二种 $(document).ready(function(){ ... // 内容 });

可以用jQuery来代替，相当于原生js中的window

用原生 JS 获取来的对象是 DOM 对象

jQuery 方法获取的元素是 jQuery 对象。

jQuery 对象是经过包装的dom对象（伪数组形式存储）

jQuery对象才能使用jQuery方法,不能混用

// DOM对象转换成jQuery对象 var box = document.getElementById('box'); // 获取DOM对象 var jQueryObject = $(box); // 把DOM对象转换为 jQuery 对象 // jQuery 对象转换为 DOM 对象两种方法： // jQuery对象[索引值] var domObject1 = $('div')[0] // jQuery对象.get(索引值) var domObject2 = $('div').get(0)

2.1 jQuery选择器

2.2 基础知识

$(this).css(“color”,”red”);//自己变色 $(this).siblings(). css(“color”,””);//兄弟除色

在jQuery内部会遍历dom对象的过程叫做隐式迭代

$('div').hide(); //页面中所有的div都会被隐藏

$(this).css('color', 'red').sibling().css('color', '');

3.1 样式操作

var strColor = $(this).css('color'); $(this).css(''color'', ''red''); //参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开， 属性可以不用加引号 $(this).css({ "color":"white","font-size":"20px"});

一般来说通过在style中编写样式，通过添加类的方式添加样式

// 1.添加类 $("div").addClass("current"); // 2.删除类 $("div").removeClass("current"); // 3.切换类 $("div").toggleClass("current");

在原生js中className会覆盖类名，在jQuery中指操作指定类名，不影响原先的类名

3.2 jQuery效果

注意：

动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。

停止动画排队：stop() ;

这样就可以在动画执行的时候停止动画

显示隐藏：show() / hide() / toggle() ;

关于参数

参数都可以省略，无动画直接显示

第一个参数speed : 三种预定速度（show，normal，fast）或者是动画时长的毫秒数

第二个参数 easing：指定切换效果，默认是’swing’ 还可设为’linear’

第三个参数 fn :回调函数，在动画完成时执行的函数

滑入滑出：slideDown() / slideUp() / slideToggle() ;

淡入淡出：fadeIn() / fadeOut() / fadeToggle() / fadeTo() ;

tips: fadeTo()必须要写速度和透明度，透明度表示淡入后的最大透明度

自定义动画：animate() ;

第一个参数传入更改的样式属性,以对象形式传递，注意复合属性用驼峰命名,后面3个参数可以省略

注意设置top,left的时候要给div加定位，否则无效

jQuery中有hover()事件，功能类似于css中的hover

hover(function,function)

传入2个参数，第一个参数是鼠标移入是触发的函数，第二个是鼠标移出时触发的函数

只写一个参数时，鼠标移入移出都会触发它

4.1 jQuery属性操作

获取元素本身自带的属性,有利于对表单操作

表单属性：disabled checked这类属性操作很顺畅

//获取 prop('属性名'); //更改 prop('属性名','属性值');

//获取 attr('属性名'); //更改 attr('属性名','属性值');

可以在指定的元素上存取数据，但不会修改DOM元素结构。页面刷新缓存清除

data('myName','ljc');//向元素添加数据 data('myName');//向元素读取数据

通过:checked选择器，可以以数组形式返回被选中的元素

$(function() { $('.all').change(function() { $('.child').prop('checked',$('.all').prop('checked'));//全选按钮 }) $('.child').change(function() { if($('.child:checked').length == $('.child').length) { $('.all').prop('checked',true);// 如果小按钮全部被选中，全选勾上 }else { $('.all').prop('checked',false); } }) })

4.2 文本属性

普通元素内容

这样获取到的会带有标签

可以通过传入参数来更改内容

普通元素文本内容

只会获取文本的内容，不会获取标签

表单的值 val()

console.log($("input").val());//获取表单的内容 $("input").val("123");//改表单的内容

保留2位小数 toFixed(2)

4.3 元素操作

隐式迭代是对同一类元素做同一件事情，但是要做不同事情的话还是需要使用遍历

$('div').each(function(index, domEle) {});

是dom对象不是jQuery对象，需要转换成jquery对象才能使用方法

$.each(obj,function(index,domele){})

可以用来遍历任何对象，主要用来做数据处理，

var sum = 0; var arr = ['red','blue','yellow']; $('div').each(function(index, domEle) { //index是索引号 domEle是dom元素对象 $(domEle).css('color', arr[index]); //转化为整数，否则输出0123，以字符串来拼接 sum += parseInt($(domEle).text()); }) console.log(sum);//6 $.each({ name: 'ljc', age: 20 },function(i,ele) { console.log(i); // name age console.log(ele); // 'ljc' 20 })

创建元素

var li = $('

**添加元素(**在后面添加)

$('ul').append(li);

添加元素(在前面添加)

$('ul').prepend(li);

外部添加(在前面添加)

$('div').before(div);

外部添加(在后面添加)

$('div').after(div);

删除元素

$('ul').remove();//整个ul删除

删除元素集合中的子节点

$('ul').empty();//相当于清空ul里的内容

通过html来清空

$('ul').html();

4.4 尺寸，位置操作

返回值是数字型的

如果参数是数字，则修改样式

参数不写单位

offset()设置获取元素偏移

获取的位置是相对于文档的偏移坐标，与父级没有关系

传入的参数是一个对象

//获取偏移量 $('div').offset() //更改位置 $('div').offset({ top: 200, left: 100 })

position()获取带有定位的偏移

获取的位置是相对于带有定位的父级元素

这个方法只能获取，不能修改

$('div').position()

scrollTop() scrollLeft 设置元素被卷去的头部和左侧

不跟参数是获取，跟参数是设置

5.1 jQuery 事件

on()绑定事件的好处

可以绑定多个事件，多个处理事件函数

$('div').on({ mouseover : function() {}, click : function() {} }) $('div').on('mouseenter mouseleave',function() { $(this).toggleClass('currrnt'); })//如果执行的程序相同可以采用这种方法

事件委托

$('ul').on('click','li',function() { alert('hello world'); })

对于新创建的元素，click无法绑定，但是on可以

$('div').on('click','p',function() { alert('别点我'); }) $('div').append($('

新来的

解除全部事件

$('div').off()

解除特定事件

$('div').off('click')

解除事件委托

$('div').off('click','li')

只触发一次的事件

$('div').one('click',function(){})

// 会触发元素的默认行为 $("div").click(); // 会触发元素的默认行为 $("div").trigger("click"); //不会触发默认行为，比如自动获取焦点 $("input").triggerHandler("focus");//不会获取焦点

6.1 jQuery 事件对象

和原生js的事件对象基本相同

阻止默认行为 ： event.preventDefault(),return false

阻止冒泡 : event.stopPropagation()

$.extend([deep], target, obj1)

[deep]，深拷贝为true，默认为false 浅拷贝

target要拷贝的对象

obj被拷贝的对象

$(function() { var targetObj = { sex : 'male' }; var obj = { id: 1, name: 'andy' }; $.extend(targetObj,obj);// v把obj 拷贝给 targetObj console.log(targetObj);// {sex: "male", id: 1, name: "andy"} console.log(obj); // {id: 1, name: "andy"} })

如果传入多个对象，则在后面的对象会覆盖前面的对象

用来解决命名冲突的问题

jQuery解决方法

把$换成jQuery。jQuery('div')

自定义名字。 var xx = $.noConflict();

7.1 jQuery 插件

引入css.

引入JS

引入html。

jQuery jQuery UI

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。