<!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 src="jquery-1.11.2.min.js"></script>   //引入Jquery

<style type="text/css">

#d1

{

    font-size:24px;

}

.list

{

    width:200px;

    height:30px;

    text-align:center;

    line-height:30px;

    vertical-align:middle;

    background-color:#999;

    color:#F00;

}

</style>

</head>

<body>

<div id="d1" name="div" ><b>第一个DIV</b></div>

<div class="d">22222</div>

<div class="d">333333</div>

<div class="d">444444</div>

<div class="list">hello</div>

<div class="list">world</div>

<div class="list">hai</div>

<div class="list">aaaa</div>

<input type="text" bs="uid" />

<input type="checkbox" id="aa" value="hello" />

<input type="button" id='btn' value="取值"/>

</body>

<script type="text/javascript">

//JS取元素，取出来的是具体的元素对象

//var d = document.getElementById("d1");

//alert(document.getElementsByClassName("d"));

//alert(document.getElementsByTagName("div"));

//alert(document.getElementsByName("uid"));

//操作内容

//alert(d.innerText); //获取文本内容

//alert(d.innerHTML); //获取HTML代码

//d.innerText = "hello"; //给元素赋值（文本）

//d.innerHTML = "<span style='color:red'>hello</span>"; //给元素赋值（HTML代码）

//d.value  获取或者设置表单元素的内容

//操作属性

//alert(d.getAttribute("name")); //获取属性的值

//d.setAttribute("bs","001"); //设置属性

//d.removeAttribute("name"); //移除属性

//操作样式

//alert(d.style.fontSize); //获取样式，必须是写在元素里面的

//d.style.fontSize = "36px"; //修改设置样式

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

    //Jquery取元素，取出来的是jquery对象

    //var d = $("#d1"); //根据ID找

    /*var d = $(".d"); //根据CLASS找

    for(var i=0;i<d.length;i++)

    {

        alert(d.eq(i));

    }*/

    //alert($("div")); //根据标签名找

    //alert($("[bs=uid]")); //根据属性找

    //操作内容

    //alert(d.text()); //获取元素的内容（文本）

    //alert(d.html()); //获取元素的内容（HTML代码）    

    //d.text("hello"); //给元素赋值（文本）

    //d.html("<span style='color:red'>hello</span>");    //给元素赋值（HTML代码）

    //d.val(); //操作表单的内容，可以取值赋值

    //操作属性

    //alert(d.attr("name")); //获取属性

    //d.attr("bs","001"); //设置属性

    //d.removeAttr("bs"); //移除属性

    //操作样式

    //alert(d.css("font-size")); //取样式

    //d.css("font-size","36px"); //设置样式

    //事件

/*    $("#d1").click(function (){

        alert("aa");

        })*/

/*    $(".d").click(function(){

        //alert($(this).text());

        })*/

    //菜单选中

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

        //让所有元素变为非选中状态

        $(".list").css("background-color","#999").css("color","#F00");

        //让该元素变为选中状态

        $(this).css("background-color","#60F").css("color","#FFF");

        })

    //取checkbox选中值

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

        if($("#aa")[0].checked)

        {

            alert($("#aa").val());

        }

        else

        {

            alert("未选中！");

        }

    })

});

</script>

</html>

Jquery和JS的区别的更多相关文章

  1. JQUERY与JS的区别

    JQUERY与JS的区别 <style type="text/css"> #aa { width:200px; height:200px; } </style&g ...

  2. jQuery与js的区别，并有基本语法详解，

    通过过一下对比,我们能很清楚的发现jquery与js的区别,运用jquery能大量减少代码量,不过js里面关于时间的setinterval和settimeout只能用js <script src ...

  3. jQuery于js的区别和联系

    一.什么是jQuery jQuery 是 js 的一个库,封装了我们开发过程中常用的一些功能,方便我们调用,提高开发效率. js库是把我们常用的功能放到一个单独的文件中,我们用的时候,直接引用到页面里 ...

  4. jquery和Js的区别和基础操作

    jqery的语法和js的语法一样,算是把js升级了一下,这两种语法可以一起使用,只不过是用jqery更加方便 一个页面想要使用jqery的话,先要引入一下jqery包,jqery包从网上下一个就可以, ...

  5. jquery.js和jquery.min.js的区别介绍

    1.区别:jquery官网提供2种jQuery的下载,一种是jquery.js另一种是jquery.min.js文件名不一定完全相同,但通常情况下:jquery.js是完整的未压缩的jQuery库,文 ...

  6. jquery.js和jquery.min.js的区别和springboot整合echarts.min.js

    1.区别:jquery官网提供2种jQuery的下载,一种是jquery.js另一种是jquery.min.js文件名不一定完全相同,但通常情况下:jquery.js是完整的未压缩的jQuery库,文 ...

  7. jQuery与JS的区别，以及jQuery的基础语法

    *在使用jQuery时,要在页面最上端加上 <script src="../jquery-1.11.2.min.js"></script> 看一下js与jQ ...

  8. jquery与js的区别与基础操作

    一．什么是 jQuery jQuery是一个JavaScript库,它通过封装原生的JavaScript函数得到一整套定义好的方法.它的作者是John Resig,于2006年创建的一个开源项目,随着 ...

  9. JQuery与js具体使用的区别（不全，初学）

    jQuery能大大简化Javascript程序的编写 要使用jQuery,首先要在HTML代码最前面加上对jQuery库的引用,比如: <script language="javasc ...

随机推荐

  1. RecyclerView的Item和Item内的控件点击处理

    需求场景:RecyclerView的Item需要点击,或者Item中的某个控件需要点击,或者两者同时需要点击处理. 一.adapter代码如下: package com.ldw.adapter; im ...

  2. 爬虫学习笔记（二）http请求详解

    上篇博客里面写了,爬虫就是发http请求(浏览器里面打开发送的都是http请求),然后获取到response,咱们再从response里面找到想要的数据,存储到本地. 咱们本章就来说一下什么是http ...

  3. 牛客网 Wannafly挑战赛8 A.小Y和小B睡觉觉

    写了一会不想写了... A-小Y和小B睡觉觉 链接:https://www.nowcoder.com/acm/contest/57/A来源:牛客网 时间限制:C/C++ 1秒,其他语言2秒 空间限制: ...

  4. go 函数回调

  5. 2018年东北农业大学春季校赛 F wyh的集合【思维】

    链接:https://www.nowcoder.com/acm/contest/93/F来源:牛客网 题目描述 你们wyh学长给你n个点,让你分成2个集合,然后让你将这n个点进行两两连接在一起,连接规 ...

  6. Java NIO中的FileLock（文件锁）

    FileLock,文件锁. 文件锁在OS中很常见,如果多个程序同时访问.修改同一个文件,很容易因为文件数据不同步而出现问题.给文件加一个锁,同一时间,只能有一个程序修改此文件,或者程序都只能读此文件, ...

  7. 小菜的系统框架界面设计-XiaoCai.WinformUI代码开源

    我的源码分享 曾经,看到别人漂亮的系统界面,合理的布局,可是却没有提供源码,道理很简单,就是有偿提供,实际上对于有些技巧的东西也并没有多么难,只是不懂原理,感觉到困难罢了. 而对于刚毕业的我,求知欲强 ...

  8. ADO.NET:连接数据字符串

    ylbtech-ADO.NET:ADO.NET-Oracle|SQLServer|MySql|Access|Excel-dddd ADO.NET:连接数据字符串 1.A,SqlServer返回顶部 1 ...

  9. Kali Linux信息收集工具全

    可能大部分渗透测试者都想成为网络空间的007,而我个人的目标却是成为Q先生! 看过007系列电影的朋友,应该都还记得那个戏份不多但一直都在的Q先生(由于年级太长目前已经退休).他为007发明了众多神奇 ...

  10. 【温故知新】——Bootstrap响应式知识点复习

    前言:本文是自己在学习课程中的课程笔记,这里用来温故知新的,并非本人原创. 开发工具 1.记事本,Editplus,... ... 2.Sublime,Dreamweaver 3.Webstorm = ...