<!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. (转)NHibernate+MySql常见问题

    http://blog.51cto.com/4837471/1567675 版本: NHibernate :NHibernate 4.0.1GA MySql:MySql 5.0.1 常见问题一: “N ...

  2. C++学习一Virtual

    没有系统性学习C++,所以工作中使用特别别扭,也不是不会,也不是不懂,但读代码和写代码时总有点生疏感.所以该补还是补起来,现在想想还是学生时代学习的知识更加扎实,那是融入骨子里的. virtual函数 ...

  3. Pandas统计分析

    Pandas统计分析 pandas数据的基本统计分析 和numpy的函数近似 dates = pd.date_range(',periods=10) dates df = pd.DataFrame(n ...

  4. HTML 设置字体

    HTML,CSS,font-family:中文字体的英文名称 (宋体 微软雅黑)     宋体 SimSun 黑体 SimHei 微软雅黑 Microsoft YaHei 微软正黑体 Microsof ...

  5. spring .cloud ------------java.lang.RuntimeException: com.netflix.client.ClientException，Caused by: java.lang.IllegalArgumentException: MIME type may not contain reserved characters

    1.问题的发生 Feign在默认情况下使用的是JDK原生的URLConnection发送HTTP请求,没有连接池,但是对每个地址会保持一个长连接,即利用HTTP的persistence connect ...

  6. 通过网址request到response经历的过程

    前言当我们在浏览器中输入一个网址,比如www.google.cn,浏览器就会加载出百度的主页.那么浏览器背后完成的具体是怎么样的呢? 总结起来大概的流程是这样的: (1)浏览器本身是一个客户端,当你输 ...

  7. mysql数据库主从同步读写分离（一）主从同步

    1.mysql数据库主从同步读写分离 1.1.主要解决的生产问题 1.2.原理 a.为什么需要读写分离? 一台服务器满足不了访问需要.数据的访问基本都是2-8原则. b.怎么做?  不往从服务器去写了 ...

  8. java 集合 Se HashTreeSet

    Set接口  Set是Collection的子接口,与List相对 Set集合中的元素的特点是1,无序性 2,无下标3,无重复的元素 Set是个接口,所以无法直接创建对象,要依赖它的实现类来创建对象  ...

  9. python文件操作 二

    问题:在传输的时候对方不知道是以什么格式传给用户,传来传去彼此都忘了什么格式: 在编码的时候:utf8:是3个字符,gbk是2个字符,每个字符数字对应的字符,一段2进制串,如果10个字节全部都是中文, ...

  10. Sublime Text使用中的一些心得

    Sublime Text3是每个web前端程序员的必备神器,其中有许多便利的功能及插件.下面列出一些在开发中比较实用的快捷操作,可以极大地提高代码的编写速度及效率. l  在文档中输入代码,即使忘记保 ...