• 初学JQuery相关知识点


    【简单的JQuery】
    注册事件的函数。
     $(document).ready(function(){})

    【JQuery提供的函数】
    $.map(array,fn) 对数组array中每个元素调用fn函数逐个进行处理,fn函数将处理返回,最后得到一个新的数组。
     var arr = [3,5,9];
     var arr2 = $.map(arr,function(item){return item*2});
    $.map不能处理Dictionary风格的数组。

    $.each(array,fn) 对数组array每个元素调用fn函数进行处理,没有返回值。
     var arr = {"tom":"汤姆","jerry":"杰瑞","lily":"莉莉"};
     $.each(arr,function(key,value){alert(key+"="+value);});
    如果是普通风格的数组,则key的值是序号。

    还可以省略function的参数,这时候用this可以得到遍历的当前元素:
     var arr = [3,6,9];
     $.each(arr,function(){alert(this);});

    【JQurey选择器】
    JQurey选择器用于查找满足条件的元素,比如可以用$("#控件ID")来根据控件id获得控件的JQuery对象。
     $("#div1")
     $("TagName")来获取所有指定标签名的JQuery对象。
     $(".test") CSS选择器,同时选择拥有样式的多个元素。
     $("div li") 多条件选择器,获取div下的所有li元素。

    【JQurey的迭代】
     if($("#btn1").length<=0){alert("id为btn1的元素不存在!");}

    【节点遍历】
    next()方法用于获取节点之后的第一个同辈元素。
     $(".menuitem").next("div")
    nextAll()方法用于获取节点之后的所有同辈元素。
     $(".menuitem").nextAll("div")
    siblings()方法用于获取所有同辈元素。
     $(".menuitem").siblings("li")

    【链式编程】

    【基本过滤选择器】
    :first 选取第一个元素。
     $("div:first")选取第一个<div>
    :last 选取最后一个元素。
     $("div:last")选取最后一个<div>
    :not(选择器) 选取不满足“选择器”条件的元素。
     $("input:not(.myClass)")选取不是myClass的<input>
    :even 选取索引奇数的元素。
     $("input:even")
    :odd 选取索引偶数的元素。
     $("input:odd")
    :eq(索引序号)、:gt(索引序号)、:lt(索引序号) 等于、大于、小于索引序列号的元素。
     $("input:li(3):gt(1)")

    【过滤器】
    属性过滤选择器:
     $("div[id]")选择有id属性的<div>
     $("div[title=test]")选取title属性为"test"的<div>
     $("div[title!=test]")选取title属性不为"text"的<div>
    表单对象选择器:
     $("#form1:enabled")选取id为form1的表单内有所启用的元素。
     $("#form1:disabled")选取id为form1的表单内有所禁用的元素。
     $("input:checked")选取所有选中的元素(Radio、CheckBox)。
     $("select:selected")选取所有选中的选项元素(下拉列表)。

    【表单选择器】
     $(":input")选取所有<input>、<textarea>、<select>和<button>元素。
     $(":text")选取所有单行文本框
     $(":password")选取所有密码框。
    同理还有:radio、:checkbox、:submit、:image、:reset、:button、:file、:hidden。

    【JQuery的Dom操作】
    1、使用html()方法读取或者设置元素的innerHTML
     alert($("a:first").html());
     $("a:first").html("hello");
    2、使用text()方法读取或设置元素的innerText
    alert($("a:first").text());
     $("a:first").text("hello");
    3、使用attr()方法读取或设置元素的属性
     alert($("a:first").attr("href"));
     $("a:first").attr("href","http://cnblogs.com");
    4、使用removeAttr删除属性。

    【动态创建Dom节点】
    使用$(html字符串)来创建Dom节点,并且返回一个JQuery对象,
    然后调用append等方法将新创建的节点添加到Dom中。
     var link = $("<a href='http://www.baidu.com'>百度</a>");
     $("div:first").append(link);
    $()创建的就是一个JQuery对象,可以完全进行操作。
     var link = $("<a href='http://www.baidu.com'>百度</a>");
     link.text("百度官方");
     $("div:first").append(link);
    append() 方法用来在元素的末尾追加元素。
    prepend() 方法用来在元素的开始添加元素。
    after() 方法用来在元素之后添加元素。(添加兄弟)
    before() 方法用来在元素之前添加元素。(添加兄弟)

    【删除节点】
    remove() 删除选择的节点。
     $("nl li.testitem").remove(); 删除ul下li中有testitem样式的元素。
    remove()方法的返回值是被删除的节点对象。
     var lis = $("#ulSite li").remove();
     $("#ulSite2").append(lis);
    empty() 是将节点清空。

    【节点操作】
    替换节点:
     $("br").replaceWith("<hr/>"); 将<br/>替换为<hr/>
    包裹节点:(wrap方法用来将所有元素逐个用指定标签包裹。)
     $("b").wrap("<font color='red'></font>")将所有粗体字红色显示

    【样式操作】
    获取样式 attr("class")
    设置样式 attr("class","myclass")
    追加样式 addClass("myclass")
    移除样式 removeClass("myclass")
    切换样式 toggleClass("myclass")
    判断样式 hasClass("myclass")

    【RadioButton操作】
    获取RadioButton的选中值。
     $("input[name=gender]:checked").val();
    设置RadioButton的选中值。
    $("input[name=gender]").val(["女"]);
    注意val中参数的[]不能省略。

    【事件】
    JQuery中的事件绑定:
     $("#btn").bind("click",function(){});
     $("#btn").click(function(){}); 简写版
    合成事件hover,hover(enterfn,leavefn)
    事件冒泡:与javaScript一样。
    调用事件对象的stopPropagation()方法终止冒泡。
     $("tr").click(function(e){alert("tr被点击");e.stopPropagation();});
    阻止默认行为:有的元素有默认行为比如超链接。
     $("a").click(function(e){alert("禁止超链接点击",e.preventDefault();)});
    属性:pageX、pageY、target获得触发事件的元素、which如果是鼠标事件获得按键(1左键,2中键,3右键)。
    altKey、shiftKey、ctrlKey获得alt、shift、ctrl是否按下,为bool值。
    keyCode、charCode属性发生时间时的keyCode、charCode。
    移除事件绑定:bind()方法即可移除元素上所有绑定的事件。
     bind("click")则只移除click事件的绑定。
    一次性事件:如果绑定的事件只想执行一次随后立即unbind可以使用one()方法进行事件绑定。

    【动画】
    show()、hide()方法会显示、隐藏元素。用toggle()方法在显示和隐藏之间切换。
     $(":button[value=show]").click(function(){$("div").show();});
     $(":button[value=hide]").click(function(){$("div").hide();});
    如果show、hide方法不带参数则是立即显示、立即隐藏,如果带参数则会用指定时间进行动态显示、隐藏。
    参数单位:毫秒,也可以使用三个内置的速度:(fast)、(normal)、(slow) (200毫秒)(400毫秒)(600毫秒)。

    【JQery插件】
    jquery.cookie使用方法:
    1、添加jquery.cookie.js 引用它。
    2、设置值,$.cookie('名字','值')。cookie中保存的值都是文本。
    3、读取值,var v=$.cookie('名字')
     $.cookie('名字','值',{expirds:7,domain:'baidu.com',secure:true});
    *JQuery官方的UI控件 JQueryUI

    qún118041544

  • 相关阅读:
    nacos 命名空间
    Error Code: 1175. You are using safe update mode and you tried to update a table without a WHERE that uses a KEY column. To disable safe mode, toggle the option in Preferences
    gitee
    maven引入junit 4.12,项目import org.junit.Test 还是报错.
    gitflow
    202011
    idea 忽略显示不需要的文件
    服务熔断 & 降级区别
    各种微服务框架对比
    zookeeper not connected
  • 原文地址:https://www.cnblogs.com/han1982/p/3246451.html
Copyright © 2020-2023  润新知