<!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. css样式中的绝对路径的参考对象

    如果div标签中没有position:absolute;样式,那么img的参考对象就是浏览器 如果div标签中有position:absolute;样式,那么img的参考对象就是父元素,即div标签

  2. macbook pro。已经连接上wifi，但是，不能上网的问题

    有天,macbook pro关机后,再打开就上不了网了,后面网上看了,说是安装了 lantern出问题,我一想,有次关机lantern是被我强制关掉的.所以再次打开lantern就可以 上网了,然后正 ...

  3. c3 新特性

    渐变 线性渐变 .line {     height: 100px;     /*线性渐变语法*/     background-image: linear-gradient( to right,/* ...

  4. C++读取txt和保存到txt

    哇,今天又重新用C++来写了一些代码发现自己竟然在类的使用和文件读取和保存上面特别头疼,于是,各种问度娘+各种翻看之前的代码.不禁感叹,自己的代码还是写的太少了,对这些一点都不熟悉.于是,今晚!一定! ...

  5. Ambient Light

    [Ambient Light] Ambient light is light that is present all around the scene and doesn’t come from an ...

  6. polyfill

    [polyfill] 在JavaScript的世界里,有两个词经常被提到,shim和polyfill.它们指的都是什么,又有什么区别? 一个shim是一个库,它将一个新的API引入到一个旧的环境中,而 ...

  7. 开启swap交换分区

    开启swap 1.创建用于交换分区的文件: dd if=/dev/zero of=/mnt/swap bs=1M count=2048 注:block_size.number_of_block 大小可 ...

  8. Java读取文件-BufferedReader/FileReader/InputStreamReader/FileInputStream的关系和区别

    一.Java读取和存储文件数据流 Java读取文件,实际是将文件中的字节流转换成字符流输出到屏幕的过程   这里面涉及到两个类:InputStreamReader和OutputStreamWriter ...

  9. Aptana在Eclipse的安装

    1.下载 com.aptana.rcp.product-3.4.2.zip文件 https://pan.baidu.com/s/1sl81Vit 2.安装 接着Next.直到成功 3.怎么判定安装成功 ...

  10. cef研究

    // Copyright (c) 2010 The Chromium Embedded Framework Authors. All rights // reserved. Use of this s ...