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

<style type="text/css">

#one

{

    color:red;

    font-size:30px;

    background-color:#999;}

</style>

</head>

<body>

<div id="one"><span>one</span></div>

<div class="test" bs="aa">two</div>

<div class="test">three</div>

<div class="test">four</div>

<input type="text" name="uid" id="uid" />

<input type="button" id="btn" value="取消绑定" />

<input type="button" id="add" value="绑定事件" />

</body>

<script type="text/javascript">

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

    //js方式

    //1.根据ID取元素，DOM对象

    //var div=document.getElementById("one");

    //2.根据class取元素  取出来的是数组

    //var div=document.getElementsByClassName("test");

    //3.根据name取元素   取出来的是数组

    //var bd=document.getElementsByName("uid");

    //4.根据标签名取元素  取出来的是数组

    //var div=document.getElementsByTagName("div");

    //操作内容

    //1.非表单元素

    //alert(div.innerText);   取值  直接输出

    //div.innerText="aaa";    赋值  直接输出

    //div.innerHTML;          取值或添加HTML代码  可以解析HTML代码

    //2.表单元素

    //div.value                  取值或赋值  

    //操作属性

    //div.setAttribute("","");  //设置属性

    //div.removeAttribute("");  //移除属性

    //div.getAttribute("");     //获取属性

    //操作样式

    //div.style.backgroundColor="red";    设置样式表  背景色 红色

    //alert(div.style.color)            获取样式表  只能获内联样式

    //在数组里面如果要取DOM对象使用索引的方式，如果要取JQUERY对象使用eq()

    //jquery方式

    //1.根据ID取元素，JQUERY对象

    //var div=$("#one");

    //2.根据class取元素   取出来的是数组

    //var div=$(".test");

    //3.根据属性取元素     取出来的是数组

    //var bd=$("[name='uid']");

    //4.根据标签名取元素   取出来的是数组

    //var div=$("div");

    //5.组合选取

    //var div=$("div span");

    //操作内容

    //1.非表单元素

    //alert(div.text());     取值  直接输出

    //div.text("aaa");         赋值  直接输出

    //div.html();             取值或添加HTML代码  可以解析HTML代码

    //2.表单元素

    //div.val("aaa");         取值或赋值  

    //操作属性

    //div.attr("test","aa");    //设置属性

    //div.removeAttr("test");   //移除属性

    //div.attr("test");         //获取属性

    //操作样式

    //div.css("background-color","#FF0");   设置样式表  背景色 黄色

    //alert(div.css("color"));                获取样式表  内联内嵌都可以

    //操作元素

    //var str="<div id='abc' style='width:100px; height:100px; background-color:red'></div>";  //添加元素

    //div.append(str);    //追加元素

    //$("#abc").remove(); //移除某个元素

    /*$(".test").click(function(){    //添加事件

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

        })*/

    /*$(".test").bind("click",function(){   //添加事件

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

        });    

    $("#btn").click(function(){                //解除事件

        $(".test").unbind("click");

        });

    $("#add").click(function(){                //绑定事件

        $(".test").bind("click",function(){

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

        });

        });*/

});

</script>

</html>

php JS和JQ的更多相关文章

  1. JS与JQ倒计时的写法

    页面需要制作一个倒计时的功能:然后度娘了一遍,找到两种写法,原生JS与JQ 的,经过测试原生JS在IE可能会有不刷新的现象所以结合了一个大神的JQ写法修改好了一个. 原生JS写法: HTML: < ...

  2. js模拟jq获取id

    js模拟jq获取id: (jquery)需要自己添加 <!DOCTYPE html> <html lang="en"> <head> <m ...

  3. 前端双引号单引号，正则反向引用，js比较jq

    1.js,jq,css,html属性必须双,如果同时出现需要嵌套使用,属性的规范是双但是也可以用单测试有效 单引号现象举例:jq中获取元素标签是单引号:$('input').click:弹出也是单引号 ...

  4. JS（原生js和jq方式）获取元素属性（自定义属性），删除属性（自定义属性）

    JS(原生js和jq方式)获取元素属性(自定义属性),删除属性(自定义属性) 以下内容: 一.获取元素的属性 二.设置元素的属性 三.删除元素的属性 一.获取元素的属性 1-原生JS 获取属性 .ge ...

  5. 通过js或jq增加的代码，点击事件或其他一些事件不起作用时

    通过js或jq增加的代码,点击事件或其他一些事件不起作用时,可使用 $(document).on("click",".noshow",function() { ...

  6. 用JS和JQ来获取子节点！

    用JS和JQ来获取子节点!   在JS中,如果通过document.getElementsByTagName来获取子元素有个弊端:它不单会获取符合要求的子元素,就连同孙元素也会获取.如果有特殊要求,那 ...

  7. JS与JQ的对比与提高

    来吧, 案例1:先上个例子js写的省市二级联动 <!DOCTYPE html><html> <head> <meta charset="UTF-8& ...

  8. JS与JQ绑定事件的几种方式.

    JS与JQ绑定事件的几种方式 JS绑定事件的三种方式 直接在DOM中进行绑定 <button onclick="alert('success')" type="bu ...

  9. js或者jq 使用cookie 时在谷歌浏览器不好使

    用js或者jq 写cookie时在谷歌浏览器上打开,cookie不能正常使用. 原因:浏览器没有开启cookie,打开cookie 就可以显示 其次,当将代码上传至服务器,再用浏览器打开时,cooki ...

  10. JS、JQ相关小技巧积攒

    JS.JQ相关小技巧积攒,以备不时之需. 1.js 获取时间差:时间戳相减.new Date().getTime()  获得毫秒数,除以(1000*60*60*24) 获得天数. 2.重定向操作:页面 ...

随机推荐

  1. Laravel 5.1 文档攻略 —— Eloquent Collection

    简介 像all()和get(),还有一些处理模型关系这种会返回多条数据的方法,在Eloquent里面会返回一个collection对象集合(对象装在对象里),而不是像DQB的数组结果集合(对象装在数组 ...

  2. Android学习之路书籍推荐

    Android开发书籍推荐:从入门到精通系列学习路线书籍介绍 JAVA入门书籍: < Introduction to java programming > < Core java & ...

  3. 2016年10月16日--ArrayList集合、特殊集合

    ArrayList集合 使用前引用 using System.Collections; ArrayList集合 实例化.初始化 ArrayList al = new ArrayList(); Arra ...

  4. HTML之文本框关键字显示

    文本框默认显示 "请输入关键字",当鼠标点击输入框的时候, "请输入关键字"这几个字消失,移出文本框又显示出来 <!DOCTYPE html> &l ...

  5. 细化如何安装LNMP + Zabbix 监控安装文档以及故障排除

    1.LNMP所需安装包: 上传如下软件包到/soft目录中 mysql- (centos6. 64位自带)也可根据版本自行挑选,前提你了解这个版本 pcre-8.36.tar.gz nginx-.ta ...

  6. java实现远程储存读取文件

    import java.io.BufferedReader;import java.io.BufferedWriter;import java.io.File;import java.io.FileN ...

  7. CentOS 7部署Kafka和Kafka集群

    CentOS 7部署Kafka和Kafka集群 注意事项 需要启动多个shell脚本交互客户端进行验证,运行中的客户端不要停止. 准备工作: 安装java并设置java环境变量,在`/etc/prof ...

  8. rabbitMQ中vhost虚拟主机的理解

    每个virtual host本质上都是一个RabbitMQ Server,拥有它自己的queue,exchagne,和bings rule等等.这保证了你可以在多个不同的application中使用R ...

  9. CentOS新系统必做的几件事

    一.修改yum源 要知道国外的yum源是很慢的,为了提高效率,更变为网易yum源. 首先备份/etc/yum.repos.d/CentOS-Base.repo(系统默认源): mv /etc/yum. ...

  10. ABAP ole方式对EXCEL进行操作

    DATA: excel    TYPE ole2_object,       workbook TYPE ole2_object,       sheet    TYPE ole2_object,   ...