jQuery教程

关于jQuery的学习

本文主要是介绍关于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获取的对象是以伪数组的方式存在的。

  1. 两种对象之间可以相互转换,
var ca = document.querySeletor('video');
// DOM对象转化为JQuery对象
$('video');
//在括号中用引号写标签名或者 .类名 或者 #id.

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

3.jQuery常用的API

3.1jQuery选择器

  1. $(“选择器”)里面选择器直接写CSS选择器即可,但是要加引号。
名称 用法 描述
ID选择器 $(""#id"") 获取指定ID的元素
全选选择器 $("*") 匹配所有元素
类选择器 $(".class") 获取同一类class的元素
标签选择器 $("div") 获取同一类标签的所有元素
并集选择器 $("div,p,li") 选取多个元素
交集选择器 $("li.current") 交集元素
  1. jQuery层级选择器
名称 用法 描述
子代选择器 $( "ul>li"); 使用>号,获取亲儿子层级的元素;注意,并不会获取孙子层级的元素
后代选择器 $("ul li"); 使用空格,代表后代选择器,获取ul下的所有li元素,包括孙子等
  1. 筛选选择器
语法 用法 描述
:first $('li:first') 获取第一个li元素
:last $('li:last') ...
:eq(index) $('li:eq(2)') 获取li元素中序号为2的元素
:odd ;;; :::
:even ;;; 偶数
  1. 隐式迭代(重要)
    遍历内部 DOM元素(伪数组形式存储)的过程就叫做隐式迭代。
    简单理解:给匹配到的所有元素进行循环遍历,执行相应的方法,而不用我们再进行循环,简化我们的操作,方便我们调用。

  2. 链式编程

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

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事件的一个常见错误)。

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

(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]);
})
  1. $.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的学习的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!