又开始回来学习了

  中间因为特别想考研,耽误了好久。然后突然又发现,考研数学忘光了,遂放弃了。

  从今天开始学习jQuery.

  1. Selecting Items Using jQuery  

    1) the universal selector  * 号

     2)the element selector  例如$(‘h2‘).css(‘color‘, ‘blue‘);

     3) the id selector 例如 $(‘#Button1‘).addClass(‘NewClassName‘);

     4) THE CLASS selector

       例如:

<h1 class="Highlight">Heading 1</h1>
<h2>Heading 2</h2>
<p class="Highlight">First paragraph</p>
<p>Second paragraph</p>

id selectors:
id 大小写敏感, demotable和DemoTable 并不一样
$(‘#DemoTable‘) 中的# 号必不可少

jQuery 的效果
slideUP
sliedeDown

1. show/hide

$(‘h1‘).hide(1000); 或者使用slow/normal/fast

2. toggle()

3. fadeIn()/fadeOut()/fadeTo()

4. animate()

$(‘.Highlight‘).css(‘background-color‘, ‘red‘);

     5) grouped and combined selectors

      $(‘h1, h2‘).css(‘color‘, ‘orange‘);

      $(‘#MainContent p‘).css(‘border‘, ‘1px solid red‘);  仅仅改变在MainContent 这个里边的p元素

问题:1.  怎么在单个页面中插入对jQuery 的引用?   2. 怎么在master 页面中插入对jQuery的引用?

<asp:Content ID="Content3" ContentPlaceHolderID="Footer" runat="Server">
    <script type="text/javascript">
        $(function () {
            $(‘*‘).css(‘color‘, ‘blue‘);                     // change the bg color
            $(‘h2‘).bind(‘click‘, function () { alert(‘Hello world‘) });    //add click event
            //$(‘.SampleClass‘).addClass(‘PleaseWait‘).hide(5000);       // hide for 5 seconds
            //$(‘*‘).css(‘font-size‘, ‘40px‘).fadeOut(5000);  // larger the font and timeout is 5 secondes
            $(‘#DemoTable tr:first‘).css(‘background-color‘, ‘red‘);    //first row
            $(‘#DemoTable tr:even‘).css(‘background-color‘, ‘green‘); // 奇数行
            $(‘#DemoTable tr:odd‘).css(‘backgroud-color‘, ‘yellow‘);        //偶数行
            //$(‘*‘).css(‘font-size‘, ‘40px‘).fadeOut(5000);

        });

    </script>

还有一些其他的基本filter:

1. :first/:last
e.g. $(‘#DemoTable tr:first‘).css(‘background-color‘,‘red‘)

2. :odd/:even 奇数行/偶数行
e.g. $(‘#DemoTable tr:odd‘).css(‘background-color‘, ‘red‘)

3. :eq(index)/:lt(index)/:gt(index)
e.g. $(‘#DemoTable tr:eq(1)‘).css(‘background-color‘, ‘r‘)
代表第二行,第一行的index=0

4. :header
e.g. $(‘:header‘).css(‘color‘, ‘green‘)
查找出所有header 元素

还有一些其他的高级filter:

1. :contains 对字符进行查找
e.g. $(‘td:contains("Row 3")‘).css(‘color‘, ‘red‘);
所有包含Row 3字符的单元格

2. :has 对元素进行查找
e.g. $(‘:header:has("span")‘).css();

3. [attribute] 属性
e.g. $(‘input[type]‘).css();
查找所有具有type 属性的input control

CSS methods:

1. css(name, value)
设置一个具体的属性值
e.g. $(‘h1‘).css(‘back-ground‘, ‘green‘)
把背景色设置为绿色

2. css(name)
返回一个属性值
alert($(‘h2 span‘).css(‘font-style‘));

3. css(properties)
可以一次设置多个属性值
$(‘DemoTable td‘).css({‘color‘ : ‘red‘, ‘font-family‘ : ‘Verdana‘, ‘padding‘ : ‘10px‘});

4. addClass,removeClass, and toggleClass

$(‘h2‘).addClass(‘PleaseWait‘);
$(‘h2‘).removeClass(‘PleaseWait‘);

5. attr(attributeName)

用来读取/设置html 元素的属性值

6. attr(attributeName, value)
用来改变属性值
$(‘:checkbox‘).attr(‘checked‘, true);

事件处理:

jQuery 可以对所有selector 查找所匹配的,执行同一个事件

e.g.
$(‘#DemoTable tr‘).bind(‘mouseover‘, function() {$(this).css(‘background-color‘, ‘yellow‘)}).
bind(‘mouseout‘,‘funciton() {$(this).css(‘background-color, ‘‘)});

做了3件事情:
1. 通过#DemoTable tr 查找出所有表里的行
2. 对所有行里的当前行执行mouseover 事件(改变)
3. 对所有行里的当前行执行mouseout事件(重置)
this 关键字:这里指代当前行

Miscellanceous jQuery functionality

each function: 对’集合‘进行循环
e.g.

alert($(‘#DemoTable td‘).each(function()
{
alert(this.innerHTML);
});

不晓得用在哪里?

另外还有 prev() 和parent()用来遍历DOM 树

e.g.
function button1_onclick() {
alert($(‘#DemoTable td:contains("Row 1 Cell 2") ‘).prev()[0].innerHTML);
alert($(‘#DemoTable td:contains("Row 1 Cell 2") ‘).parent()[0].innerHTML);
}

    

时间: 2024-10-12 19:51:02

又开始回来学习了的相关文章

PHP的学习记录

这是我的第一次写博客,是一个PHP的初学者,刚刚开始之前是一点儿的都不懂,现在开始通过买些书籍回来学习,废话少说,开始记录笔记吧. 函数:函数的英文名为function,也就是功能的意思,在自定义函数的时候需要加function+函数名+参数+内容:具体的例子如下:   function  name_function(canshu1,canshu2) {      内容 } 2.函数的调用: {  <HTML><HEAD><meta http-equiv="Cont

目标跟踪学习系列八:Struck:Structured Output Tracking with Kernels(2011 ICCV)

看来人机交互不是我想象的那么简单的,还是要花很多的功夫来打基础的.于是再来学习Tracking相关的一些文章算法. 在认真的学习了压缩跟踪(CT)以后,确实觉得自己对Tracking有了比较好的了解.但是看了在测试集上面的效果,被欺骗了原来CT的效果在真实的摄像头上面是很差劲的.唯一的优点就是快. 因此,还得回来学习一些其他的精度比较高的方法!这里选择了Struck.是大牛学长推荐的.同时本文使用了非线性的SVM算法,也想顺便的学习一下. 文章代码的位置:http://www.samhare.n

DirectX学习笔记(一)

一.前言 学习DirectX的初衷是为了做游戏,为了开发游戏引擎.我在之前其实学习过一段时间的DirectX,但是由于后来一些其他原因将DirectX的学习搁置到了一边.现在有了比较充裕的时间,想把DirectX的相关知识捡起来,复习以前学习过的知识,顺带学习新的知识. 二.windows相关 首先,其实我对windows编程了解也不是很多.大一的时候看过一段时间的windows程序设计这本书,但是好像看天书一样,学了没有多久就转去学Qt去了.后来回来学习DirectX的时候,发现需要windo

学习整理——以太帧、ip帧、udp/tcp帧、http报文结构

从最简单的一个http请求开发,根据TCP/IP协议,分开来看每一层的数据帧结构,以及它们是怎样承担起网络服务的. 协议栈 因特网协议栈共有五层: 1.应用层,是网络应用程序及其应用层协议存留的地方.因特网的应用层包括许多协议,常见的有HTTP(它为web文档提供了请求和传送).SMTP(它提供了电子邮件报文的传输)和FTP(它提供了两个端系统之间的文件传送). 2.传输层,负责为信源和信宿提供应用程序进程(包括同一终端上的不同进程)间的数据传输服务,这一层上主要定义了两个传输协议,传输控制协议

Python最佳学习路线,选一个发展方向努力吧!

一.概述 2019年Python语言可以说是火的一塌糊涂,作为一门将近20年的计算机语言,直到最近才流行起来,真是可以说是大器晚成.说句实在话,Python语言的大火与人工智能这门科学是密不可分的.那么Python只能做人工智能吗?答案:肯定不是.Python作为小白入门的计算机语言在合适不过了.那我们一起来看看Python语言最好的学习路线是什么,我给大家整理一份学习路线图,大家可以参考看一下. **创一个小群,供大家学习交流聊天 如果有对学python方面有什么疑惑问题的,或者有什么想说的想

一个工作了两三年程序员的学习计划

本人已经工作两年多了,尴尬的是待过的两家公司都是外包,大部分外包公司技术性都很一般,这也是很多人看不起外包公司的一点.可是已经在外包 公司了怎么办,我也很绝望啊.....而且我做过的项目都是很老的项目,后期做些需求.现在带的甲方公司项目很多,我接触的项目框架就是SSH,中 间件是Redis.ActiveMQ,当然会包含企业内部开发的一些构件等.这里不是说甲方公司技术性不高,只是我接触到的项目技术性不高. 进入公司的时候,自己基本知道情况了,几乎不加班,这点事挺好的(因为我们组就三个人,负责项目需

NHibernate框架与BLL+DAL+Model+Controller+UI 多层架构十分相似--『Spring.NET+NHibernate+泛型』概述、知识准备及介绍(一)

原文://http://blog.csdn.net/wb09100310/article/details/47271555 1. 概述 搭建了Spring.NET+NHibernate的一个数据查询系统.之前没用过这两个框架,也算是先学现买,在做完设计之 后花了一周搭建成功了.其中,还加上了我的一些改进思想,把DAO和BLL之中相似且常用的增删改查通过泛型T抽象到了DAO和BLL的父类中,其DAO 和BLL子类只需继承父类就拥有了这些方法.和之前的一个数据库表(视图)对应一个实体,一个实体对应一

大话设计模式读书笔记--设计模式总结

前言 大话设计模式看了两遍,之前看过一遍,理解的不深刻, 这次用了一个月多点的时间再次温习,利用下班后的时间回来学习,把学习心得记录下来,加深了对面向对象的理解 之前是看到一个需求搞清楚业务流程之后立刻就去做了,很少从设计层面的角度考虑,现在在开发程序时,开始有了设计的思想,也有了达到可维护,可复用,可扩展目的具体的实现方法 每当看到经过优化代码的效果时,就想起一句话:精彩的代码是如何想出来的,比看到精彩的代码更加令人兴奋 下面是用自己的话进行的总结,以便加深记忆和理解 创建型 抽象工厂 定义:

搭建第一个web项目:实现用户的增删改查

好久没写这个web的代码了,再不写估计以前的也忘记的差不多了,赶紧复习下,顺便把自己的想法慢慢实现了. 最近在公司发现以前的项目有用easyUI搭建的.赶紧copy回来学习下. 感觉写日志真的很有必要,自己总结的肯定要比每次从网上查阅来的靠谱.每次搭建一个基本的web项目都都要查ssh的配置真的很忧伤啊,有木有!!! 把jar包的截图截了一下,要不总是记不清该用到的基本jar有啥. 其中Struts中用到的jar有:commons-fileupload.jar  commons-io.jar