PHP Jquery 代码操作 内容 属性 样式 事件 Json数据

时间：2023-03-09 07:53:10
PHP Jquery 代码操作 内容 属性 样式 事件 Json数据 
<!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 type="text/javascript" src="jquery-1.11.2.min.js"></script>

</head>

<body>

<div id="aa" bs="test"><span>DIV1</span></div>

<div id="bb" class="a">DIV2</div>

<div id="cc" class="a">DIV3</div>

<div id="dd" class="a">DIV4</div>

<input id="txt" bs="w" name="txt" value="hello" />

</body>

<script type="text/javascript">

$(document).ready(function(e) {

    //1.找到元素

    var a1 = document.getElementById("aa"); //JS找到的DOM对象

    var bd = document.getElementById("txt");

    //alert(a1);

    //var a2 = $("#aa"); //Jquery找到的是Jquery对象

    var bd1 = $("#txt");

    //alert(a2[0]);

    var b1 = document.getElementsByClassName("a");

    var b2 = $(".a");

    //alert(b2.eq(0)[0]);

    document.getElementsByTagName("div");

    $("div");

    document.getElementsByName("txt");

    var c1 = $("[name=txt]"); //属性筛选

    //alert(c1[0]);

    //2.操作内容

    //alert(a1.innerHTML);

    //a1.innerHTML = "<span style='color:red'>hello</span>";

    //a1.innerText="<span style='color:red'>hello</span>";

    //alert(bd.value);

    //bd.value = "world";

    //alert(a2.text());

    //a2.text("hello");

    //alert(a2.html());

    //a2.html("<span style='color:red'>hello</span>");

    //alert(bd1.val());

    //bd1.val("world");

    //3.操作属性

    //a1.getAttribute("bs");

    //a1.setAttribute("bs","");

    //a1.removeAttribute("bs");

    //alert(a2.attr("bs"));

    //a2.attr("bs","testjquery");

    //4.操作样式

    //a1.style.color = "red";

    //a1.style.fontSize = "24px";

    //alert(a2.css("color"));

    //a2.css("background-color","pink");

    //5.事件

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

        $(this).css("background-color","red");

        alert("aa");

        })

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

        var s1 = $(this).text();

        alert(s1);

        })

    //6.Json数据

    var js = {

        "a":"hello",

        "b":123,

        "c":[1,2,3],

        "d":{"aa":5555,"bb":"hello world"},

        };

});

</script>

</html>

全部

//1.找到元素

    var a1 = document.getElementById("aa"); //JS找到的DOM对象

    var bd = document.getElementById("txt");

    //alert(a1);

    //var a2 = $("#aa"); //Jquery找到的是Jquery对象

    var bd1 = $("#txt");

    //alert(a2[0]);

    var b1 = document.getElementsByClassName("a");

    var b2 = $(".a");

    //alert(b2.eq(0)[0]);

    document.getElementsByTagName("div");

    $("div");

    document.getElementsByName("txt");

    var c1 = $("[name=txt]"); //属性筛选

    //alert(c1[0]);

找到元素

//2.操作内容

    //alert(a1.innerHTML);

    //a1.innerHTML = "<span style='color:red'>hello</span>";

    //a1.innerText="<span style='color:red'>hello</span>";

    //alert(bd.value);

    //bd.value = "world";

    //alert(a2.text());

    //a2.text("hello");

    //alert(a2.html());

    //a2.html("<span style='color:red'>hello</span>");

    //alert(bd1.val());

    //bd1.val("world");

操作内容

//3.操作属性

    //a1.getAttribute("bs");

    //a1.setAttribute("bs","");

    //a1.removeAttribute("bs");

    //alert(a2.attr("bs"));

    //a2.attr("bs","testjquery");

操作属性

//4.操作样式

    //a1.style.color = "red";

    //a1.style.fontSize = "24px";

    //alert(a2.css("color"));

    //a2.css("background-color","pink");

操作样式

//5.事件

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

        $(this).css("background-color","red");

        alert("aa");

        })

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

        var s1 = $(this).text();

        alert(s1);

        })

事件

//6.Json数据

    var js = {

        "a":"hello",

        "b":123,

        "c":[1,2,3],

        "d":{"aa":5555,"bb":"hello world"},

        };

Json数据

相关文章