<!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. MySQL 8.0.0 版本发布，亮点都在这了！

    导读 MySQL是一个开放源码的小型关联式数据库管理系统,开发者为瑞典MySQL AB公司.目前MySQL被广泛地应用在Internet上的中小型网站中.由于其体积小.速度快.总体拥有成本低,尤其是开 ...

  2. unity销毁层级物体及 NGUI 深度理解总结

    http://www.2cto.com/kf/201311/258811.html 1.想找到层级面板中某个物体,并销毁,利用下面的代码:    GameObject  obj = GameObjec ...

  3. 2016年10月24日--HTML常用标签

    body的属性: bgcolor                页面背景色 background             背景壁纸.图片 text                     文字颜色 t ...

  4. POJ 3641 快速幂+素数

    http://poj.org/problem?id=3641 练手用,结果念题不清,以为是奇偶数WA了一发 #include<iostream> #include<cstdio> ...

  5. Raspberry Pi 学习笔记之一

    记录几个搭建服务器教程: [教程] 将树莓派变成网络打印机服务器(更新PC和手机端设置)!http://www.eeboard.com/bbs/thread-8818-1-1.html[心得] [分享 ...

  6. Pólya计数定理

    我日啊..被cls的计数题虐得欲仙欲死...根本不会计数QAQ... 不懂数学啊... 前置技能 群 群是二元组\((G,*)\),满足 \(*:(G,G)\rightarrow G\) \(\exi ...

  7. Python核心编程这本书的一些错误

    <Python核心编程第二版>这本书比<Python基础教程第二版修订版>详细很多,丰富了很多细节,虽然它是一本经典的入门书,但我发现还是存在一些明显的错误.在面向对象编程这一 ...

  8. Access an instance through a console

    VNC or SPICE is used to view the console output of an instance, regardless of whether or not the con ...

  9. centos7.0 安装LNMP运行环境

    LNMP作为php流行的运行环境,而最近需要搭建一个内部的php论坛.记录下LNMP的安装: 1.安装mysql 请参考:centos7 安装mysql5.7.11注意事项 2.安装php yum i ...

  10. 数位DP题目汇总

    Google Code Jam 2014 Round 1B Problem B hdu 2089 hdu 3555 uestc 250 (原1307) hdu 3652 hdu 3709 Light ...