中间因为特别想考研,耽误了好久。然后突然又发现,考研数学忘光了,遂放弃了。
从今天开始学习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);
}