<!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数据

PHP Jquery 代码操作 内容 属性 样式 事件 Json数据的更多相关文章

  1. JQuery DOM操作（属性操作/样式操作/文档过滤）

    jQuery——入门(三)JQuery DOM操作(属性操作/样式操作/文档过滤) 一.DOM属性操作 1.属性 (1).attr() 方法 语法:$(selector).attr(name|prop ...

  2. jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表

    对于问题从后台获取json数据,将内容填充到下拉列表,代码非常简单,具体过程请看下面代码. 需求:url:链接     par:ID       sel:下拉列表选择器 function BuildS ...

  3. jquery的ajax异步请求接收返回json数据

    http://www.jb51.net/article/51122.htm jquery的ajax异步请求接收返回json数据方法设置简单,一个是服务器处理程序是返回json数据,另一种就是ajax发 ...

  4. iOS/macOS推荐个高效苹果开发工具， JSON 转模型代码工具，不再为复杂JSON数据写模型而烦恼，支持Swift/Objective-C，极速转换

    CCJSON 是一款运行在macOS上 JSON 转模型代码工具,不再为复杂JSON数据写模型而烦恼,可识别嵌套模型,字典/数组,支持Swift/Objective-C,操作方便,极速转换.下载 效果 ...

  5. jquery用ajax方式从后台获取json数据，将内容填充到下拉列表。

    从后台获取json数据,将内容填充到下拉列表. url:链接 par:ID sel:下拉列表选择器 //获取下拉列表 function BuildSelectBox(url, par, sel) { ...

  6. 使用jQuery向asp.net Mvc传递复杂json数据-ModelBinder篇

    调用jQuery的ajax方法时,jQuery会根据post或者get协议对参数data进行序列化; 如果提交的数据使用复杂的json数据,例如: {userId:32323,userName:{fi ...

  7. ASP.NET实现二维码 ASP.Net上传文件 SQL基础语法 C# 动态创建数据库三（MySQL） Net Core 实现谷歌翻译ApI 免费版 C#发布和调试WebService ajax调用WebService实现数据库操作 C# 实体类转json数据过滤掉字段为null的字段

    ASP.NET实现二维码 using System;using System.Collections.Generic;using System.Drawing;using System.Linq;us ...

  8. jquery Nestable 获取改变排序后的json数据 拖动排序

    <script type="text/javascript"> jQuery(function($){ $('.dd').nestable(); $('.dd-hand ...

  9. 如何使用jQuery向asp.net Mvc传递复杂json数据

    jQuery提供的ajax方法能很方便的实现客户端与服务器的异步交互,在asp.net mvc 框架使用jQuery能很方便地异步获取提交数据,给用户提供更好的体验! 调用jQuery的ajax方法时 ...

随机推荐

  1. 获取tensorflow中tensor的值

    tensorflow中的tensor值的获取: import tensorflow as tf #定义变量a a=tf.Variable([[[1,2,3],[4,5,6]],[[7,8,9],[10 ...

  2. R语言-直方图

    1.直方图 直方图和柱形图的区别:直方图表示频数,柱形图表示数量. 一般直方图的X轴表示取值范围,Y轴表示频数 hist() 函数 > hist(rnorm(1000)) #1000个正态随机数 ...

  3. 重新装kafka

    Linux搭建kafka   一.安装Java 1.查看linux 的系统版本 root@aliyun:~# uname --m x86_64 2.安装java mkdir -p /usr/local ...

  4. javascript 执行环境，作用域、作用域链、闭包

    1.执行环境 执行环境是JavaScript中国最为重要的一个概念.执行环境定义了变量或函数有权访问的其他数据,决定了他们各自的行为.每个执行环境都有一个与之关联的变量对象,环境中定义的所有变量和函数 ...

  5. Avalon Framework

    Apache Avalon has closed. Apache Avalon began in 1999 as the Java Apache Server Framework and in lat ...

  6. 下载excel

    使用struts2的方式完成下载 对于下载excel2003,contentType如此设置 <result name="success" type="stream ...

  7. Log4j2配置及使用

    Log4j2:一个日志管理工具.Log4j的升级版,需要Java6以上   一.安装log4j2依赖包 1.通过maven的pom.xml直接引入jar: log4j-api和log4j-core & ...

  8. 如何解决make: Nothing to be done for `all' 的方法

    正常情况下,当文件没有更新且已经编译过时,再次make就会报这个错误,表示文件未更新,不需要编译. 如果异常情况没有检测到更新文件,或者想要强制重新编译,只需要make clean,再次编译即可.

  9. linux 重定向命令详解(如1>/dev/null 2>&1)

    基础 0:表示标准输入stdin 1:表示标准输出stdout,系统默认为1,可省略(即1>/dev/null等价于>/dev/null) 2:表示标准错误stderr >:表示重定 ...

  10. Codeforces Beta Round #79 (Div. 2 Only)

    Codeforces Beta Round #79 (Div. 2 Only) http://codeforces.com/contest/102 A #include<bits/stdc++. ...