VQuery选择器

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选择器的更多相关文章

常见的js函数
改变元素的样式 var changeStyle = function(elem,name,value){ elem.style[name] = value; } 空位补零 fu ...
前端极易被误导的css选择器权重计算及css内联样式的妙用技巧
记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...
jQuery的61种选择器
The Write Less , Do More ! jQuery选择器 1. #id : 根据给定的ID匹配一个元素 <p id="myId">这是第一个p标签< ...
05.LoT.UI 前后台通用框架分解系列之——漂亮的时间选择器
LOT.UI分解系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui LoT.UI开源地址如下:https://github.com/du ...
CSS 选择器及各样式引用方式
Css :层叠样式表 (Cascading Style Sheets),定义了如何显示HTML元素. 目录 1. 选择器的分类:介绍ID.class.元素名称.符合.层次.伪类.属性选择器. 2. 样 ...
jQuery学习之路（1）-选择器
▓▓▓▓▓▓ 大致介绍终于开始了我的jQuery学习之路!感觉不能再拖了,要边学习原生JavaScript边学习jQuery jQuery是什么? jQuery是一个快速.简洁的JavaScript ...
谈谈一些有趣的CSS题目（十）-- 结构性伪类选择器
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
JQuery 选择器
选择器是JQuery的根基,在JQuery中,对事件的处理,遍历DOM和AJAX操作都依赖于选择器.如果能够熟练地使用选择器,不仅能简化代码,而且还可以事半功倍. JQuery选择器的优势 1.简洁的 ...
jq选择器基础
Jquery $代表选择器使用jq必须要导入jq文件 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js&qu ...

随机推荐

C++ Reflection
http://www.vollmann.com/en/pubs/meta/meta/meta.html http://www.extreme.indiana.edu/reflcpp/ http://w ...
Vim以及Terminal 配色方案---"Solarized"配色
linux用户给vim 以及terminal的配色方案---Solarized配色官网地址:http://ethanschoonover.com/solarized 看这配色:八卦乾坤,赏心悦目,高 ...
java 正则二次转义
JAVA中的正则表达式"\\[([^\\]]+)\\]"这个表示什么意思?两个转义字符是为了表达什么? 正则表达式中"["这样的字符有特殊的意义,所以需要写成& ...
Make命令
Make命令一.Make的概念 Make这个词,英语的意思是"制作".Make命令直接用了这个意思,就是要做出某个文件.比如,要做出文件a.txt,就可以执行下面的命令. $ m ...
Java操作Oracle
public class DBCon { // 数据库驱动对象 public static final String DRIVER = "oracle.jdbc.driver.OracleD ...
使用proguard混淆java web项目代码
1.首先下载proGuard.zip到本地: proguard4.5beta4.tar.zip解压开,2.新建文本文档,修改文件名为XXX.pro,然后复制下面内容到.pro -injars 'Y:\ ...
jQuery EasyUI API 中文文档 - ComboGrid 组合表格
jQuery EasyUI API 中文文档 - ComboGrid 组合表格,需要的朋友可以参考下. 扩展自 $.fn.combo.defaults 和 $.fn.datagrid.defaults ...
Memcached存储命令 - set
Memcached set 命令用于将 value(数据值) 存储在指定的 key(键) 中. 如果set的key已经存在,该命令可以更新该key所对应的原来的数据,也就是实现更新的作用. set 命 ...
[译]Mongoose指南 - Schema
定义schema 用mongoose的第一件事情就应该是定义schema. schema是什么呢? 它类似于关系数据库的表结构. var mongoose = require('mongoose'); ...
mysql sql语句执行时间查询
第一种:show profiles 之类的语句来查看 1.查一下profile是不是打开了,默认是不打开的. mysql> show profiles; Empty set (0.02 sec) ...

VQuery选择器

VQuery选择器的更多相关文章

随机推荐

热门专题