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. 图片延迟加载jquery插件imgLazyLoading

    实现了图片延迟加载功能,插件代码非常简洁,且每个功能都把注释写得非常详细,适合网友们学习,好好利用哦 引入图片延迟加载Jquery插件文件后,页面使用代码如下: <script type=&qu ...

  2. thinkphp连接数据库

    版本:3.1.1 连接数据库的具体位置 thinkphp/Config/convention.php,默认修改数据库在这里就可以了 但是为了方便,把数据库配置写到Index/Conf/config.p ...

  3. centos忘记开机密码

    系统:centos6.6,忘记开机密码,进入单用户模式进行重置,以下为操作过程. 1. reset(重启)Linux系统,在出现如下图的界面时,请点Enter键,确保一定要快,只存在几秒.. 2.点击 ...

  4. mysql支持跨表delete删除多表记录

    前几天写了Mysql跨表更新的一篇总结,今天我们看下跨表删除. 在Mysql4.0之后,mysql开始支持跨表delete. Mysql可以在一个sql语句中同时删除多表记录,也可以根据多个表之间的关 ...

  5. 【转】Kafka实战－Flume到Kafka

    Kafka实战-Flume到Kafka Kafka   2015-07-03 08:46:24 发布 您的评价:       0.0   收藏     2收藏 1.概述 前面给大家介绍了整个Kafka ...

  6. Linux下的文件及文件后缀名

    Linux下的文件及文件后缀名 2013-03-14 15:34 6969人阅读 评论(0) 收藏 举报 ++++++++++++++++++++++++++++++++++++++正文+++++++ ...

  7. Vue 入门指南 JS

    Vue 入门指南 章节导航 英文:http://vuejs.org/guide/index.html 介绍 vue.js 是用来构建web应用接口的一个库 技术上,Vue.js 重点集中在MVVM模式 ...

  8. Nginx 502 bad gateway问题的解决方法

    Nginx 502 Bad Gateway的含义是请求的PHP-CGI已经执行,但是由于某种原因(一般是读取资源的问题)没有执行完毕而导致PHP-CGI进程终止,一般来说Nginx 502 Bad G ...

  9. HDOJ 3593 The most powerful force

    树形DP / 泛化物品的背包...可以去看09年徐持衡论文<浅谈几类背包问题> The most powerful force Time Limit: 16000/8000 MS (Jav ...

  10. 贝叶斯决策_bayes（新闻分类）

    1.简单例子引入 2.先验概率 3.后验概率 4.最小错误率决策 5.最小风险贝叶斯决策 1. 贝叶斯公式 2简单例子 正常情况下,我们可以快速的将街上的人分成男和女两类.这里街上的人就是我们观测到的 ...