网页 编程语言 教学

 2010-7-28 07:06

========================

Big 2010-7-28 07:14

HTML

1. ...
1.1. 之间填入所要显示的内容， 标签是显示的方式。
1.2. aaa 是某个属性，yyy 是属性的值，属性会影响显示的方式。

2. 主要架构
2.1. 表明本档内容是依照 html 的格式编写。
2.2. 内部有两大部分： 表头 和 本文。
2.3. 存放不显示的资料，对浏览器有用的资料。
2.4. 存放要显示的资料。

   
       ...
       ...
   

 彩虹炫 | 编辑 删除Big 2010-7-28 07:17

HTML

3.
3.1.   之下有好几个部分，主要是：
      
      
   

 彩虹炫 | 编辑 删除Big 2010-7-28 07:51

CSS/style

1. html_tag { aaa:yyy; }, 
2. .xxx 集合，#xxx 名牌，tag.xxx {...}, tag#xxx {...}


Javascript

1. 资料有：数字 1, 2, 3.4; 文字 'a' 或 "a", 'abc'； 有序集合 [1, 'a']; 真假值 true, false 或 1 (非零), 0
2. var 宣告存放资料的区域变数，function xxx（）{...} 内含执行运算的指令集。
3. var_name = 123; var_name = function_name (); function_name (); --- 注意，句尾要有分号。
4. 运算：+, -, * 乘, / 除, % 余, || 或, && 和。
5. 有序集合 array, 物件 object, 类别 class；
     var_name = new Array (); var_name = [];
     var_name = new Object (); var_name = {};
     var_name = new class_name ();
     delete var_name_NEWed;
6. 类别 class, 
     var_name = {aaa:yyy, bbb:zzz}; --- 注意，内部要用逗号分隔。
     function var_name () {this.aaa=yyy; this.bbb=xxx;}
     var_name = new function () {...}
7. 流程。
     if (var4==5) var1=2; else {var2=3; var3=var2;}  
          --- ==, !=, >=, <=, >, <
     for (i=0; i<10 i="i" style="margin: 0px; padding: 0px; word-wrap: break-word;" var1="2;" var2="var1;}<br">     switch (var1) {case 1: var2=3; break; case 2: var2=5; default: ;}
     while (var2<10 nbsp="nbsp" var2="var2+1</dd">

 彩虹炫 | 编辑 删除Big 2010-7-28 08:10

JQUERY

1.  $('...'), jquery('...')
     jQuery.noConflict(); 
     (function($) {
         // Within this block, $ is a reference to jQuery
         // Neat, huh?
     })(jQuery);
     jQuery(document).ready(function (){...});
2. 
     $('html_tag.class_tag html_subtag:type') --- all subtags in this tag
     $('html_tag#id_tag') --- all of this tag
     $('html_tag[html_subtag]') --- all of this tag containing that subtag
     $('html_tag[@attribute=value]') --- all of this tag containing that attribute

 彩虹炫 | 编辑 删除Big 2010-7-28 08:17

JQUERY

3. change the attributes or properties
     jQuery('div#primary').width(300);
     jQuery('p').css('line-height', '1.8em');
     jQuery('li:odd').css({color: 'white', backgroundColor: 'black'});
     jQuery('a[@href^="http://"]').addClass('external').attr('target', '_blank');
     jQuery('blockquote').each(function(el) { alert(jQuery(this).text()) });
     jQuery('a').html('Click here!');

4. get the attributes or properties
     var width = jQuery('div').width();
     var src = jQuery('img').attr('src');
     var color = jQuery('h1').css('color');
5.  traversing the DOM:
     jQuery('div').not('[@id]')
         Returns divs that do not have an id attribute.
     jQuery('h2').parent()
         Returns all elements that are direct parents of an h2.
     jQuery('blockquote').children()
         Returns all elements that are children of a blockquote.
     jQuery('p').eq(4).next()
         Find the fifth (4; 0..4) paragraph on the page, then find the next element (its direct sibling to the right).
     jQuery('input:text:first').parents('form')
         Find the form parent of the first input type=“text” field on the page. 
         The optional argument to parents() is another selector. 
6.

 彩虹炫 | 编辑 删除Big 2010-7-29 02:51

JQUERY

6.
6.1. chaining, with end ()
     $(xxx)  .yyy(aaa).zzz().end()   .sss().ttt()
6.2.  
     var div = jQuery('

Some text

');
     or, var div = jQuery('

Some text

').addClass('inserted').attr('id', 'foo');
     div.appendTo(document.body)
     or, div.prependTo('div#primary')
6.3. jQuery(this)
     jQuery('a').hover(
          function() { jQuery(this).css('background-color', 'orange');},   // onMouseOver
          function() { jQuery(this).css('background-color', 'white');}     // onMouseOut
          );
6.4. 
     jQuery('p').one('click', function() { alert(jQuery(this).html()); });
     // one() sets up an event handler that will be removed 
     // after the first time it has been fired. 

     jQuery(document).bind('stuffHappened', 
          function(event, msg) { alert('stuff happened: ' + msg);});
          or, function() { alert('stuff happened: ' + 'Hello!');});
          // bind() binds an event to a user-defined function
     jQuery(document).trigger('stuffHappened', ['Hello!']);
          // when an event happens, trigger() is triggered; 
          // when an event 'stuffHappened' happens, trigger('stuffHappened') is triggered; 
          // trigger() takes one less arguments than bind();

 彩虹炫 | 编辑 删除Big 2010-7-29 04:18

JQUERY

7. 
7.1. Unobtrusive scripting:  separate JavaScript from ...
     jQuery(document).ready(function() { alert('The DOM is ready!'); });
     or, jQuery(function() { alert('The DOM is ready!'); });

7.2. Ajax
     jQuery.get('/some/script.php', 
          {'name': 'Simon'}, function(data) {alert('The server said: ' + data);
          }); // GET against /some/script.php?name=Simon
     jQuery.post('/some/script.php', 
          {'name': 'Simon'}, function(data) {alert('The server said: ' + data);
          }); // POST to /some/script.php
     jQuery.getJSON('/some.json', 
          function(json) {alert('JSON rocks: ' + json.foo + ' ' + json.bar);
          }); // Retrieves and parses /some.json as JSON
     jQuery.getScript('/script.js'); // GET and eval() /script.js

7.3. Plugins

 彩虹炫 | 编辑 删除Big 2010-7-29 12:31

JQUERY

The .addClass() function is applied against each of the matched elements with one command. 
get and set .css() styles directly including smart logic 
that accounts for browser differences of  assignment types (number and string translations mostly) and values (opacity does the right thing on all browsers). 
You can set and retrieve attributes with .attr(), or retrieve or set a value with .val(), .text() or .html(). 
You can clone selected DOM elements or create new elements from HTML text used as a selector 
and inject them into the document with methods like .appendTo(), .prependTo() 
or reversely use a parent element to .append() or .prepend() the new or selected element(s). 
useful effects methods that can be applied to .show() and .hide() elements in a smart way 
that checks for opacity, display and visibility and adjusts all to show or hide elements. 

Effectively this means you can select once, and operate many times against the same object 
and even filter or expand the wrapped set with methods like .find(), .filter() or .add(). 

The beauty of many of these functions is that they do things you actually want to do, 
and they are intuitively overloaded. 
Methods like .val() or .text() act both as retrieval and setter methods. 
Methods that deal with numeric values can take either text or numeric values.

select a single element:
     $("#gdEntries").css("border", "solid 1px navy");
Or select by class (.):
     $(".gridalternate").css("background", "lightsteelblue ");
or  from a couple of classes (, like in CSS separates multiple selectors):
     $(".gridrow,.gridalternate").attr("tag", "row");
selects all buttons in a document and attaches a click handler:
      $("input:button ").click(function(event) { alert("clicked"); });
select all rows in a table:
     $("#gdEntries>tbody>tr").css("border", "solid 1px red");
look for any cells in a table that start have an ID that starts with the value Pk:
     $("#gdEntries>tbody>tr>td[id^=Pk]").width(30);

 彩虹炫 | 编辑 删除Big 2010-7-29 12:39

JQUERY

Element        $(“td“)                        Select an HTML element tag
#id                $(“#divMessage“)        Selects an element by its id
.cssclass        $(“.gridalternate“)        Selects a CSS style

selector,selector        $(“input:button,input:text“)                Multiple comma separated selectors can be combined into a single selection.
ancestor descendant        $(“#divMessage a“)                A space between selectors/elements/tags finds nested elements. 
                                                                        This syntax is similar to Css ancestor descendant syntax.
parent > child         $(“p > b“)                Matches all immediate children of an element or selector expression 
or, > child                                                                that match the right element/selector.
prev ~ siblings        $(“#row_11:nth-child(2)~td“)                Matches the next siblings at the sample level 
                                                                                as the preceeding expression.
~ siblings                $(“~td“)                                        Example, matches 3-nth columns of a table row. 
                                                                                Best used as a find() or filter() against an existing jQuery instance.

prev + nextsibling        $(“#tdMoneyCol+td“)                Matches the following sibling.
+ nextsibling                $(“+td“)                                        Works best with find() or filter() against an existing jQuery object.

:filter                        $(“input:button“)                : applies filters to the query. 
                                                                        jQuery support CSS 3 filters plus a number of custom filters.
                                                                        Examples: 
                                                                        :not, :button, :visible, :hidden, :checked, :first,nth-child(1), 
                                                                        :has, :is, :contains, :parent

[@attribute]        $(“p[class=gridalternate]                Selects an attribute of an element
                                                                        = equals string
                                                                        ^= startswith
                                                                        $= endswith
                                                                        *= contains

 彩虹炫 | 编辑 删除Big 2010-7-29 12:58

JQUERY

Element        $(“td“)                        Select an HTML element tag
#id                $(“#divMessage“)        Selects an element by its id
.cssclass        $(“.gridalternate“)        Selects a CSS style
selector,selector        $(“input:button,input:text“)        Multiple selectors into a single selection.

ancestor descendant        $(“#divMessage a“)                A space between selectors/elements/tags finds nested elements. 
> child                         $(“p > b“)                                Matches all immediate children of an element or selector expression 

~ siblings                        $(“#row_11:nth-child(2)~td“)        Matches the next siblings at the sample level 
+ nextsibling                $(“#tdMoneyCol+td“)                Matches the following sibling.

:filter                        $(“input:button“)                ':' applies filters to the query. 
                                                                        :not, :button, :visible, :hidden, :checked, :first,nth-child(1), 
                                                                        :has, :is, :contains, :parent

[@attribute]        $(“p[class=gridalternate]“)                Selects an attribute of an element
                                                                                = equals string
                                                                                ^= startswith
                                                                                $= endswith
                                                                                *= contains

 彩虹炫 | 编辑 删除Big 2010-7-29 13:53

JQUERY

the $(document).ready()  handler

A .ready() handler can be placed anywhere on the page  and you can even have multiple ready handlers in the page.  Although a .ready() handler is optional and not always required.

For consistency and reliability’s sake it’s best to always wrap any script ‘startup code’ into a .ready() handler to ensure reliable operation on all browsers. 

$("#gdEntries tbody tr:even") selects all the even rows in the grid view’s table output. 
In plain English the  selector means: 
select the gdEntries element (#) 
and find any child tbody elements (space=child) 
find any tr elements below it (space=child) 
and then return a filtered set(:expression=filters) that includes only the even elements. 





$("#gdEntries tbody tr")
    .not(":first,:last")
    .filter(":even")            
    .addClass("gridalternate")
    .css("border","solid 1px lightgrey");

var res = $("#gdEntries>tbody>tr:even");
var el = res[0];   // first element
el = res.get(0);    // same but 'official' syntax

What’s nice about .each() is that it assigns the this pointer to the selected element so you can do this:
$("#gdEntries tbody tr:even").each( function(index) {
     alert(this.id + " at index: " + index);   
     });

var matches = $("#gdEntries>tbody>tr>td:nth-child(2)");
matches.addClass("gridheader");
matches.removeClass("gridhighlight");

 彩虹炫 | 编辑 删除Big 2010-7-29 14:11

JQUERY

jQuery provides the high level .bind() and .unbind() functions 
to generically attach and detach event handlers on matched sets. 
In addition most of the common events like click, key and mouse events have dedicated handler functions 
like .click(), .mousedown(), change() and .keydown(). 
jQuery event handlers simply take a function as a parameter and jQuery tracks these handlers 
so that they can also be unbound later.  It can’t be much easier than this. 
In addition there’s .one() which fires an event exactly once then disconnects the handler 
and .toggle() which toggle between alternating clicks, and .trigger() which can trigger events on elements.

jQuery also provides a common model for event handlers:
    * The this pointer always equals the element the event fired on
    * An event object is always passed as a parameter
    * Event object is a cross-browser ‘normalized’

$("#gdEntries>tbody>tr")
    .not(":first,:last")
    .hover( 
          function() {$(this).addClass("gridhighlight"); }, 
          function() {$(this).removeClass("gridhighlight");})
   .filter(":even")
   .addClass("gridalternate");

$("#gdEntries>tbody>tr")
    .not(":first,:last")
    .hover( 
          function() { $(this).addClass("gridhighlight"); },
          function() { $(this).removeClass("gridhighlight"); })
    .click( function(e) { alert("Amount: " +  $(this).find("td:nth-child(3)").text()); })
   .filter(":even")
   .addClass("gridalternate");

To create Html and add it to the document is as easy as:
     $("

")
          .appendTo(document.body)                  

Html can be injected anywhere in the document with .appendTo() or .prependTo()
which inserts into the child items of the selector element(s). 
.append(), prepend() inserts to the current selected element instead.

You can also .clone() existing nodes easily. Try this on the example above:
     $("#gdEntries").clone()
        .appendTo(document.body)
        .attr("id","gdEntries2");

And you’ll see the entire GridView duplicated in the page. 
Not terribly useful, but there are a number of situations where cloning is very useful. 
For example, you can use cloning() for a sort of templating mechanism. 
To insert a new row with new content in the table above you can use code like this:

var row = $("#gdEntries>tbody>tr:nth-child(2)").clone();
row.find("td:first")
   .text(new Date().formatDate("MMM dd - hh:mmt"));
row.find("td:nth-child(2)")
   .html("" + new Date().formatDate("hh:mm:ss") +
        "
More text second item here");
row.find("td:last")
   .text( 199.99.formatNumber("c"));
row.insertBefore("#gdEntries>tbody>tr:nth-child(2)")
   .show();

 彩虹炫 | 编辑 删除Big 2010-7-29 14:15

JQUERY

instead of calling .show() I could fade in the elements with simple code like this:
    row.insertBefore("#gdEntries>tbody>tr:nth-child(2)")
        .css("background", "paleyellow")
        .hide()
        .fadeIn(1000);

The .fadeIn() and .fadeOut() functions do exactly as their name implies 
and provide a very easy way to give a visual clue that something is updating on the page. 
Other methods include .slideUp() and .slideDown() which slide content 
from the top or bottom to the current absolute position again with speed indicators. 
For lower level animation there’s the .animate() function 
which allows you animate numeric CSS properties to a new value over a timeout period 
to provide custom animations.

 彩虹炫 | 编辑 删除Big 2010-7-29 14:18

JQUERY

dialog.hide()
       .slideDown("slow")
       .css("opacity",.90);

function showQueryDialog()
{
    var dialog = $("#divjQueryDialog");      
    dialog.hide()
          .slideDown("slow")
          .css("opacity",.90);
    $("#btnExpression").bind("click", function(event)
    {
        // Grab the selector entered as text
        var exp = $("#txtExpression").val();

        // Execute the selector through jQuery
        var matches = $(exp);

        // *** check result
        var len = matches.length;
        if ( len < 1)
        {
            $("#lblExpressionMsg").text("No matching elements");
            showStatus("No matches",3000,true);
            return;
        }               
        showStatus( len.toString() + " matches",3000,true);

        // No errors clear error message
        $("#lblExpressionMsg").text("");

        // Highlight all matches
        matches.addClass("selectionhighlight");

        // Set up timer to remove the highlight              
        setTimeout(function()
            {
                $(exp).removeClass("selectionhighlight");                     
            },5000);                               

        // Unbind event and hide dialog
        $("#btnExpression").unbind("click");
        dialog.slideUp();           
    });
}

 彩虹炫 | 编辑 删除Big 2010-7-29 14:23

JQUERY

Bottom line: You'll probably still have a utility library with helper functions to provide a few custom routines 
especially when it comes to formatting and manipulating the standard JavaScript types which jQuery doesn't cover.