20151006jq1基础选择器

最新推荐文章于 2024-05-31 10:26:40 发布

weixin_33874713

最新推荐文章于 2024-05-31 10:26:40 发布

阅读量55

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/16lily521/p/4877442.html

版权

JQuery基本知识

JQuery目前企业中用的最多的一种JS框架,对常用的功能进行封装和简化

JQuery使用

需要有JQuery类库文件引入

页面加载完之后在JS文件中写$(function(){});

用选择器查找对象$("#d1") #(".d1")

执行事件 $("#d1").click

$(function () {
    $("#btn1").click(function () {
        alert("hello world");
    });
});

js写法

document.getElementById("#d1").οnclick=function(){alert("hello world");}

对象互转*

JQuery对象转DOM对象 JQuery对象[0]

$("#btn1")[0].onclick

DOM对象转JQuery对象

$(document.getElementById("#d1")).click $(DOM对象)

常用选择器

class选择器： class

$(".c1").css("color","#f00");设置一个样式属性的值。

标签选择器

$("div")

ID选择器 id

$("#d1")

奇偶数选择器 $("#tab tr:odd") $("#tab tr:even")

示例：隔行变色

html

<table id="tab">
    <tr><th>姓名</th><th>学号</th><th>年龄</th></tr>
    <tr><td>张三</td><td>001</td><td>23</td></tr>
    <tr><td>张三</td><td>001</td><td>23</td></tr>
    <tr><td>张三</td><td>001</td><td>23</td></tr>
    <tr><td>张三</td><td>001</td><td>23</td></tr>
    <tr><td>张三</td><td>001</td><td>23</td></tr>
    <tr><td>张三</td><td>001</td><td>23</td></tr>
    <tr><td>张三</td><td>001</td><td>23</td></tr>
    <tr><td>张三</td><td>001</td><td>23</td></tr>
</table>

View Code

css

table
{
    height:500px;
    width:600px;
    border-collapse:collapse;
}
th,td
{
    text-align:center;
    border:1px solid #ccc;
}

View Code

$(function () {
    $("#btn1").click(function () {
        $("#tab tr:odd").css("background-color", "#fceded");
        $("#tab tr:even").css("background-color", "#f79898");
    });
});

View Code

父元素中元素的第几列

$("#tab td:nth-child(1)") td第一列

子元素不包括孙元素

$("#d1>a")

属性选择器

找到设置某个属性的元素

$("#d1 a [title]")

<div>

</div>

找到设置某个属性值的元素，并且是http开头的

$("#d1 a[href^=http]")

结尾

$("#d1 a[href$=http]")

等于

$("#d1 a[href=’http’]")

包含

$("#d1 a[href *=http]")

需求：超连接相当多的时候，所有pdf结尾的显示红色

去掉文本框中前后的空格

var sInput=$trim($("#txt").val());

去掉文本框中的空格

$(function () {
    $("#btn1").click(function () {
        var sInput = $("#txt").val();
        var aInput = sInput.split('');
        for (var i = 0; i < aInput.length; i++) {
            if (aInput[i] == ' ') {
                sInput = sInput.replace(" ", "");
            }
        }
        $("#txt").val(sInput);
    });
});

View Code

包含选择器

$("li:has(a)") li中包含 a标签的li

位置选择器

$("p:first")整个页面里的第一个p元素

$("p:last")整个页面里的最后一个p元素

$("p:first-child")父元素的第一个p标签

<body>

<p></p>

</body>

$("p:first-child")父元素的最后一个p标签

<body>

<p></p>

</body>

父标签下元素的偶数行

$("#d1 p:nth-child(odd)") id为d1下的p标签的偶数行

</div>

$("p :odd")整个页面中P标签的偶数行

索引选择器

$("#d1 p").eq(位置) 第三行索引是2 可以写括号里

$("#d1 p:gt(3)") 第三行索引后

$("#d1 p").eq(位置).siblings() 兄弟

$("#d1 p").eq(位置).prev()前面一个

$("#d1 p").eq(位置).next()后面一个

$("#d1 p").eq(位置).parent().attr("id") 获取父亲的某个属性

表单选择器

$("input [type='button']") 获取type=button的input

$("input [type='text']") 获取type=text的input

简写

$(":button")

$(":text")

$(":checkbox)

$(":disabled")所有被禁用的元素

$(":enable")所有没有被禁用的元素

$(":file")所有上传文件

$(":input")所有input元素

$(":selected")所有下拉菜单被选中的项

$(":visible")所有可见元素

$(":submit")所有提交按钮

$("div:contains(foo)")所有包含了文本"foo"的元素

反向过滤

$("input:not(:text)") 所有的input不是文本框的

$("input").not(:text)也是可以的

$("div p").not(:hidden)针对前面的结果集，不能再后面再加标签

转载于:https://www.cnblogs.com/16lily521/p/4877442.html

weixin_33874713

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
20151006jq1基础选择器

JQuery基本知识JQuery目前企业中用的最多的一种JS框架,对常用的功能进行封装和简化JQuery使用需要有JQuery类库文件引入页面加载完之后在JS文件中写$(function(){});用选择器查找对象$("#d1") #(".d1")执行事件 $("#d1").click$(function () { $("#btn1").click(functi...
复制链接

扫一扫