VQuery选择器

Posted 2020-07-30 distant-遥远

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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选择器的主要内容，如果未能解决你的问题，请参考以下文章

VSCode自定义代码片段6——CSS选择器

Android - 片段中的联系人选择器

日期选择器对话框在片段中不起作用[关闭]

在标签片段android中添加谷歌地点选择器

VQuery高级特性

js Vquery