• jquery 使用jquery操作Dom


    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>jquery操作css</title>
    <style type="text/css">

    </style>
    </head>
    <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    $("#searchtxt").focus(function(){//搜索框获取鼠标焦点
    //把value值赋值给变量:
    var textvalue=$(this).val();//得到当前文本框的值
    if(textvalue=="电风扇"){//判断如果文本框值是电风扇就清空文本框值
    $(this).val("");//设置成空 //val用于设定HTML内容的值//可以获取或设置元素的value属性值

    }

    });
    //当我们失去焦点的时候,重新设置成电风扇
    $("#searchtxt").blur(function(){
    var textvalue=$(this).val();//获取文本框当前值
    if(textvalue==""){
    $(this).val("电风扇");//失去焦点还原值
    }
    });
    });
    </script>
    <body>
    <input name=""calss="search_txt" value="电风扇"id="searchtxt"></input>
    <input type="button" class="search_bin"value="搜索"></input>
    <body>
    </html>

    节点操作与属性操作!(一)

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>节点操作</title>
    <style type="text/css">
    </style>
    </head>
    <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    $(".contain :header").css({"background":"blue","color":"pink"});
    var newnode="<li>你喜欢谁</li>"//将newnode追加的ul里面
    $("ul").append(newnode);//在原来节点上新追加一个节点
    var newnode2="<li>贝克汉姆</li>";
    $("ul").prepend(newnode2);//在原来节点上新追加一个节点,前置操作
    var newnode3="<li>张杰</li>";
    $("ul").after(newnode3);//张杰在后面
    $(newnode2).insertAfter("ul");//将贝克汉姆插入到ul之后(倒数第二个)
    var newnode4="<li>谢娜</li>";
    $("ul").before(newnode4);//插入到ul前面
    $(".gamelist li:lt(3)").remove();//将节点小于3的删除
    $(".gamelist li:lt(3)").empty();//将节点小于3的删除 */
    var $newnode="<li>你喜欢哪些项目</li>"//新创建节点
    // $(".gamelist li:eq(2)").replaceWith($newnode);//替换ul当中的第3个
    //$($newnode).replaceAll(.gamelist li:eq(2));//替换ul当中的第3个
    $(".gamelist li:eq(2)").click(function(){
    $(this).clone(true).appendTo(".gamelist");//点击的时候复制第三个节点
    //不复制事件处理
    $(".gamelist li:eq(2)").click(function(){
    $(this).clone(false).appendTo(".gamelist");//点击的时候复制第三个节点
    *///替换ul当中的第3个
    $(".contain img").click(function(){
    console.log($(this).attr("alt"));//获取属性值

    });
    });

    在元素内部插入节点:

    append()

    概述  :append是向每个匹配的元素内部追加内容。$("ul").append("li");li追加到ul中  

    这个操作与对指定的元素执行appendChild方法,将它们添加到文档中的情况类似。

    appendTo()是将ul追加到li中  $("ul").appendTo("li");ul追加到li中

  • 相关阅读:
    atitit.html编辑器的设计要点与框架选型 attilax总结
    test
    atitit.提取zip rar文件列表 java php c# 的原理与设计
    atitit.破解 拦截 绕过 网站 手机 短信 验证码 之自动获取手机短信方式 attilax 总结
    Atitit.angular.js 使用最佳实践 原理与常见问题解决与列表显示案例 attilax总结
    SQL2008附加数据库提示错误:5120
    C++函数转换成C#函数
    Nhibernate cookbook 3.0-翻译
    黄聪:如何使用CodeSmith批量生成代码(转:http://www.cnblogs.com/huangcong/archive/2010/06/14/1758201.html)
    给JavaScript初学者的24条最佳实践(转:http://www.cnblogs.com/yanhaijing/p/3465237.html)
  • 原文地址:https://www.cnblogs.com/hualishu/p/8820389.html
Copyright © 2020-2023  润新知