zoukankan      html  css  js  c++  java
  • JQuery学习笔记

    Jquery___2013.10.16

    1、空格造成的影响

    $(‘.test  :hidden’).length;  //是选择class为test的元素中的隐藏子元素

    $(‘.test:hidden’).length;  //是选择隐藏的class为test的元素。从后向前读

    2、DOM选择

    Var p = $(“p”)  //获取P元素

    Var li = $(“ul li:eq(1)”)  //获取ul下面的第二个li的内容。eq从0开始

    Var title = p.attr(“title”) ; //获取p中的title值   attr() 方法设置或返回被选元素的属性值。

    Var  test = li.text(); //获取li的内容。

     li.attr(“title”,”myTitle”);  设置被选元素的属性和值。

    最快的清除页面内容:

    Document.getElementById(“div1”).innerHTML = “”;

    Document.getElementById(“div1”).appendChild(br);  //追加内容

     $(“p”).append(“<b>你好</b>”) 追加内容

    appendTo() ; 反着来,将A追加到B中

    prepend() ; 前置

    prependTo() ; 将A前置到B中。

    After() ; 是插入在p元素之后,为兄弟元素

    InsertAfter() ;

    Before();

    insertBefore();

    2013.10.17

    Empty(); 清空页面元素内容,元素还存在。

    Jquery实现点击增加一行,可以删除这行:

    $(function()

    {

    $(“input[type=button]”).click( function()

    {

    Var br = $(“<br>”);

    Var input = $(“<input type =’file’>”);

    Var button = $(“<input type = ‘button’ value = ‘remove “+(++count) +” ’> ”);

    $(“#div1”).append(br).append(input).append(button);

    Button.click(function()

    {

    Br.remove();

    Input.remove();

    Button.remove();

    });

    });

    });

    二:

    $(“ul > li”) 表示ul直接的后代,没有>表示ul后所有的后代li

    克隆:

    $(this).clone().appendTo(“ul”);

    .clone(true) 表示克隆的对象具有原有的所有的事件。

    替换:

    $(“p”).replaceWith(“<a href = ‘http://www.baidu.com’>baidu</a>”)

    后面的替换掉前面的

    $(“<a href = ‘http://www.baidu.com’>baidu</a>”).replaceAll(“p”)

    前面的替换掉后面的

    包括:

    $(“p“).wrap(“<a href = ‘http://www.baidu.com’>baidu</a>”)

    是给P元素加了个超链接。

    有嵌套元素时是把被包括的内容放在了最里层。

    $(“p“).wrap(“<a href = ‘http://www.baidu.com’>baidu</a>”)

    WrapInner() 把P的文办放在了最里面

    属性操作:

    Attr()获取,设置属性

    removeAttr() 移除属性

    花括号可设置属性对象:

    $(“p”).attr({“title”:”welecome”,”hello”:”world”});

    获取属性:

    $(“p”).attr(“hello”);

    删除属性:

    $(“p”).removeAttr(“title”);

    Dojo 框架

    操作class:  class属性可以有多个,用空格隔开

    <style type=”text/css”>

    样式 *{margin:0 ;padding:0}  //*号表示所有的

    .high{

    Font-weight:bold;

    Color:red

    }

    .another{

    Font-style:italic;

    Color:green

    }

    </style>

    $(“p”).attr(“class”,”high”)

    $(“p”).addClass(“.high”);

    移除:

    $(“p”).removeClass(“high”)

    $(“p”).removeClass() ; 是移除全部class

    两种样式的切换:

    $(“p”).toggleClass(“another”);

    判断元素是否具有特定样式:

    $(“p”).hasClass(“another”);

    是否具有这个选择器:

    $(“p”).is(“.another”);

    Is:selected  checked 判断是否被选中

    $(“p”).html() 打印出p元素内的内容

    $(“p”).text() 是打印出文本内容

    $(“p”).val() ;显示文本

    $(“p”).val(“hello ”) ;替换显示的文本内容

    得到焦点:

    $(“#username”).focus(function()

    {

    Var value = $(this).val();

    If(value == ‘username’)

    {

    $(this).val(‘’);

    }

    });

    失去焦点:

    $(“#username”).blur()

    取得子节点:

    $(“body”).children();

    Var v3 = $(“ul”).children();

    V3[i].innerHTML;

    $(“p”).next (); 下面的兄弟节点 

    next.show();显示 show(‘slow’), show(‘normal), show(‘fast’), show(100), 直接设定ms。

    $(“p”).prev(); 遍历上面的兄弟节点

    $(“p”).siblings(); 上面的和下面的节点

    绑定事件:

    停止事件的冒泡:

    浏览器生成了event对象,

    Event.stopPropagation();  //停止事件的传播

    Var startTime = new Date().getTime();

    $(document).ready 只用加载页面的DOM结构,不用下载外部的文件。速度比

    Window.onload() 快很多。

    Hide() 隐藏

    绑定鼠标放上,离开事件:

    $(“#panel h5.head”).bind(“mouseover”,function())

    $(“#panel h5.head”).bind(“mouseout”,function())

    可直接 $(“#panel h5.head”). mouseover

  • 相关阅读:
    了解java注解
    使用java泛型设计通用方法
    dbutils基本使用
    jquery+ajax+struts2
    c3p0连接数据库的3种方式
    ASP单步调试工具
    设置网页图片不能被用户下载或者另存为
    简单树形菜单
    GBK,GB3212 Unicode编码问题详解
    html页面乱码问题解决方法编码批量转换
  • 原文地址:https://www.cnblogs.com/kennyliu/p/3375228.html
Copyright © 2011-2022 走看看