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. （自用）专业排版套装：CTeX + TeXStudio

    \documentclass[UTF8,landscape]{ctexart}%UTF8,ctexart中文支持,landscape横向版面 \usepackage{tikz}%画图 \usepack ...

  2. 知乎布局||offsetTop||侧边栏自动等高

    1.对a标签的详细介绍 直接在a标签使用onclick,怎么去除a的默认链接,onclick="return test()" 注意这里的return 不可舍去,test函数可以直接 ...

  3. jquery满屏滚动代码

    //获取显示器宽度 .高度 $screenW = document.body.clientWidth; $screenH = ; $BTimer = ; // 时间周期 $liSize = $(&qu ...

  4. Visual Studio无法查找或打开 PDB 文件解决办法

    Visual Studio无法查找或打开 PDB 文件解决办法 用VS调试程序时,有时会在VS底部的“输出”框中提示“无法查找或打开 PDB 文件”.这该怎么解决呢? 下面,我们以VS2013为例,来 ...

  5. php常用时间戳记录

    <?php echo '<br/>'; //php获取今日开始时间戳和结束时间戳 echo "今天"; echo '<br/>'; $beginTod ...

  6. ssh远程连接ubuntu

    1. 首先在服务器上安装ssh的服务器端. $ sudo aptitude install openssh-server 2. 启动ssh-server. $  sudo /etc/init.d/ss ...

  7. 【转】SPDY协议

    SPDY协议 - v3 原文:SPDY Protocol - Draft 3 翻译:邱鹏滔(QQ: 95350530,主页:www.fireflysource.com) 1 概述 HTTP协议的瓶颈在 ...

  8. php self与static的区别

    self vs static 用一个demo来直接说明self与static的区别.self示例: <?phpclass Vehicle {    protected static $name ...

  9. HighCharts选项和参数详细配置查询表

    概述:作为一款出色的交互图表制作工具,HighCharts有着全面的选项.参数等配置信息.为了帮助大家进一步掌握HighCharts,今天我们为大家整理了HighCharts的所有配置信息和说明,将其 ...

  10. 你可能不知道的Google Chrome命令行参数

    概述:              关于Google Chrome命令行参数(英文叫Google Chrome Command line switches),是Chrome为了实现实验性功能.方便调试. ...