【学以致用】JQuery
博客专区 > Asktao 的博客 > 博客详情
【学以致用】JQuery
Asktao 发表于8个月前
【学以致用】JQuery
  • 发表于 8个月前
  • 阅读 22
  • 收藏 2
  • 点赞 0
  • 评论 0

一、JQuery介绍

        JQuery API 1.x--3.x

  1. JQuery是一个类库(或称模块)
  2. JQuery是DOM/BOM/JavaScript的类库
  3. JQuery版本:1.X(兼容所有版本浏览器)、2.X()、3.X()
  4. JQuery和DOM的转换:
    1. jquery对象:    $("#d1")[0] => DOM对象
    2. DOM对象:     $(document.getElementById("d1")  => jquery对象

二、查找元素

    1、选择器:

  1. id选择器
  2. class选择器
  3. 标签选择器
  4. 组合选择器
    <div id="d1">id选择器:$("#d1")</div>
    <div class="c1">class选择器:$(".c1")</div>
    <p>标签选择器:$("p")</p>
    <span>组合选择器:$("#1,.c1,p,span");</span>
    
    <script src="jquery-1.12.4.js"></script>
    <script>
        var d1 = $("#d1");                //id选择器
        var c1 = $(".c1");                //class选择器
        var p_tag = $("p");               //标签选择器
        var C_sel = $("#1,.c1,p,span");   //层组合选择器
    </script>
  5. 层级选择器
    $("#div1 #div2");        //层级选择器 空格 子子孙孙
    $("#div1>#div2");        //层级选择器 大于号 子层
    $("#div1+#div2");        //层级选择器 加号 上一个兄弟元素
    $("#div1-#div2");        //层级选择器 减号 下一个兄弟元素
  6. 基本筛选器
    $('li:first');            //选择所有<li>标签中的第一个li
        $('#div1>li:first');      //也可以进一步筛选
    $('li:odd');              //选择所有<li>标签中的偶数位
    $('li:even');             //选择所有<li>标签中的奇数位
    $('li:last');             //选择所有<li>标签中的最后一个li
    $('li:eq(0)');            //选择所有<li>标签中索引位置的第一个li
    $('li:gt(3)');            //选择所有<li>标签中索引位置大于4的所有li
    $('li:lt(3)');            //选择所有<li>标签中索引位置大于4的所有li
    $('li:header');           //选择所有<li>标签中所有<h1>--<h3>的标签
  7. 属性选择器
    $("div[id]")                //查找所有含有 id 属性的 div 元素
    $("input[name='i1']");      //查找所有 name 属性是 i1 的 input 元素
    $("input[name!='i1']");     //查找所有 name 属性不是 i1 的 input 元素
    $("input[name^='news']");   //查找所有 name 以 'news' 开始的 input 元素
    $("input[name$='end']");    //查找所有 name 以 'end' 结尾的 input 元素
    $("input[name*='man']");    //查找所有 name 包含 'man' 的 input 元素
    $("input[id][name$='man']");//找到所有含有 id 属性,并且它的 name 属性是以 man 结尾的
  8. 表单选择器
    $(":input");    //==>    $("input");
    $(":text");     //==>    $("input[type='text']");
    //其他可选: :input :text :password :radio :checkbox :submit :image :reset :button :file
  9. 表单属性选择器
    //表单对象属性
    $(":checked");     //==>    $("input:checked");
    //其他可选::enabled :disabled :checked :selected

    2、筛选:

$('#i1').next()                 //当前元素的下一个
$('#i1').nextAll()              //当前元素以后所有的
$('#i1').nextUntil('#ii1')      //当前元素以后直到"#ii1"前所有的

$('#i1').prev()                 //当前元素的前一个
$('#i1').prevAll()              //当前元素以前所有的
$('#i1').prevUntil('#ii1')      //当前元素以前直到"#ii1"后所有的

$('#i1').parent()               //当前元素的父层
$('#i1').parents()              //所有祖先的集合[父,爷,太爷]
$('#i1').parentsUntil("body")   //当前元素所有的父级标签直到"body"前所有的

$('#i1').children()         //当前元素的所有子元素
$('#i1').siblings()         //当前元素的所有兄弟元素
$('#i1').find('a')          //搜索所有与指定表达式匹配的元素

$('li:eq(1)')               //搜索所有li标签中的第二个元素的所有HTML内容
$('li').eq(1)               //搜索所有li标签中的第二个元素的所有HTML内容

$('li').first()                 //获取所有li的第一个元素
$('li').last()                  //获取所有li的最后一个元素
$('li').hasClass("classname")   //判断样式是否存在当前元素
$("li").index(this);        //返回搜索匹配的元素,并返回相应元素的索引值,从0开始计数。
$("#d2").index();        //如果不传递参数,则返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的位置。

三、操作元素

    1、文本操作

$("p").text()                   //获取p标签的值
$("p").text("设置值")           //设置p标签的值,纯文本

$("p").html()                           //获取p标签的值
$("p").html("<span>设置值</span>")      //设置p标签的值,所有HTML

$("input:text").val()               //获取文本框的值
$("input:text").val("添加信息")     //设置文本框的值

    2、样式操作

$(".div").addClass("classname");            //添加样式
$(".div").removeClass("classname");         //删除样式
$(".div").toggleClass("classname");         //判断样式是否存在,存在则删除,不存在则添加。

    3、属性操作

//专门用于自定义属性的。注:JQuery1.x 2.x中操作单选和多选框时,删除后不能重新选中。推荐使用prop()
$("#input").attr("data-style");               //获取元素指定属性的值
$("#input").attr("data-style","FreeStyle");   //设置元素指定属性的值
$("#input").removeAttr("attrname");           //删除元素的指定的属性

//专门用于radio和checkbox。我觉得设置其他属性也可以。
$("checkbox").prop("checked");           //获取checked值
$("checkbox").prop("checked",true);     //设置checded值
$("checkbox").removeProp(name);          //用来删除由.prop()方法设置的属性集

    4、文档处理

$("#u1").append("<li>内部插入:插入位置[-1]</li>");      //u1元素,在底部增加一个。
("<li>内部插入:插入位置[-1]</li>").appendTo("#u1");     //append的一个反转,将li添加到#u1的底部。

$("#u1").prepend("<li>内部插入:插入位置[0]</li>");      //u1元素,在前增加一个。
("<li>内部插入:插入位置[0]</li>").prependTo("#u1");    //prepend的一个反转,将li添加到#u1的底部。

$("#u1").after("<li>外部插入:和#u1同级,在#u1前一位</li>");
$("#u1").before("<li>外部插入:和#u1同级,在#u1后一位</li>");

$("#u1 li").eq(1).remove();      //删除#u1下所有li标签的第二个li标签
$("#u1 li").eq(1).empty();       //删除#u1下所有li标签的第二个li的内容
$("#u1 li").eq(3).clone();       //克隆一份,第四个li元素。

    5、CSS操作

$("#d1").css("display");            //获取CSS样式值
$("#d1").css("display","none");     //设置CSS样式值

    6、位置与尺寸

//位置
$(window).scrollTop();           //获取窗口的当前页面距离顶部的距离
$(window).scrollTop(100);        //设置窗口的当前页面距离顶部的距离

$(window).scrollLeft();          //获取当前水平滚动条到最左侧的距离
$(window).scrollLeft(0);         //设置当前水平滚动条到最左侧的距离

$("#d3").offset();                //获取元素在HTML的坐标。返回值:object:{top:20,left:60}
$("#d3").offset().top;            //获取元素在HTML的坐标。返回值:20
$("#d3").offset().left;           //获取元素在HTML的坐标。返回值:60
$("#d3").position();              //获取匹配元素相对父元素的偏移
$("#d3").position().top;          //获取匹配元素相对父元素的垂直偏移
$("#d3").position().left;         //获取匹配元素相对父元素的水平偏移

//尺寸
$("#d3").height();              //获取元素纯高度
$("#d3").height(300);           //设置元素的高度
$("#d3").innerHeight();         //获取第一个匹配元素内部区域高度(包括补白、不包括边框)。
$("#d3").outerHeight();         //获取第一个匹配元素外部高度(默认包括补白和边框)。
$("#d3").outerHeight(true);    //设置为 true 时,计算边距在内。

$("#d3").width();                //获取元素纯宽度
$("#d3").width(200);             //设置元素的宽度
$("#d3").innerWidth();           //获取第一个匹配元素内部区域宽度(包括补白、不包括边框)。
$("#d3").outerWidth();           //获取第一个匹配元素外部宽度(默认包括补白和边框)。
$("#d3").outerWidth(true);      //设置为 true 时,计算边距在内。

    7、事件

  1. DOM:有3种事件绑定的方式。
  2. JQuery:
    //所有JQ所有事件:
    //blur|change|click|dblclick|
    //error|focus|focusin|focusout|
    //keydown|keypress|keyup|
    //mousedown|mouseenter|mouseleave|mousemove|mouseout|mouseover|mouseup
    //|resize|scroll|select|submit|unload|
    $("li").click();                           //绑定方式之一
    $("li").bind("click",function(){});        //绑定方式之二
    $("li").unbind("click",function(){});      //解除方式二的绑定
    $("ul").delegate("li","click",function(){});    //绑定方式之三,委托的方式。(如果c1添加了新li,click事件依然生效)
    $("li").undelegate("click");                //解除方式三的绑定。不带参数表示删除所有delegate()创建的事件。(3.0中已删除)
    $("li").on("click",function(){});          //解除方式四的绑定
    $("li").off("click",function(){});         //解除方式四的绑定
    
    //阻止事件发生
    $("li").click(function(){return false});    //阻止事件发生
  3. script的加载顺序
    $(function(){
        //当页面‘框架’都加载完毕后,加载此处代码
    
        //PS:通常直接在<script>标签中的代码,是当页面所有元素都加载完毕后,再加载。
    })
  4. JQuery的扩展
    $.extend({"xihao":function(){
        return "HAHA"
    }});
    var v = $.xihao()
    alert(v)
    
    
    $.fn.extend({"asktao":function(){
        return "问道"
    }});
    //调用asktao方法
    var v = $("#d3").asktao();
    alert(v)

 

总结,JQ到这里只是一个初步学习。以后还要多看JQuery文档,多做实例!稳步前行。

 

 

 

标签: jQuery 前端
共有 人打赏支持
粉丝 27
博文 87
码字总数 111126
×
Asktao
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: