• Jquery简略API使用


    都是个人随手笔记,既然开通了博客园就分享给大家。谨做为参考,具体大家自己测试以及使用

    ★ $() ★ JQ的一个万能获取对象的函数(获取跟CSS获取元素是一样的)
    $(function(){}); 替代window.onload(不同点在于onload是等文档加在完成,而JQ是直接把DOM结构加载完成就可以了,不需要等待图片加载完成)

    $('li:eq()')可以选择所有获取到的li中的第几个,这个 : 的意思是后面可以删选,如前面eq或者写奇数偶数,even奇数,odd偶数来匹配。也是从0开始,0为偶数

    $('<div>')创建元素 $('<div>111</div>')创建并直接修改该元素的内容


    .get() 匹配到的一组或一个元素转换成原生DOM元素,也就是可以用原生方法。参数不传就是全部转换,传的话按下标转单个
    .prop() 获取匹配到的原生DOM对象里的属性(成员)的数值
    .removeProp() 删除上面方法的属性
    .add() 参数里面匹配到的可以任何元素可以返回一个新的集合元素。
    .slice() 选集合中的起始到结尾(跟eq()差不多,但他是选择一个范围,第一个参数为起始,第2个参数为元素的结尾,但是结尾位置是不包括在匹配中)
    .end() 返回JQ对象的上一层(无参数)

    .attr() 获取和设置行间的属性
    .removeAttr() 删除行间属性
    .html() 获取内容跟设置内容
    .text() 匹配到元素或者集合的所有文本内容,不包括标签(包括他们的子元素,并且如果是赋值,标签不会当成标签解析)

    .filter() 针对当前匹配到元素的过滤
    .has() 包含(匹配前面对象里所有包含的条件的子元素的集合)(这个是针对当前元素下的元素的条件)
    .not() 过滤(与匹配中元素的相反,符合条件的不选)一般用奇数偶数进行匹配成对象
    .find() 标签(匹配前面对象的子级元素的标签)(这个是针对当前元素下的元素的条件)
    .eq() 下标(找到一群元素当中的第几个)
    .index() 索引(在当前所有兄弟节点当中这个元素的位置)不接受参数的方法

    .width/h() 获取元素和设置元素的宽(去除单位)
    .innerWidth/h() 获取元素宽(包含填充)不接受参数的方法
    .outerWidth/h(布尔值) 获取元素的宽(包含填充跟边框)(参数默认为false,true的时候就是包含margin)


    .each() 遍历一个jQuery对象,为每个匹配元素执行一个函数。(参数为函数,函数的第一个参数为"i",第2参数为当前执行的的那个对象(原生),所以要用$(当前对象))
    .length 长度,跟原生一样

    .css() 获取匹配元素集合中的第一个元素的样式属性的值 或 设置每个匹配元素的一个或多个CSS属性。
    .addClass() 给元素设置一个class
    .removeClass() 删除一个class或者全部class
    .hasClass() 检索一个class存在不存在,返回布尔值
    .toggleClass() 切换class
    .val() 获取元素value或设置元素的值
    .show() 显示元素(都是不自带参数,但参数可以是一个时间,形成自带运动)
    .hide() 隐藏元素(都是不自带参数,但参数可以是一个时间,形成自带运动)
    .fadeOut() 淡出 (都是不自带参数,但参数可以是一个时间,形成自带运动)
    .fadeIn() 淡入 (都是不自带参数,但参数可以是一个时间,形成自带运动)
    .slideUp() 向上卷起(都是不自带参数,但参数可以是一个时间,形成自带运动)
    .slideDown() 向下展开(都是不自带参数,但参数可以是一个时间,形成自带运动)
    .fadeTo() 渐变(第一个参数时间,第2个参数0到1的小数透明度)

    .siblings() 获取元素的所有兄弟节点(不包括自身)(参数为删选功能)
    .next() 下一个兄弟节点
    .nextAll() 下面所有的兄弟节点(参数为删选功能)
    .prev() 上一个兄弟节点
    .prevAll() 上面所有兄弟节点(参数为删选功能)
    .insertBefore() 元素添加到某个元素的前面
    .before() 跟上面一样,不过是必须的。都是操作第一个$获取到的对象
    .insertAfter() 元素添加到某个元素的后面
    .after() 跟上面一样
    .appendTo() 元素添加到某个元素的里面的最后面
    .append() 跟上面一样
    .prependTo() 元素添加到某个元素的里面的最前面
    .prepend() 跟上面一样
    .detach() 删除节点(返回值返回这个节点的所有,包括事件)
    .remove() 删除节点(返回值返回DOM的这个节点,事件不会被记录。)
    .clone() 克隆节点(参数为布尔值,true就是事件也克隆)
    .parent() 获取父级
    .offsetParent() 获取定位父级
    .parents() 获取元素上面的所有祖先节点(参数为删选,被删选中的元素都会被找到)
    .closest() 获取元素最近的祖先节点(必填参数,参数删选条件,然后只返回一个最近的元素。)(包括自身元素)


    .on() 加事件,如果要加多个事件,可以传一个json。如果多个事件同一个函数就如 ('click mouseout') 它还可以传自定义事件,而且事件不会被后面的覆盖
    .one() 如上,但事件只执行一次
    .off() 删除事件(不传参数就是删除对象的全部事件,传参数的话就只删除传参数的那个事件)
    .hover() 移入移除(自带2个函数)
    ev.pageX/Y 鼠标位置(相对于文档的)函数要传ev才可以用
    ev.which 键盘键值(包含鼠标的)函数要传ev才可以用
    ev.preventDefault() 阻止默认事件
    ev.stopPropagation 阻止冒泡 (如果要阻止默认跟冒泡2个事件,可以直接return false)
    ev.target 事件源,触发事件的事件源头,跟原生的是一样的
    ev.date 在匿名事件里进行传参,如 $('a').on('click',{name:'nihao'},function(){ alert(ev.date.name) } ) ev.date代表整个json
    ev.type 事件类。事件名
    .delegate() 事件委托,如: $(父级).delegate(子级,事件名称,执行的函数)
    .undelegate() 删除事件委托 如: $(父级).undelegate()
    .trigger() 主动触发事件(参数为主动触发的事件名,包括自定义事件)如: 元素.trigger('事件名称')


    .scrollTop() 滚动条距离
    .offset() 这个方法底下有2个属性,就是left/top(跟原生不一样的是它,不是到定位父级,而是到可视区的距离)如element.offset().left/.top
    .position() 跟上一样有2个属性是left/top(跟原生差不多,根据父级有没定位来计算,但是是不算margin的值的)

    .animate() 运动(第1参数json,json里面写attr跟attr的值。第2参数,时间(默认400s)。第3参数,运动形式,默认'swing'慢快慢/'linear'匀速。第4为回调)
    .stop() 阻止元素当前的运动(第一参数为布尔值,true就是阻止元素后续的所有运动。第2参数为布尔值,表示停止的时候还把运动的目标点实现)
    .finish() 停止元素的后续所有运动,并且到达目标点
    .delay() 延迟后续运动,参数为时间

    .serialize() 对表单进行操作,让匹配到元素下的所有子元素身上有name的把数据串联。(a=1&b=2 进行串联)
    .serializeArray() 如上,但是是把数据添加到一个数组里,数组每个以json形式


    ★JQ的工具方法(原生可以通用)★

    $.type() 判断类型(更强大)
    $.trim() 去字符串的空格(参数为字符串)
    $.inArray 找数组的某个值在数组的第几个,找不到返回-1 如 $.它(第一参数找的东西,第2参数在哪个对象下面去找)
    $.proxy() 改变this指向,后面在加对括号就是执行,这个括号里面可以传形参 也可以这样 如 它(fn,window,参数,参数)()
    $.noConflict() 防止冲突 如 var Lukunlin = $.noConflict(); 后续就可以 Lukunlin(this).css().......什么的了
    $.parseJSON() 把字符串转换json对象 如:$.parseJSON(str).abc
    $.makeArray() 把类数组转换成数组 如把一堆集合元素转换成真正的数组
    $.each(对象,fn(i,this)) 遍历
    $.merge(数组,数组) 合并数组返回一个新的数组。
    $.cookie() 设置,更改,对象,对象里面有expires,设置过期时间,path:'/'设置绝对路径,domain设置域名路径,删除一个cookie只需要传key然后设置为null就删除完成
    $.fx.interval 设置Jq动画的帧数,默认为13,设置为 $.fx.interval = 5;

    AJAX

    $.ajax() 参数为一个objcet在这个objcet下来进行传输或者接收数据

    url:'接口' 接口地址协议
    data:'name=aaa&nane=bbb' url里带的参数,接收string类型也接收objcet类型
    type:'POST' 请求协议类型,默认GET
    success:function(data,状态码){} 成功后回调函数
    error:function(){} 请求失败或者错误
    contentType:''; 请求头的信息,后面是默认地址 'application/x-www-form-urlencoded; charset=UTF-8'
    dataType:'' 返回的数据类型,xml,html,script,json,jsonp,text
    cache:boolean 是否缓存
    timeout:number 设置请求超时时间(毫秒)
    async:默认为true 是否异步
    beforeSend:fn 请求前的回调函数
    complete:fn 请求完成后的回调函数
    contents:{字符串/正则表达式} 根据给定的正则匹配的内容解析返回的结果
    crossDomain:boolean 是否跨域,默认为false,(同时还需要设定返回类型为jsonp,跟接口要带http://)
    global:boolean 是否全局AJAX触发 默认为true,触发
    ifModified:boolean 是否等上次请求响应,默认false,就是说如果上次请求的AJAX没有响应的话,是否不请求了。
    jsonpCallback:string 为jsonp请求指定一个回调函数名。这个值将用来取代jQuery自动生成的随机函数名。这主要用来生成一个独特的函数名
    username:string 于响应HTTP访问认证请求的用户名
    password:string 用于响应HTTP访问认证请求的密码
    statusCode:objcet 一般检测HTTP代码,当响应了响应的代码就执行里边函数,如:statusCode:{404:function(){'发生了错误'}}

    $.get('xxx.php?name=a&b=b',function(data){} )
    $.post('xxx.php',function(){} )
    $.getJSON('xxx.php?callback=JSONP的回调函数名或者直接写个?',function(){} )

    更多Ajax详解请参考 http://www.cnblogs.com/heyuquan/archive/2013/05/13/js-jquery-ajax.html


    $.extend() 扩展工具插件(参数为一个json或布尔值(是否深拷贝),这个json的属性名字就是你要扩展的函数名字,属性值就是写你自己的函数) 调用直接$.你写的属性名
    $.fn.extend() 扩展JQ下的方法,其他如上。调用方法 直接 .属性名 不过调用的一定要是一个JQ对象,写的函数里的this也都是调用这个方法的那个元素


    更多方法请参考 jquery.bootcss.com

  • 相关阅读:
    天天生鲜项目需求分析——基于Django框架的天天生鲜电商网站项目系列博客(一)
    预训练模型专题_GPT2_模型代码学习笔记
    Logistic模型原理详解以及Python项目实现
    【人生苦短,我学 Python】基础篇——基本语句(Day5)
    “TensorFlow 开发者出道计划”全攻略,玩转社区看这里!
    程序员常用的六大技术博客类
    [慕课笔记]Node入口文件分析和目录初始化
    如何在面试中脱颖而出?
    程序媛,坚持这几个好习惯让你越来越美
    2017前端精品面试文章总结
  • 原文地址:https://www.cnblogs.com/lukunlin/p/4365006.html
Copyright © 2020-2023  润新知