zoukankan      html  css  js  c++  java
  • js,jquery基础使用方法

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="jquery-3.1.1.min.js"></script>
        <style type="text/css">
            #aa{ 100px; height:100px;}
        </style>
    </head>
    <body>
    <div id="aa" style="color: #9A0000"><span>aaaaaa</span></div>
    <div class="a1">div1</div>
    <div class="a1">div2</div>
    <span class="a1">span1</span>
    <input type="text" name="uid" id="bd" value="aa">
    <input type="checkbox" id="ck">全选
    <br><br>
    <input type="checkbox" class="ck">
    <input type="checkbox" class="ck">
    </body>
    <script type="text/javascript">
        //js.jquery找元素
        //js找元素
    //    var a = document.getElementById("aa");//找id
        //alert(a);
    //    var a = document.getElementsByClassName("a1");//找class.
    //    alert(a[2]);
        //var a = document.getElementsByName("uid");//找name.
        //alert(a[0]);
        //var a = document.getElementsByTagName("div");//找div标签.
        //alert(a[0]);
        //jquery找元素
    //    var a = $("#aa");//找id
        //lert(a);
    //    var a = $(".a1");//找class.
        //alert(a.eq(2));//要想取某一个class用eq()方法.
        //var a = $("div");//找div标签.
        //alert(a[0]);
        //var a = $("[name=uid]");//根据属性筛选
        //alert(a);
        //js.jQuery操作内容
        //js操作内容
        //非表单元素
        //alert(a.innerText);//文本
        //alert(a.innerHTML);//HTML代码
        //表单元素
        //alert(a.value);//获取表单值
        //a.value="hello world";//改变里面的值
        //Jquery操作内容
        //非表单元素
        //alert(a.text());//获取文本
        //a.text("bbbbbb");//改变值
        //alert(a.html());//HTML代码
        //表单元素
        //alert(a.val());//获取表单值
        //a.val("bb");//修改表单里的值
        //js.jquery操作属性
        //js操作属性
        //a.setAttribute("test","test");//添加属性
        //a.removeAttribute("type");//删除属性
        //alert(a.getAttribute("value"));//输出值
        //jquery操作属性
        //a.attr("text","text");//添加属性
        //a.removeAttr("text");//删除属性
        //alert(a.attr("value"));//输出值
        //a.prop("text","text");//添加属性(这个方法不显示,但功能正常使用。)
        //a.removeProp(a.prop("text"));//删除属性
        //alert(a.prop("text"));//输出值
        //js.jquery操作样式
        //js操作样式
        //a.style.fontSize = "30px";//通过style修改字体大小
        //alert(a.style.color);//输出查看字体颜色
        //jquery操作样式
        //a.css("background-color","green");//背景颜色改为绿色
        //alert(a.css("width"));输出查看宽度
        //js.jquery统一操作样式
        //js统一操作样式
    //    var d = document.getElementsByClassName("a1");
    //    for(var i = 0;i<d.length;i++)
    //    {
    //        d[i].style.fontSize = "30px";
    //    }
        //jquery统一操作
        //$(".a1").css("font-size","30px");//统一修改字体大小
    //    //点击事件
    //    $("#ck").click(function(){
    //        alert($(this));
    //        $(".ck").prop("checked",$(this).prop("checked"));
    //    })//全选
    </script>
    </html>
  • 相关阅读:
    windows中80端口被System占用,PID=4的问题
    SpringBoot中动态加载(热部署)
    eclipse中Cannot change version of project facet Dynamic Web Module to 3.0的问题解决
    Eclipse启动tomcat后404错误
    Eclipse在当前行之上插入一行
    Java中==规则
    简明log4j配置教程
    CentOS7 配置静态IP
    CentOS7 mini安装后没有ifconfig命令的解决办法
    shell编程学习笔记之sed编辑器
  • 原文地址:https://www.cnblogs.com/junmoli/p/6526220.html
Copyright © 2011-2022 走看看