又开始回来学习了

标签：

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

　　从今天开始学习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);
}

又开始回来学习了

标签：

原文地址：http://www.cnblogs.com/ifendo/p/jQuery.html