jquery-63-68讲

jquery63_basic_03

$(function(){
        //目前是一个javascript的对象，对于该对象而言，无法使用jquery的方法
        var hello = document.getElementById("hello");
        //是js的对象，不能使用jquery的方法
        // hello.css("color","#f00");
        //使用$(xx)就可以把xx这个节点封装为jquery的节点
        $(hello).css("color","#f00");
        //每一个jquery节点都是一个数组，只要取出数组中的值，这个值就是js的节点，就只能用js的方法
        //当转换为js节点之后，就无法使用jquery的方法，如果要使用jquery的方法在通过$()进行封装就可以了
        ($("li.abc")[0]).innerHTML = "abccdd";
        var lis = $("#hello ul li");
        for(var i=0;i<lis.length;i++) {
            //目前的li是js的节点
            var li = lis[i];
            //li.innerHTML = "["+(i+1)+"]"+li.innerHTML;
            //$(li)就变成了JQuery节点
            //xx.html()读取内容，xx.html("abc")：把节点的内容完成替换
            $(li).html((i+1)+"."+$(li).html());
        }
    });
    </script>
</head>
<body>
<div id="hello">
    <ul>
        <li>aaaaaaaaaaaaa</li>
        <li>bbbbbbbbbbbb</li>
        <li class="abc">ccccccccccccc</li>
        <li>ddddddddddddd</li>
        <li>eeeeeeeeeeeee</li>
    </ul>
</div>

结果：

64讲 选择器jquery64_select01.html

  $(function() {
            //取li中的所有a
            //$("li a").css("color","#f00");
            //取class为.myList这个标签的下一级标签li的下一级标签为a的节点
            // $(".myList>li>a").css("color","#f00");
           
            //去li的节点其中li中的href属性是以http://为开头


            // $("a[href^=‘http://‘]").css("background","#00f").css("color","#fff");
           
            //取.myList的ul中的包含有a标签的li标签
            //$(".myList ul li:has(‘a‘)").css("background","#ff0");//
           
            //获取页面中所有以pdf结尾的超级链接
            // $("a[href$=‘pdf‘]").css("background","#ff0").css("color","#f00");
           
            //取id为li1的下一个兄弟节点li,仅仅只会去一个节点,
            //仅仅只会取相邻的节点，如果相邻的节点不是li就什么都取不出去
            //$("#li1+li").css("background","#ff0");
           
            //取id为li的下面的所有满足条件的兄弟节点
            // $("#li1~li").css("background","#ff0");
           
            // $("a[title]").css("color","#0f0");
           
            //页面中最先匹配的某个元素
            //alert($("li:first").html());
            //页面中最后匹配的元素
            //alert($("li:last").html());
            //获取满足要求的第一个li
            // $(".myList>li li:first-child").css("background","#f00");
            //获取没有兄弟节点的ul
            //alert($("ul:only-child").length);
        });
    </script>
</head>
<body>
<ul class="myList">
    <li>
    <a href="http://jquery.com">JQuery site</a>
    <ul>
        <li><a href="css1.txt" title="mycss">CSS1</a></li>
        <li id="li1"><a href="css2.pdf" title="css2">CSS2</a></li>
        <li><a href="css3.html" title="this is my">CSS3</a></li>
        <li>Basic XPath</li>
    </ul>
    </li>
    <li>JQuery also supports
        <ul>
            <li>Custom selectors</li>
            <li>Form selectors</li>
        </ul>
    </li>
</ul>
</body>
</html>

66讲 包装集jquery66_wrap01.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>03_select</title>
    <meta name="author" content="Administrator" />
    <script type="text/javascript" src="jquery-1.8.3.js"></script>
    <script type="text/javascript">
        $(function() {
           
            //获取tr的元素个数
            //alert($("tr").length);
           
            //当执行了get之后得到的结果是一个js的元素
            //$($("tr").get(1)).css("color","#f00");
           
            //判断id为abc的tr在包装集的位置
            // alert($("tr").index($("tr#abc")));
           
            //在表达式中通过,可以分割多个包装集，
            //但是如果包装集太多，而且有时候可以变动的时候，使用这种方式就不好操作
            //$("tbody tr:eq(2),tr#abc").css("color","#f00");
           
            /*
             * 可以为包装集使用add方法，可以将新加入的元素添加到包装集中
             */
            // $("tbody tr:eq(2)").add("thead tr td:eq(2)")
                // .add("tr td:contains(‘3‘)").css("color","#f00");
           
            //not方法可以将包装集中的元素取消掉   
            //$("tr").not("tr#abc").css("color","#f00");
           
            //获取tr中位置小于3的元素
            //$("tr").filter("tr:lt(3)").css("color","#f00");
           
            //获取tr中的1,3形成一个新的包装集，返回的值就是新的包装集
            // $("tr").css("background","#00f").slice(1,3).css("color","#f00");
           
            //从包装集的内部获取相应的元素，返回的值也是新包装集
            //$("table").find("tr#abc").css("color","#f00");
           
           //is表示的是当前的包装集中是否有某个元素,$(table)的包装集中只有一个元素table,所以没有td
            //alert($("table").is("td:contains(‘用户‘)"));
           
            //获取tbody中的所有元素为值等于3的tr子元素,返回的也是新包装集
            //$("tbody").children("tr:eq(3)").css("color","#f00");
           
            //找到下一个子元素，只是一个元素，返回新包装集
            // $("tr#abc").next().css("color","#ff0");
           
            //找到下一个组兄弟元素，所有元素，返回新包装集
            // $("tr#abc").nextAll().css("color","#0f0");
           
            //parent仅仅只是返回上一级的div，返回新包装集
            // $("#s1").parent("div").css("color","#0f0");
           
            //返回所有满足条件的父类节点，返回新包装集
            // $("#s1").parents("div").css("color","#f00");
           
            //返回第3个tr的所有兄弟节点，返回新包装集
            var a = $("tr:eq(2)").siblings("tr").css("color","#f00").is("tr#abc");
            alert(a);
        });
    </script>
</head>
<body>
<div id="d1">
    cdd
    <div>
        <span id="s1">abc</span>
    </div>
</div>
<table width="700" border="1" align="center">
    <thead>
        <tr>
            <td>用户标识</td>
            <td>用户姓名</td>
            <td>用户年龄</td>
            <td>用户密码</td>
        </tr>
    </thead>
    <tbody>
        <tr id="abc">
            <td>1</td>
            <td>张三</td>
            <td>23</td>
            <td>abc123</td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>33</td>
            <td>abc123</td>
        </tr>
        <tr>
            <td>3</td>
            <td>王五</td>
            <td>13</td>
            <td>abc123</td>
        </tr>
        <tr>
            <td>4</td>
            <td>赵六</td>
            <td>45</td>
            <td>abc123</td>
        </tr>
        <tr>
            <td>5</td>
            <td>朱琪</td>
            <td>21</td>
            <td>abc123</td>
        </tr>
    </tbody>
</table>
</body>
</html>

67讲，包装集 juqery67_wrap02

<script type="text/javascript">
        $(function() {
            //使用end可以返回上一个包装集
             $("tr:eq(2)").siblings("tr")
                 .css("background","#00f").css("color","#fff")
                 .end().css("background","#f00").css("color","#100f");
       
            // $("#users tbody").clone().appendTo("#tus").find("tr:even").css("color","#f00")
                // .end().end().find("tr:odd").css("color","#00f");
           
            //andSelf表示把所有的包装集合并在一起
            //$("#users tbody").clone().appendTo("#tus").andSelf().find("td:contains(‘3‘)").css("color","#f00");
       
            //查询出了两个包装集，一个为tus的table一个为users的table，此时可以过滤得到users这个table
            //无法使用filter(tr)
            $("table").filter("table#users").css("color","#f00");
            //从users这个id的元素中过滤tr为2的元素
            $("#users").find("tr:eq(2)").css("background","#00f");
        });
    </script>
</head>
<body>
<table id="tus" width="700" border="1" align="center"></table>
<table width="700" border="1" align="center" id="users">
    <thead>
        <tr>
            <td>用户标识</td>
            <td>用户姓名</td>
            <td>用户年龄</td>
            <td>用户密码</td>
        </tr>
    </thead>
    <tbody>
        <tr id="abc">
            <td>1</td>
            <td>张三</td>
            <td>23</td>
            <td>abc123</td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>33</td>
            <td>abc123</td>
        </tr>
        <tr>
            <td>3</td>
            <td>王五</td>
            <td>13</td>
            <td>abc123</td>
        </tr>
        <tr>
            <td>4</td>
            <td>赵六</td>
            <td>45</td>
            <td>abc123</td>
        </tr>
        <tr>
            <td>5</td>
            <td>朱琪</td>
            <td>21</td>
            <td>abc123</td>
        </tr>
    </tbody>
</table>
</body>
</html>
68_jquery07_jquery的each,map,has

/*
             * 通过map可以有效的将某个包装集中的元素转换为数组
             */
            var ps = $("tbody td:nth-child(1)").map(function(){
                var n = $(this).next("td");
                var p = {"id":$(this).html(),"name":n.html()};
                return p;
            }).get();
       
            for(var i=0;i<ps.length;i++) {
                alert(ps[i].name);
            }
        });

68讲 has用法

<script type="text/javascript">
        $(function() {
            //获取存在有ul的li，返回的是新包装集
            $("li").has("ul").css("color","#f00");
           
        //    $("div").has("span").css("color","#f00");
        });
    </script>
</head>
<body>
    <div>
        <span class="s1">ssssssssssssssssss</span>
    </div>
    <div>
        <span>
            2222222222222222222
        </span>
    </div>
   
    <div>
        <ul class="u1">
            <li>aaaaaaaaaaaaa</li>
        </ul>
    </div>
   
    <ul>
        <li>aaaa</li>
        <li>bbbb</li>
        <li>
            <ul>
                <li>cccccccc1</li>
                <li>cccccccc2</li>
            </ul>
        </li>
        <li>
            dddddd
        </li>
    </ul>
</body>
</html>

68讲 each

$(function() {
            var ns = $("tbody td:nth-child(2)");
            /**
             * 使用以下方法进行遍历基本上是基于js进行操作
             * 对于jquery有自己的一套遍历方法，可以直接通过
             * each函数进行遍历
             */
            /*for(var i=0;i<ns.length;i++) {
                var nn = ns[i];//nn已经是js的节点
                var id = $(ns[i]).prev("td").html();
                var age = $(ns[i]).next("td").html();
                nn.innerHTML = id+">>"+nn.innerHTML+"("+age+")";
            }*/
           
            /**
             * 对于JQuery而言，可以用each遍历所有的数组对象
             * each中的匿名函数n表示的是数组的下标,从0开始
             */
            ns.each(function(n){
                $(this).html($(this).prev("td").html()+
                    "."+$(this).html()+
                    "("+$(this).next("td").html()+")");   
                    //alert(n+"."+$(this).html());
            });
        });
    </script>
</head>
<body>
<table id="tus" width="700" border="1" align="center"></table>
<table width="700" border="1" align="center" id="users">
    <thead>
        <tr>
            <td>用户标识</td>
            <td>用户姓名</td>
            <td>用户年龄</td>
            <td>用户密码</td>
        </tr>
    </thead>
    <tbody>
        <tr id="abc">
            <td>1</td>
            <td>张三</td>
            <td>23</td>
            <td>abc123</td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>33</td>
            <td>abc123</td>
        </tr>
        <tr>
            <td>3</td>
            <td>王五</td>
            <td>13</td>
            <td>abc123</td>
        </tr>
        <tr>
            <td>4</td>
            <td>赵六</td>
            <td>45</td>
            <td>abc123</td>
        </tr>
        <tr>
            <td>5</td>
            <td>朱琪</td>
            <td>21</td>
            <td>abc123</td>
        </tr>
    </tbody>
</table>
</body>
</html>

时间： 2024-10-03 19:05:49

jquery-63-68讲的相关文章

Scala 深入浅出实战经典 第68讲：Scala并发编程原生线程Actor、Cass Class下的消息传递和偏函数实战解析

王家林亲授<DT大数据梦工厂>大数据实战视频 Scala 深入浅出实战经典(1-87讲)完整视频.PPT.代码下载: 百度云盘:http://pan.baidu.com/s/1c0noOt6 腾讯微云:http://url.cn/TnGbdC 360云盘:http://yunpan.cn/cQ4c2UALDjSKy 访问密码 45e2土豆:http://www.tudou.com/programs/view/mm3eDHk3T5o/优酷:http://v.youku.com/v_show/id

DT大数据梦工厂 第68讲

DT大数据梦工厂第68讲http://yun.baidu.com/s/1jGKSKAi本节王老师讲了Actor的高级应用.首先,主线程可以发消息给子线程,而子线程接收并处理完消息以后,可以返回给主线程一个消息.这就像邮箱的回复.这里可以在receive偏函数中,写一个关键字 sender !后面就是要发送的内容.而main方法接收时,可以用self.receive偏函数,接收.而且,也可以设置超时时间,用self.receiveWithin(超时时间毫秒){偏函数}这种方式,其作用是当主线程接收

jquery实战第一讲---概述及其入门实例

就在5月28号周四下午五点的时候,接到xxx姐姐的电话,您是xxx吗?准备一下,周五上午八点半去远洋面试,一路风尘仆仆,颠颠簸簸,由于小编晕车,带着晕晕乎乎的脑子,小编就稀里糊涂的去面试了,温馨提醒,晕车的小伙伴家中常备晕车药,关于远洋面试的一些总结,小编会后续在博客中贴出,希望对有需要的小伙伴一些帮助,通过面试发现面试官大量的提问jquery的相关知识,那时年少,学习jquery的时候,想起来就是一把辛酸泪,于是,小编励志再把JQuery的相关知识复习一遍,把相关的知识点总结到博客中,欢迎不同

jquery前端第一讲

1.bootstrap里面的文件是什么意思: bootstrap.cssbootstrap.min.cssbootstrap-responsive.cssbootstrap-responsive.min.cssbootstrap.jsbootstrap.min.js 2.页面使用的时候先引入bootstrap的css,再引入jquery再引入bootstrap的js,注意顺序. <script src="http://libs.baidu.com/jquery/2.0.0/jquery.m

jQuery源码分析之=&gt;jQuery的定义

最近写前段的代码比较多,jQuery是用的最多的一个对象,但是之前几次看了源码,都没搞清楚jQuery是怎么定义的,今天终于看明白怎么回事了.记录下来,算是一个新的开始吧. (文中源码都是jQuery-1.10.2版本的) 先上一段jQuery定义的源码,定义了jQuery为一个function 1 // Define a local copy of jQuery 2 jQuery = function( selector, context ) { 3 // The jQuery object

jquery】常用的jquery获取表单对象的属性与值

1 [jquery]常用的jquery获取表单对象的属性与值 2 3 4 1.JQuery的概念 5 6 7 8 9 JQuery是一个JavaScript的类库,这个类库集合了很多功能方法,利用类库你可以用一些简单的代码实现一些复杂的JS效果. 10 11 12 2.JQuery实现了 代码的分离 13 14 不用再网页中加入如:onclick之类的事件来调用函数了,直接引入JQuery类库和自己编写的JQuery代码就可以了: 15 如: 16 $(function(){ 17 $("Ele

迷你版jQuery——zepto核心源码分析

前言 zepto号称迷你版jQuery,并且成为移动端dom操作库的首选 事实上zepto很多时候只是借用了jQuery的名气,保持了与其基本一致的API,其内部实现早已面目全非! 艾伦分析了jQuery,小钗暂时没有那个本事分析jQuery,这里就恬不知耻说说自己对zepto的源码理解,希望对各位有用 首先zepto的出现其实还是很讨巧的,他看见了巨人jQuery在移动浪潮来临时的转身慢.牵挂多的问题 马上搞出了一套轻量级类jQuery框架代码,核心代码1000行不到,快速占领了移动端的市场,

CSS+DIV+JQuery实战视频总结

在牛腩中学习过CSS和DIV,在JS中学习过CSS+JS 封装,在这里又回顾了一遍,也作为查漏补缺,也算比较系统的复习了一遍吧. css核心内容主要包括四个方面:标准流,盒子模型,浮动和定位,而在B/S前台页面的布局中,它们也起着决定性作用.盒子模型来确定每个元素的具体大小,边框和间距等,浮动定位与标准流结合来确定页面中元素之间的排列顺序和位置布局等,再加上一些基础的CSS样式如背景图片,颜色等就能形成格式各样的web页面了. DIV:CSS中定位技术的一种,作为一个单独的模块出现.与span相

68：Scala并发编程原生线程Actor、Cass Class下的消息传递和偏函数实战解析及其在Spark中的应用源码解析

今天给大家带来的是王家林老师的scala编程讲座的第68讲:Scala并发编程原生线程Actor.Cass Class下的消息传递和偏函数实战解析 昨天讲了Actor的匿名Actor及消息传递,那么我们今天来看一下原生线程Actor及CassClass下的消息传递,让我们从代码出发: case class Person(name:String,age:Int)//定义cass Class class HelloActor extends Actor{//预定义一个Actor  def act()