• PHP语言 -- jquery


    1.引入jquery包 

    <body>
    <div id = "d1" onclick="show(this)" name="div"><b>第一个DIV</b></div>
    <div class = "d">2222</div>
    <div class = "d">3333</div>
    <div class = "d">4444</div>
    <input type="text" name="uid"  />
    </body>
    
    <script type="text/javascript">
    // js 取元素
    var d = document.getElementById("d1");
    
    document.getElementByClassName("d"); //数组
    document.getElementByTagName("div");//根据标签名找
    document.getElementByName("uid");//根据name找
    
    //操作元素
    //1.操作内容
    
    d.innerText //获取文本
    d.innerHtml //获取html代码
    
    d.innerText = "hello"; //给元素赋值(文本)
    d.innerHtml = "<span style = 'color:red'>hello</span>"; //给元素赋值(HTML) 将原有内容替换
    
    d.value //获取或设置表单元素的内容 
    
    //2.操作属性 
    
    d.getAttribute("name"); //获取属性的值
    d.setAtrribute("bs","001"); // 设置属性
    d.removeAttribute("bs"); //移除属性
    
    //3.操作样式
    
    d.style.fontSize //获取样式,必须是写在元素里面的(内联)
    
    d.style.fontSize = "36px"; //修改设置样式

    //事件 function show() //需要在元素里加onclick
    {
    alert(div.innertText);
    } //jquery 一般写在这里面
    $(document).ready(funcion(e){ //jquery 取元素 var c =$("#d1");//根据ID找 var d = $(".d");//根据class for(var i = 0;i<d.lenght;i++) { alert(d.eq(i));//取元素,取出jquery对象 } }); $("div");//根据标签名找 $("[name=uid]"); //根据属性找 //操作元素 //1.操作内容 c.text(); //获取元素内容(文本) c.html(); //获取元素内容(html代码) c.text("hello");//给元素赋值(文本) c.html("<span style='color:red'>hello</span>"); //给元素赋值(html代码) c.val(); //操作表单元素的内容,可以取值赋值 //2.操作属性 c.attr("name");//获取属性 c.attr("bs","001"); //设置属性 c.removeAttr("bs"); //移除属性 //3.操作样式
    c.css("font-size"); //取样式 ,内嵌的也可以取到

    c.css("font-size","36px"); //设置样式

    //事件

    $("#d1").click(function(){

    alert("aa");

    })

    $(".d").click(function(){

    alert($(this).text());//获取元素本身 dbclick 双击 focus获得焦点 blur 失去焦点 change 文本框发生改变

    })

    </script>
  • 相关阅读:
    服务端渲染和客户端渲染
    node(基础)_node.js中的http服务以及模板引擎的渲染
    node基础(二)_模块以及处理乱码问题
    node(基础)_node中的javascript
    vue购物车和地址选配(三)
    nyoj 169 素数
    nyoj 205 求余数
    nyoj 65另一种阶乘问题
    nyoj 734奇数阶魔方
    nyoj64 鸡兔同笼
  • 原文地址:https://www.cnblogs.com/yifangtongxing/p/5427453.html
Copyright © 2020-2023  润新知