本文主要是介绍关于jQuery的学习，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

1.jQuery的入口函数

$(function(){
...//此处为页面DOM加载完成的入口

})

或者

$(doucument).ready(function(){
...//此处为页面DOM加载完成的入口

})

1. 等着DOM结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery帮我们完成了封装。

2. 相当于原生js 中的LOMContentloaded.

3. 不同于原生js 中的 load事件是等页面文档、外名的js文件、css文件、图片加载完毕才执行内部代码。

2.jQueryz中的顶层对象$

1. $是jQuery的别称，在代码中可以使用jQuery代替$，但一般为了方便，通常都直接使用$。

2. $是jQuery的顶级对象，相当于原生JavaScript中的window。把元索利用$包装成jQuery对象，就可以调用jQuery的方法。

2.1DOM对象和jQuery对象

1. 用原生JS获取到的对象是DOM对象，用jQuery方法获取jQuery对象，两者之间只能各用各的方法，DOM对象无法使用jQuery方法，反之亦然。

2.jquery获取的对象是以伪数组的方式存在的。

3. 两种对象之间可以相互转换，

var ca = document.querySeletor('video');
// DOM对象转化为JQuery对象
$('video');
//在括号中用引号写标签名或者 .类名 或者 #id.

//$(ca).play() 是不被允许的jQuery中没有play方法需要转换
$('ca')[0].play()

3.jQuery常用的API

3.1jQuery选择器

1. $(“选择器”）里面选择器直接写CSS选择器即可，但是要加引号。

2. jQuery层级选择器

3. 筛选选择器

4. 隐式迭代（重要)
   遍历内部 DOM元素（伪数组形式存储)的过程就叫做隐式迭代。
   简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用。

5. 链式编程

一种简化代码的书写方式。

3.2jQuery样式操作

1. 参数只写属性名，则是返回属性值
   //$(this).css("color"");

2. 参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号
   //$(this).css("color" ;, "red");

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

3.3jQuery效果

1. 显示与消失。
   show(速度，曲线，回调函数)
   hide(一样)
   toggle([speed],[easing],[fn])
   如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。

2. 滑动，
   slideDown([s],[e],[fn])
   slideUp([s,[e],[fn]])
   slideToggle([s],[e],[fn])
   通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。
   这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏或显示。在jQuery 1.3中，上下的padding和margin也会有动画，效果更流畅。

3. 事件切换

hover([over,]out) hover(function(){},function(){})
一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。
当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。
而且，会伴随着对鼠标是否仍然处在特定元素中的检测（例如，处在div中的图像），如果是，则会继续保持“悬停”状态，而不触发移出事件（修正了使用mouseout事件的一个常见错误）。

4. 动画队列及其停止排队方法

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

element.stop().animate({
    width:100,

})

(2) 停止排队

stop()方法用于停止动画或效果。
注意: stop()写到动画或者效果的前面，相当于停止结束上一次的动画。

3.4jQuery属性操作

1. 获取元素的固有属性使用 porp('herf'),同时也可以用于设置属性值prop('name','jahn')。

2. 获取元素自定义的属性 attr("herf"),类似于原生中的setattribute(),getattribute().

3. 数据缓存，date('yourname','keea'),这个是把数据储存到元素的内存中，
   也可以获取H5的自定义属性。

4. 购物车全选练习
   .change()事件可以监听元素状态的改变。
   ：checked选择器可以选出被选中的复选框，返回的是一个对象。
   当全选框被选中时利用prop(),将每一个子选框的属性修改。

3.5jQuery文本属性值

1. element.html()获取和修改元素中的内容，相当于js 中的 innerHTML(),同时要修改就在括号中添加内容。

2. text(), 获取和修改元素中的文本内容。相当于 innertext（）

3. val(), 获取和修改表单中的值，value。

4. toFixed（3）计算结果保留3位小数。

5. substr(1) 字符串截取 ，如：p = $23.33 , p.substr(1) = 23.33;

6. parents('') 可以返回指定的祖先元素。

3.6jQuery元素操作

1. each（function（i, obj）{}） 方法遍历元素,回调函数的的第一个 参数是遍历元素的索引号，第二个是返回的DOM对象。

$('div').each(function(index,DOMelement){

    var arr = ['blue','green', 'yellow'];

    $(DOMelement).css("color",arr[index]);
})

2. $.each(sth, funchtion(i, ele){}) 可以遍历任何元素，还可以遍历数组，和对象，主要用于处理数据。

$.each(arr,function(i,ele){
    console.log(i); //数组中的序号
    console.log(ele);// 数组元素
})
// 遍历对象。
$.each({
    name:'hahh',
    age: 12,

},function(i,ele){
    console.log(i); //输出的是name，age等属性名
    console.log(ele);// 输出属性值。
})

3.7jQuery尺寸、位置操作

这篇关于关于jQuery的学习的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！