zoukankan      html  css  js  c++  java
  • Jquery和JS的区别

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script src="jquery-1.11.2.min.js"></script>   //引入Jquery
    <style type="text/css">
    #d1
    {
        font-size:24px;
    }
    .list
    {
        width:200px;
        height:30px;
        text-align:center;
        line-height:30px;
        vertical-align:middle;
        background-color:#999;
        color:#F00;
    }
    </style>
    </head>
    
    <body>
    
    <div id="d1" name="div" ><b>第一个DIV</b></div>
    
    <div class="d">22222</div>
    <div class="d">333333</div>
    <div class="d">444444</div>
    
    
    <div class="list">hello</div>
    <div class="list">world</div>
    <div class="list">hai</div>
    <div class="list">aaaa</div>
    
    
    <input type="text" bs="uid" />
    
    
    <input type="checkbox" id="aa" value="hello" />
    
    <input type="button" id='btn' value="取值"/>
    
    
    </body>
    <script type="text/javascript">
    
    //JS取元素,取出来的是具体的元素对象
    //var d = document.getElementById("d1");
    //alert(document.getElementsByClassName("d"));
    //alert(document.getElementsByTagName("div"));
    //alert(document.getElementsByName("uid"));
    
    //操作内容
    //alert(d.innerText); //获取文本内容
    //alert(d.innerHTML); //获取HTML代码
    //d.innerText = "hello"; //给元素赋值(文本)
    //d.innerHTML = "<span style='color:red'>hello</span>"; //给元素赋值(HTML代码)
    
    //d.value  获取或者设置表单元素的内容
    
    //操作属性
    //alert(d.getAttribute("name")); //获取属性的值
    //d.setAttribute("bs","001"); //设置属性
    //d.removeAttribute("name"); //移除属性
    
    
    //操作样式
    //alert(d.style.fontSize); //获取样式,必须是写在元素里面的
    //d.style.fontSize = "36px"; //修改设置样式
    
    
    
    $(document).ready(function(e) {
        
        //Jquery取元素,取出来的是jquery对象
        //var d = $("#d1"); //根据ID找
        /*var d = $(".d"); //根据CLASS找
        
        for(var i=0;i<d.length;i++)
        {
            alert(d.eq(i));
        }*/
        
        //alert($("div")); //根据标签名找
        
        //alert($("[bs=uid]")); //根据属性找
        
        //操作内容
        //alert(d.text()); //获取元素的内容(文本)
        //alert(d.html()); //获取元素的内容(HTML代码)    
        
        //d.text("hello"); //给元素赋值(文本)
        //d.html("<span style='color:red'>hello</span>");    //给元素赋值(HTML代码)
        
        //d.val(); //操作表单的内容,可以取值赋值
        
        
        //操作属性
        //alert(d.attr("name")); //获取属性
        //d.attr("bs","001"); //设置属性
        //d.removeAttr("bs"); //移除属性
        
        //操作样式
        //alert(d.css("font-size")); //取样式
        //d.css("font-size","36px"); //设置样式
        
        
        //事件
    /*    $("#d1").click(function (){
            
            alert("aa");
            
            })*/
            
        
    /*    $(".d").click(function(){
            
            //alert($(this).text());
    
            })*/
            
        //菜单选中
        $(".list").click(function(){
            
            //让所有元素变为非选中状态
            $(".list").css("background-color","#999").css("color","#F00");
            
            //让该元素变为选中状态
            $(this).css("background-color","#60F").css("color","#FFF");
                    
            })
            
        //取checkbox选中值
        $("#btn").click(function(){
            
            if($("#aa")[0].checked)
            {
                alert($("#aa").val());
            }
            else
            {
                alert("未选中!");
            }
            
        })
            
            
    
        
        
        
        
        
        
        
        
    });
    
    </script>
    </html>
  • 相关阅读:
    Android见招拆招十:Migrate Android Code
    Android转载三:(布局)ImageView中src与background的区别
    Android见招拆招九:字符编码问题导入项目报错
    Android见招拆招八:多次遇到的R.java编译问题
    Android学习笔记五:(布局)Layout_margin和Layout_padding的区别
    Android见招拆招七:Error parsing XML: no element
    Window10系统修改hosts文件的方法
    Foxmail:‘错误信息:由于连接方在一段时间后没有正确答复或连接的主机没有反应,连接尝试失败’的解决办法
    Oracle 查询NULL字段/空字符串
    Python 安装第三方模块时 报Retrying(Retry(total=4, connect=None, read=None, redirect=None, status=None))...[WinError 10061]由于目标计算机积极拒绝,无法连接 错误
  • 原文地址:https://www.cnblogs.com/zhanghaozhe8462/p/5361317.html
Copyright © 2011-2022 走看看