• java知识总结-18


    语法规则
    $(selector).function()
    $.function()

    JQuery 选择
    ${"selector"}
    * 选择器---表示所有的元素
    多个选择器可以用“,” 分割

    基本选择器 tag #id .classname
    属性选择器 [attribute = / != /^= / $= / *=(包含) value] [选择器2]
    层级选择器 > (父元素下的所有子元素) + next 元素) ~ 之后的所有元素
    伪类选择器 :first :last :not(selector) :even(偶数) :odd(奇数) :eq(index) :gt :lt
    :contains()--包含 :empty(空的) :has(内容包含) :par :hid :va
    子元素选择器 :first-chile :last-child :nth-child(index) --值可以填入 even odd 3n 2 3n+1 ......
    表单选择器 :input :text 等表单的标签元素
    表单属性选择器 :enabled :disabled

    筛选(选择器选完以后操作) eq() first() last() hasClass()---返回布尔类型
    map() --把原来的数组映射为另一个数组,有funcation 决定

    查找 var p = $("div").find("p[class='strong']) 可以多次使用选择器
    .children() --所有的子元素(不考虑后代元素)
    。parents("div") --所有的先辈元素(不含根元素)中的所有div 元素
    串联 $('a').add('div')
    .add("span") --在原来基础上再添加第二个选择器选择的内容
    .end() --把结果恢复到最近的一个破坏性操作之前,如果没有则返回空集合
    .children() --所有的子元素(不考虑后代元素)

    jquery语法
    $(选择器).操作;
    实例:
    $(this).hide() - 隐藏当前元素
    $("p").hide() - 隐藏所有段落 把标签当做选择器
    $("p .test").hide() - 隐藏所有 class="test" 的段落
    $("#test").hide() - 隐藏所有 id="test" 的元素


    jquery没有以名字选择器,
    jquery对象是数组
    end() 在链式语法中可以恢复之前的方法对数组的破坏,回到之前的状态


    因为jquery 对象不能使用dom 的属性,所以需要把jquery 对象转换为 dom 对象
    $(domobject) -> jqueryobject 该操作得到jQuery 对象
    $(xxx).get(0) / $(xxx)[0] -> domobject 该操作得到 dom 对象
    $(xxx).eq() 得到的是jquery对象

    addClass() --为标签增加一个class 例如:calss="a b c d"

    文件就绪事件
    $(document).ready(function(){
    // 开始写 jQuery 代码.,防止网页还没有加载完就获取元素

    });


    选择器例子
    -----------------------------
    $("p") 元素选择器 ---选择所有的<p>标签
    $("button").click(function(){
    $("p").hide();
    });
    }); //选择所有段落并重写 click 事件
    ------------------------------
    $("#test") ID选择器 ---通过Id选择元素
    $(document).ready(function(){
    $("button").click(function(){
    $("#test").hide();
    });
    });
    ------------------------------
    $(".test") class选择器 ---通过 class 选择元素
    $(document).ready(function(){
    $("button").click(function(){
    $(".test").hide();
    });
    });
    ---------------------------------
    其他高级用法
    $("tr:even") 选取偶数位置的 <tr> 元素
    $("*") 选取所有元素
    $("p.intro") 选取 class 为 intro 的 <p> 元素
    $("ul li:first-child") 选取每个 <ul> 元素的第一个 <li> 元素
    $("[href]") 选取带有 href 属性的元素
    $("a[target!='_blank']") 选取所有 target 属性值不等于 "_blank" 的 <a> 元素

    操作元素:

    改变属性:
    文本:
    text() - 设置或返回所选元素的文本内容
    html() - 设置或返回所选元素的内容(包括 HTML 标记) 只对第一个得到的元素生效
    val() - 设置或返回表单字段的值

    css:
    .css() --改变css 属性
    .toggleClass() --切换class (在选择的基础上把没有的加上class,有的去掉)

    标签属性:
    .attr() --改变属性
    .prop() --当值是布尔型时这个方法设置
    removeProp('name') --删除每个name属性

    添加删除元素
    内部插入
    append() - 在被选元素的结尾插入对象
    appendTo() - 在被选元素的首部插入对象
    prepend() - 在被选元素的开头插入内容
    外部插入
    after() - 在被选元素之后插入内容
    before() - 在被选元素之前插入内容
    insertBefault()
    insertAfter()
    包裹:
    wrap() ---包裹
    unwrap() ---移除包裹
    替换:
    replaceWith() --替换内容
    replaceAll() --用匹配的元素替换到元素

    带回调函数的设置
    $("#btn1").click(function(){
    $("#test1").text(function(i,origText){
    return "Old text: " + origText + " New text: Hello world!
    (index: " + i + ")";
    });
    });
    ----------------------
    attr() 方法用于获取/设置属性值。
    $("button").click(function(){
    $("#w3s").attr({
    "href" : "http://www.w3cschool.cn/jquery",
    "title" : "W3Schools jQuery Tutorial"
    });
    });// 设置属性
    attr("name") --获取值
    attr('name','a') --设置值


    例子:
    $("p").append("Some appended text.");
    删除元素:
    remove() - 删除被选元素(及其子元素)
    empty() - 从被选元素中删除子元素 不会删除该元素
    $("#div1").remove();

    jQuery封装的ajax
    $(selector).load(URL,data,callback);
    必需的 URL 参数规定您希望加载的 URL。
    可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
    可选的 callback 参数是 load() 方法完成后所执行的函数名称。
    示例:
    $("#div1").load("demo_test.txt"); 文件 "demo_test.txt" 的内容加载到指定的 <div> 元素中
    -----------------------------
    jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。
    $.get(URL,callback);
    必需的 URL 参数规定您希望请求的 URL。
    可选的 callback 参数是请求成功后所执行的函数名。
    例子:
    $("button").click(function(){
    $.get("demo_test.php",function(data,status){
    alert("Data: " + data + "nStatus: " + status);
    });
    }); //通过ajax 取得从服务器上的一个文件中取回数据:
    ********************
    $.post(URL,data,callback,type);
    必需的 URL 参数规定您希望请求的 URL。
    可选的 data 参数规定连同请求发送的数据。
    可选的 callback 参数是请求成功后所执行的函数名。
    可选的 type 代表如何处理返回的数据 会自动识别
    例子:
    $("button").click(function(){
    $.post("demo_test_post.html",
    //URL
    { name:"Donald Duck", city:"Duckburg" },
    //数据
    function(data,status){
    alert("Data: " + data + "nStatus: " + status);
    }
    //执行的回调函数 也可以是其他函数名字
    );
    });

    事件名称:
    网页事件:click dblclick mouseenter mouseleave
    鼠标事件:keypress keydown keyup
    表单事件:submit change focus blur
    文档/窗口事件 :load resize scroll unload(等图片等加载完) ready(不等图片加载) 页面加载完毕事件


    $('p').on('click',function(){}) --添加事件
    $(['p').one(****) --添加一个一次性事件
    triggerhander 不会出发浏览器默认事件 不会产生事件冒泡


    效果方法:
    fadeIn() ---用于淡入已隐藏的元素。 可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。. callback 参数是 fading 完成后所执行的函数名称。
    fadeOut() ---- 方法用于淡出可见元素。 可选参数同上
    fadeToggle() ----如果元素已淡出,则 fadeToggle() 会向元素添加淡入效果。 可选参数同上
    fadeTo() ----如果元素已淡入,则 fadeToggle() 会向元素添加淡出效果 必需的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。

  • 相关阅读:
    HDU 1969 Pie(二分查找)
    HDU 1896 Stones (优先队列)
    HDU 1548 A strange lift(BFS)
    HDU 1518 Square(DFS)
    CDOJ1085 基爷与加法等式 爆搜DFS
    Codeforces Round #245 (Div. 2) C. Xor-tree DFS
    Codeforces ZeptoLab Code Rush 2015 B. Om Nom and Dark Park DFS
    Codeforces Round #297 (Div. 2)E. Anya and Cubes 折半搜索
    Codeforces Round #401 (Div. 2)A B C
    Codeforces Round #297 (Div. 2)D. Arthur and Walls 搜索bfs
  • 原文地址:https://www.cnblogs.com/flytwosky/p/7198536.html
Copyright © 2020-2023  润新知