2017-6-2 jQuery 基础选择器

用代码练习：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script src="js/jquery-1.7.1.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        .div1
        {
            width:100px;
            height:100px;
            background-color:red;
            float:left;
            margin-left:20px;
        }
        #d1
        {
            background-color:green;
        }
         .div2
        {
            width:100px;
            height:100px;
            background-color:blue;
            float:left;
            margin-left:20px;
        }

            .div3
        {
            width:50px;
            height:50px;
            background-color:blue;
            float:left;
            margin-left:20px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div class="div1">11111
        <div class="div3"></div>
    </div>
    <div class="div1" id="d1"> 2222</div>
        <div class="div1" id="d2"> 3333</div>
        <div class="div1"> 444441</div>
   <div class="div2"> 555552</div>
    </form>
</body>
</html>
<script type="text/javascript">

    //ID选择器
    //$("#d1").click(function () {
    //    alert("aa");
    //});
    //class选择器
    //$(".div1").click(function () {
    //    alert("aa");
    //    alert($(this).index());
    //});
    //标签选择器
    //$("div").click(function () {
    //    alert("11");
    //});
    //并列选择器
    //$(".div1,.div2").click(function () {
    //    alert("bb");
    //});
    //后代选择器
    //$(".div1 .div3").click(function () {
    //    alert("cc");

    //});

    //过滤选择器
    //首：
    //$(".div1:first").click(function () {
    //    alert("这是第一个");
    //});
    //尾：
    //$(".div1:last").click(function () {
    //    alert("这是最后一个");
    //});
    //等于：
    //$(".div1:eq(2)").click(function () {
    //    alert("这是第三个");
    //});
    //$(".div1").eq(2).click(function () {
    //    alert("这是第三个");
    //});
    ////大于：
    //$(".div1:gt(0)").click(function () {
    //    alert("aa");
    //});
    ////小于：
    //$(".div1:lt(3)").click(function () {
    //    alert("aa");
    //});
    ////排除：not(选择器)
    //$(".div1:not(.div1:eq(2))").click(function () {
    //    alert("aa");
    //});
    ////奇数：
    //$(".div1:odd").click(function () {
    //    alert("aa");
    //});
    ////偶数：
    //$(".div1:even").click(function () {
    //    alert("aa");
    //});
    ////属性名过滤：
    //$(".div1[id]").click(function () {
    //    alert("aa");
    //});
    ////属性名等于或者非等于值的过滤：
    //$(".div1[id=d1]").click(function () {
    //    alert("aa");
    //});
    //$(".div1[id!=d1]").click(function () {
    //    alert("aa");
    //});
    //包含字符串的过滤：
    $(".div1:contains(‘1‘)").click(function () {
        alert("aa");
    });

</script>

时间： 2024-08-24 11:52:12

2017-6-2 jQuery 基础选择器的相关文章

JQuery基础选择器

jQuery选择器类似css选择器,所以学习起来也更加容易1.基础选择器 1.All Selector("*") 描述:选择所有元素语法:$("*") 注意:实践证明,由于使用*选择器获取的是全部元素,因此,有些浏览器将会比较缓慢,这个选择器也许谨慎使用 2.Class Selector(".class") 描述:选择给定样式类名的所有元素语法:$(".class") 3.Element Selector("el

jQuery 基础选择器

#id选择器 jquery能使用CSS选择器来操作网页中的标签元素.如果你想要通过一个id号去查找一个元素,就可以使用如下格式的选择器: $("#my_id") 其中#my_id表示根据id选择器获取页面中指定的标签元素,且返回唯一一个元素. element选择器 jquery能根据元素名查找元素,格式如下 $("element") 其中element就是元素的名称,也就是通过其名称找到该元素. .class选择器 jquery能根据类别属性查找元素,格式如下 $(

6.20 jquery基础选择器

===============基本选择器================= 1.获取唯一id:$("#") $("#myid").css("color","blue"); 2.获取所有class:$(".") $(".class").css("color","yellow"); 3.获取所有元素:$("*&q

Jquery基础之选择器

选择器是JQuery的根基,在JQuery中对事件处理.选择遍历Dom.ajax操作都依赖选择器.JQuery选择器分为基本选择器.层次选择器.过滤选择器.表单选择器. 一.基本选择器 1.ID选择器$("#ID") 页面中每个ID是唯一的,ID选择器选择每个ID元素,如下方法如下:$("#ID");例:$("#tbxName")这个方法选择id=tbxName的页面元素.选择结果为单个元素. 2.类选择器$(".class"

jQuery基础，选择器

jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是"write Less,Do More",即倡导写更少的代码,做更多的事情.它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作.事件处理.动画设计和Ajax交互. jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口:具有高效灵活的cs

jQuery 语法-选择器-事件(基础知识)

jQuery 语法 jQuery 语法是通过选取 HTML 元素的,并对元素执行某些操作基础语法: $(selector).action() 美元符号定义 jQuery 选择符(selector)"查询"和"查找" HTML 元素 jQuery 的 action() 执行对元素的操作实例: $(this).hide() - 隐藏当前元素 $("p").hide() - 隐藏所有段落 $("p.test").hide() -

JQuery————基础&&基础选择器

环境搭建搭建一个jQuery的开发环境非常方便,可以通过下列几个步骤进行. 下载jQuery文件库在jQuery的官方网站(http://jquery.com)中,下载最新版本的jQuery文件库.在网站中找到最新版本文件的下载按钮,将jQuery框架文件下载到本地即可,本教案使用的版本为稳定版:1.9.0版. 引入jQuery文件库下载完jQuery框架文件后,并不需要任何的安装,仅需要使用<script>文件导入标记,将jQuery框架文件导入页面中即可,假设该文件下载后保存在项目文

jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jquery筛选方法

jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jquery筛选方法一丶什么是JQuery JQuery: ???????JQuery是js的一个库,高度封装了js常用的功能,提供简便方法,调用简单,提高开发效率 ??????js库是包含了把复杂的功能封装到简单的方法中 JQuery的两大特性: ???????链式编程:可以.的形式实现多个功能 ?

基础2.Jquery过滤选择器

1.基础选择器: 名称说明举例 #id 根据元素Id选择 $("divId") 选择ID为divId的元素 element 根据元素的名称选择, $("a") 选择所有<a>元素 .class 根据元素的css类选择 $(".bgRed") 选择所用CSS类为bgRed的元素 * 选择所有元素 $("*")选择页面所有元素 selector1, selector2, s

2017-6-2 jQuery 基础 选择器

2017-6-2 jQuery 基础 选择器的相关文章

2017-6-2 jQuery 基础选择器

2017-6-2 jQuery 基础选择器的相关文章