VQUery

elements属性，储存选中的元素

参数

typeof的作用

字符串

class  ID tagName

函数

事件绑定

对象

直接插入

$函数

绑定事件

click方法

显示隐藏，--show，hide方法

hover方法

解决函数中的this问题

call aplly

toggle方法

点击计数

arguments的使用

样式与属性

css方法

简单形式----设置，获取

获取计算后的样式

attr方法

jquery.js地址           http://pan.baidu.com/s/1pLjEBCR

获取和查找

eq方法

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

<style>

div {width:100px; height:100px; background:red; float:left; margin:10px;}

</style>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<script src="jquery-1.7.1.js"></script>

<script>

$(function (){

    $('div').eq(1).css('background', 'green');

});

</script>

</head>

<body>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

</body>

</html>

eq使用

find方法

<!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="VQuery.js"></script>

<script>

$(function (){

    $('ul').find('.box').css('background', 'red');

});

</script>

</head>

<body>

<ul id="ul1">

    <li></li>

    <li></li>

    <li></li>

</ul>

<ul>

    <li class="box"></li>

    <li class="box"></li>

    <li></li>

</ul>

<ol>

    <li></li>

    <li></li>

    <li></li>

</ol>

</body>

</html>

find的使用

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

<style>

#div1 {width:100px; height:100px; background:red;}

</style>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<script src="VQuery.js"></script>

<script>

$(function (){

    $('#btn1').click(function (){

        $('#div1').show();

    });

    $('#btn2').click(function (){

        $('#div1').hide();

    });

});

</script>

</head>

<body>

<input id="btn1" type="button" value="显示" />

<input id="btn2" type="button" value="隐藏" />

<div id="div1">

</div>

</body>

</html>

显示隐藏

index方法

<!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.7.1.js">

</script>

<script>

$(function(){

    $('input').click(function(){

        alert($(this).index());

        });

    })

</script>

</head>

<body><input type="button" value="aaa" />

<input type="button" value="bb" />

<input type="button" value="ccc" />

<input type="button" value="ddd" />

</body>

</html>

index

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

window.onload=function()

{

    var aBtn=document.getElementsByTagName('input');

    var i=0;

    for(i=0; i<aBtn.length; i++)

    {

        addClick(aBtn[i]);

        }

    function addClick(obj)

    {

        var count=0;

        obj.onclick=function()

        {

            alert(count++);

            }

        }

    }

</script>

</head>

<body>

<input type="button" value="aaa" />

<input type="button" value="bbb" />

<input type="button" value="ccc" />

<input type="button" value="ddd" />

</body>

</html>

点击计数

VQuery选择器的更多相关文章

  1. 常见的js函数

    改变元素的样式   var  changeStyle = function(elem,name,value){      elem.style[name] = value; }   空位补零   fu ...

  2. 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

    记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...

  3. jQuery的61种选择器

    The Write Less , Do More ! jQuery选择器 1. #id : 根据给定的ID匹配一个元素 <p id="myId">这是第一个p标签< ...

  4. 05.LoT.UI 前后台通用框架分解系列之——漂亮的时间选择器

    LOT.UI分解系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui LoT.UI开源地址如下:https://github.com/du ...

  5. CSS 选择器及各样式引用方式

    Css :层叠样式表 (Cascading Style Sheets),定义了如何显示HTML元素. 目录 1. 选择器的分类:介绍ID.class.元素名称.符合.层次.伪类.属性选择器. 2. 样 ...

  6. jQuery学习之路（1）-选择器

    ▓▓▓▓▓▓ 大致介绍 终于开始了我的jQuery学习之路!感觉不能再拖了,要边学习原生JavaScript边学习jQuery jQuery是什么? jQuery是一个快速.简洁的JavaScript ...

  7. 谈谈一些有趣的CSS题目（十）-- 结构性伪类选择器

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  8. JQuery 选择器

    选择器是JQuery的根基,在JQuery中,对事件的处理,遍历DOM和AJAX操作都依赖于选择器.如果能够熟练地使用选择器,不仅能简化代码,而且还可以事半功倍. JQuery选择器的优势 1.简洁的 ...

  9. jq选择器基础

    Jquery $代表选择器 使用jq必须要导入jq文件 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js&qu ...

随机推荐

  1. 斗鱼的sidebar的实现简陋的demo

    斗鱼的sidebar的实现简陋的demo <!DOCTYPE html> <html> <head lang="en"> <meta ch ...

  2. Android签名总结

    signapk.jar与eclipse export插件默认赋予程序一个DEBUG权限的签名 signapk.jar包含有系统权限(system api, permission),而eclipse e ...

  3. JavaScript中变量和函数声明的提升

    现象: 1.在JavaScript中变量和函数的声明会提升到最顶部执行. 2.函数的提升高于变量的提升. 3.函数内部如果用var声明了相同名称的外部变量,函数将不再向上寻找. 4.匿名函数不会提升. ...

  4. springmvc 注解总结

    1.@RequestMapping@RequestMappingRequestMapping是一个用来处理请求地址映射的注解(将请求映射到对应的控制器方法中),可用于类或方法上.用于类上,表示类中的所 ...

  5. Mysql表分区几种方式

    自5.1开始对分区(Partition)有支持,一张表最多1024个分区 查询分区数据: SELECT * from table PARTITION(p0) = 水平分区(根据列属性按行分)= 举个简 ...

  6. Properties类的使用方法

    它提供了几个主要的方法: 1． getProperty ( String key),用指定的键在此属性列表中搜索属性.也就是通过参数 key ,得到 key 所对应的 value. 2． load ( ...

  7. 基于AngularJS的过滤与排序

    前面了解了AngularJS的使用方法,这里就简单的写个小程序,实现查询过滤以及排序的功能. 本程序中可以了解到: 1 angularjs的过滤器 2 ng-repeat的使用方法 3 控制器的使用 ...

  8. 如何获取到Android控件的高度

    问题 如何获取一个控件的长和高,相信很多朋友第一眼看见这个问题都会觉得很简单,直接在onCreate里面调用getWidth.getMeasuredWidth不就可以获得了吗,但是,事实上是并没有简单 ...

  9. git中的版本库，暂存区和工作区

  10. WEB前端知识在乱花渐欲迷人眼的当下，如何分清主次和学习优先级呢？

    从正美的吐槽开始,我回了下,说对盲目跟风的大众失去信心了.然后一些同学说我固步自封,另一些同学估计想说倚老卖老啥的.我想说清楚一点,我从 未停止过学习,只是对知识的重要程度和精力分配有自己的观点.具体 ...