zoukankan      html  css  js  c++  java
  • JQuery

    常用选择器

    $('#div1') //id为div1的节点,如<div id='div1'></div>

    $('span') //所有的span结点,一个包装集
    $('p span') //p标签下的所有span节点,后代节点
    $('p>span') //p标签下的所有span子节点,子代节点

    $('.red') //使用样式red的节点,如<span class="red"></span>

    $('*') //所有节点

    $("div,span,p.cls") //选取所有<div>,<span>和拥有class为cls的<p>标签的一组元素

    基本筛选器

    $('span:first') //第一个节点
    $('span:last') //最后一个节点

    $("td:even") //索引为偶数的节点,从 0 开始
    $("td:odd") //索引为奇数的节点,从 0 开始

    $("td:eq(1)") //给定索引值的节点
    $("td:gt(0)") //大于给定索引值的节点
    $("td:lt(2)") //小于给定索引值的节点

    $(":focus") //当前获取焦点的节点
    $(":animated") //正在执行动画效果的节点

    内容选择器

    $("div:contains('hello')") //包含hello文本的节点
    $("td:empty") //不包含子节点或者文本的空节点
    $("div:has(p)") //含有选择器所匹配的节点
    $("td:parent") //含有子节点或者文本的节点

    表单选择器

    $("input:checked") //所有选中的节点
    $("select option:selected") //select中所有选中的option节点

    $(":input") //匹配所有 input, textarea, select 和 button 节点
    $(":text") //所有的单行文本框
    $(":password") //所有密码框
    $(":radio") //所有单选按钮
    $(":checkbox") //所有复选框
    $(":submit") //所有提交按钮
    $(":reset") //所有重置按钮
    $(":button") //所有button按钮
    $(":file") //所有文件域

    筛选与查找

    $("p").eq(0) //当前操作中第N个jQuery对象,类似索引
    $('li').first() //第一个节点
    $('li').last() //最后一个节点
    $(this).hasClass("node") //节点是否含有某个特定的类,返回布尔值
    $('li').has('ul') //包含特定后代的节点

    $("div").children() //div中的每个子节点,第一层
    $("div").find("span") //查找div下的所有span节点

    $("p").next()    //紧邻p节点后的一个同辈节点
    $("p").nextAll() //p节点之后所有的同辈节点
    $("#node").nextUntil("#node2") //id为"#node"节点之后到id为'#node2'之间所有的同辈节点,掐头去尾

    $("p").prev() //紧邻p节点前的一个同辈节点
    $("p").prevAll() //p节点之前所有的同辈节点
    $("#node").prevUntil("#node2") //id为"#node"节点之前到id为'#node2'之间所有的同辈节点,掐头去尾

    $("p").parent() //每个p节点的父节点
    $("p").parents() //每个p节点的所有祖先节点,body,html
    $("#node").parentsUntil("#node2") //id为"#node"节点到id为'#node2'之间所有的父级节点,掐头去尾

    $("div").siblings() //所有的同辈节点,不包括自己

    属性操作

    $("img").attr("src");        //返回文档中所有图像的src属性值
    $("img").attr("src","node.jpg"); //设置所有图像的src属性
    $("img").removeAttr("src");    //将文档中图像的src属性删除

    $("input[type='checkbox']").prop("checked", true); //选中复选框
    $("input[type='checkbox']").prop("checked", false); //不选中复选框
    $("img").removeProp("src");    //删除img的src属性

    样式操作

    $("p").addClass("selected");   //为p节点加上 'selected' 类
    $("p").removeClass("selected"); //从p节点中删除 'selected' 类
    $("p").toggleClass("selected"); //如果存在就删除,否则就添加HTML代码/文本/值

    内容操作

    $('p').html();            //返回p节点的html内容
    $("p").html("Hello <b>hello</b>!"); //设置p节点的html内容
    $('p').text();            //返回p节点的文本内容
    $("p").text("hello");        //设置p节点的文本内容
    $("input").val();          //获取文本框中的值
    $("input").val("hello");      //设置文本框中的内容

    CSS操作

    $("p").css("color"); //访问查看p节点的color属性
    $("p").css("color","red"); //设置p节点的color属性为red
    $("p").css({ "color": "red", "background": "yellow" }); //设置p节点的color为red,background属性为yellow(设置多个属性要用{}字典形式)

    DOM内部插入

    $("p").append("<b>hello</b>"); //每个p节点内后面追加内容
    $("p").appendTo("div");     //p节点追加到div内后
    $("p").prepend("<b>Hello</b>"); //每个p节点内前面追加内容
    $("p").prependTo("div");   //p节点追加到div内前

    DOM外部插入

    $("p").after("<b>hello</b>"); //每个p节点同级之后插入内容
    $("p").before("<b>hello</b>"); //在每个p节点同级之前插入内容
    $("p").insertAfter("#node"); //所有p节点插入到id为node节点的后面
    $("p").insertBefore("#node"); //所有p节点插入到id为node节点的前面

    DOM删除

    $("p").empty(); //删除匹配的节点集合中所有的子节点,不包括本身
    $("p").remove(); //删除所有匹配的节点,包括本身
    $("p").detach(); //删除所有匹配的节点(和remove()不同的是:所有绑定的事件、附加的数据会保留下来)

    DOM加载完成事件

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

    //缩写
    $(function($) {
    代码...
    });

    绑定事件

    //bind 为每个匹配节点绑定事件处理函数,绑定多个用{}。
    $("p").bind("click", function(){
    alert( $(this).text() );
    });
    $('#div1').bind({
    "mouseover":function () {
    $('#div1').parent().removeClass("hide");
    },"mouseout":function () {
    $('#div1').parent().addClass("hide");
    }
    });

    $("p").one( "click", function(){}) //事件绑定后只会执行一次
    $("p").unbind( "click" ) //反绑一个事件

    //与bind 不同的是当时间发生时才去临时绑定。
    $("p").delegate("click",function(){
    您的代码
    });

    $("p").undelegate();    //p节点删除由 delegate() 方法添加的所有事件
    $("p").undelegate("click") //从p节点删除由 delegate() 方法添加的所有click事件

    $("p").click();   //单击事件
    $("p").dblclick(); //双击事件
    $("input[type=text]").focus() //节点获得焦点时,触发 focus 事件
    $("input[type=text]").blur() //节点失去焦点时,触发 blur事件
    $("button").mousedown()//当按下鼠标时触发事件
    $("button").mouseup() //节点上放松鼠标按钮时触发事件
    $("p").mousemove() //当鼠标指针在指定的节点中移动时触发事件
    $("p").mouseover() //当鼠标指针位于节点上方时触发事件
    $("p").mouseout()  //当鼠标指针从节点上移开时触发事件
    $(window).keydown() //当键盘或按钮被按下时触发事件
    $(window).keypress() //当键盘或按钮被按下时触发事件,每输入一个字符都触发一次
    $("input").keyup() //当按钮被松开时触发事件
    $(window).scroll() //当用户滚动时触发事件
    $(window).resize() //当调整浏览器窗口的大小时触发事件
    $("input[type='text']").change() //当节点的值发生改变时触发事件
    $("input").select() //当input 节点中的文本被选择时触发事件
    $("form").submit() //当提交表单时触发事件
    $(window).unload() //用户离开页面时

    动画效果

    $("p").show()     //显示隐藏的匹配节点
    $("p").show("slow"); //参数表示速度,("slow","normal","fast"),也可为600毫秒
    $("p").hide()     //隐藏显示的节点
    $("p").toggle();    //切换 显示/隐藏

    $("p").slideDown("600"); //用600毫秒时间将段落滑下
    $("p").slideUp("600");  //用600毫秒时间将段落滑上
    $("p").slideToggle("600"); //用600毫秒时间将段落滑上,滑下淡入淡出

    $("p").fadeIn("600");    //用600毫秒时间将段落淡入
    $("p").fadeOut("600");    //用600毫秒时间将段落淡出
    $("p").fadeToggle("600");  //用600毫秒时间将段落淡入,淡出
    $("p").fadeTo("slow", 0.6); //用600毫秒时间将段落的透明度调整到0.6

    AJAX

    $.ajax({
    type: "POST",
    url: "some.php",
    data: "name=John&location=Boston",
    success: function(msg){
    alert( "Data Saved: " + msg );
    }
    });

  • 相关阅读:
    springmvc log4j 配置
    intellij idea maven springmvc 环境搭建
    spring,property not found on type
    intellij idea maven 工程生成可执行的jar
    device eth0 does not seem to be present, delaying initialization
    macos ssh host配置及免密登陆
    centos7 搭建 docker 环境
    通过rest接口获取自增id (twitter snowflake算法)
    微信小程序开发体验
    gitbook 制作 beego 参考手册
  • 原文地址:https://www.cnblogs.com/NachoLau/p/10392922.html
Copyright © 2011-2022 走看看