当前位置 博文首页 > m0_45291815的博客：jquery简单记录

最大化 缩小

    m0_45291815的博客：jquery简单记录

    作者：[db:作者] 时间：2021-09-02 19:08

    jQuery简单使用文档

    1、介绍

    jQuery是js的库。也就是说jQuery是很多js的方法封装在了一个文件中。

    jQuery是前端编程中使用最多的库。曾经风靡前端。

    $.fn是jQuery的原型对象

    2、优点：

    1. 强大的选择器机制
    2. 优质的隐式迭代
    3. 无所不能的链式编程

    官网：jquery.com

    中文方法大全：jquery.cuishifeng.cn

    3、引用方法和检测

    要使用jquery首先需要下载一个jquery文件，然后先引入才能使用。

    首先检测一下有没有引入成功，就是输出$或者就jQuery。这是jQuery暴露在全局的唯一的两个函数。

    检测引入jquery文件是否成功，弹出$(alert（$）)

    结果:返回function(e,t){return new k,fn.init(e,t)}

    4、使用

    jQ获取的都是伪数组-jQ对象

    1、获取的对象处理

    1. jquery对象不能使用原生js操作dom元素的方法来操作，除非将jquery对象取下标拿到精准的dom元素：

      $("div")[0]
$("div").get(0);

    2. 原生js的dom元素也不能使用jquery提供的方法操作，除非将dom元素转为jquery对象：

      var div = document.querySelector("div");
$(div).text();

    2、入口函数

    $(function(){});
$(document).ready(function(){});
$(window).ready(function(){});

    5、选择器

    过滤、查找、串联

    1、基础

    $div = $("div");
//或者
$div = jQuery("div");
    1. id选择器：$("#id名")
    2. class类选择器：$('.类名')
    3. 标签选择器：$('标签名')
    4. 属性选择器：$("标签名(属性='属性值')")
    5. 伪类选择器(表格的伪类)：
      • $("li:first-child")
      • $("li:last-child")
      • $("li:nth-child(数字)")//第一元素对应数字是1
      • $("li:empty")//空标签
    6. jQuery获取元素有个特点，页面中能选到多个元素就会都获取到，也就是说获取到的是集合

    2、筛选器

    1. $("li:first")
    2. $("li:last")
    3. $("li:event")//奇数
    4. $("li:odd")//偶数
    5. $("li:eq(数字)")//选择下标是指定数字的元素
    6. $("li:lt(数字)")// 下标小于指定数字的元素
    7. $("li:gt(数字)")// 下标大于指定数字的元素
    8. $("div:has(p)")//含有p的div
    9. $("div:is(p)")//是否含有p，反布尔值

    3、表单元素选择器

    1. $(":input")// 匹配所有的表单元素 包括：文本框（input）下拉列表(select)、文本域(textarea)
    2. $(":text")// 匹配单行文本框type=“text” $("input:text") $("input[type=text]")
    3. $(":password") // 匹配单行密码框
    4. $(":radio") //匹配单选按钮
    5. $(":checkbox")// 匹配多选按钮
    6. $(":submit")// 匹配提交按钮
    7. $(":reset")// 匹配重置按钮
    8. $(":image")// 匹配图片按钮
    9. $(":button")// 匹配普通按钮
    10. $(":hidden")// 匹配隐藏域

    4、表单对象选择器

    1. $("input:enabled")// 所有可用表单元素
    2. $("input:disbaled")// 所有禁用表单元素
    3. $("input：checked")// 所有选中的表单元素-- 重点
    4. $("input:not(:checked)")//未选
    5. $("select:selected")// 被选中的下拉框元素 – 重点

    5、筛选器方法 – 重点

    $("li").first() // 第一个元素
$("li").last() // 最后一个元素
$("div").next() // div的下一个兄弟元素
$("div").prev() // div的上一个兄弟元素
$("div").nextAll() // div后面的所有兄弟元素
$("div").prevAll() // div前面的所有兄弟元素
$("div").parent() // div的父元素
$("div").parents() // div的所有直系祖宗元素
$("div").eq(数字) // 指定下标的div元素
$("div").find(选择器) // div下的指定元素（）
$("div").siblings() // 自己除外的所有兄弟元素

    6、内容选择器

    $("标签:contains('内容')")

    6、事件

    注意：jQuery的事件绑定不是像原生json绑定事件那样的覆盖式绑定，而是多次重复绑定。类似addEventListener属性。

    1、正常的

    $("div").click(function(){});
$("div").mouseover(function(){});

    2、window.onload等效

    即入口函数

    $(function(){});
$(document).ready(function(){});

    3、on绑定

    on方法用于绑定事件、委托元素、传入参数，执行函数

    $(元素).on('事件类型'[,委托元素][,传入的参数],处理的函数)

    注：委托元素不加$符，传入参数在e的data里，e没有兼容问题

    2、off方法用于解绑事件

    $(元素).off(事件类型[,处理函数])//不加处理函数解除所有此类型事件绑定

    3、trigger方法用于手动触发事件：

    $(元素).trigger(事件类型[,处理函数])；
//例如
btn.on("click",function(){
   div.trigger("click");//通过btn的点击事件触发div的点击事件
});

    4、只能触发一次的事件：

    $(元素).one(事件类型,处理函数);

    5、特殊事件：

    hover事件，包含鼠标放上去和鼠标离开

    $("元素").hover(鼠标放上去的处理函数,鼠标离开的处理函数)

    6、阻止事件

    在jQuery事件处理程序里返回了false：既阻止事件冒泡也阻止事件默认行为

    7、bind绑定

    $(元素).bind(type,handle);

    8、unbind移除绑定

    $(元素).unbind();//移除该元素所有的绑定方法

    9、解决重复绑定的办法

    $(元素).off("click").on("click",function(){})
$(元素).unbind("click").bind("click",function(){})
$(元素).die("click").live("click",function(){})

    7、标签属性操作

    1、设置属性：

    $("div").prop(属性名,属性值);
//注意，checkbox的是否选择用
$("check").prop("checked");
//设置或获取。

    2、获取属性：

    $("div").prop(属性名);

    3、设置自定义属性：

    $("div").attr(属性名,属性值);

    4、获取自定义属性：

    $("div").attr(属性名);

    5、删除属性：

    $("div").removeProp(属性名);
$("div").removeAttr(属性名); // 删除自定义属性

    案例：全选反选

    js写法

    <body>
<input type="checkbox">商品1<br>
<input type="checkbox">商品2<br>
<input type="checkbox">商品3<br>
<input type="checkbox">商品4<br>
<input type="checkbox">商品5<br>
<input type="checkbox">商品6<br>
<button class="all">全选</button><button class="reverse">反选</button><button class="allNot">取消</button><br>
<span>删除</span>
</body>
<script src="../js/jquery.js"></
    上一篇：FCKeditor 2.0 简化和使用
    下一篇：没有了