需求：页面加载完毕后弹出“加载完毕！”。

•通过window.onload实现。

  //-------------直接使用js实现-----------------------------
window.onload = function () {
alert('窗体加载完毕事件1111');
};
window.onload = function () {
alert('窗体加载完毕事件22222');
};
//上面的代码，当页面加载完毕后只会执行最后一个，因为最后一个window.onload赋值语句，会将前面的所有的设置的function(){}都覆盖掉。
//如果直接通过js动态注册事件，因为注册事件的时候是通过赋值语句设置的，所以只会应用最后一次注册的事件，会将前面注册的事件处理程序覆盖掉。

•通过jQuery的方式实现。

•$(fn);  【等价于$(document).ready(fn);】

//----------------使用jQuery实现类似的效果----------------------
//使用jQuery注册的事件，不会被覆盖，当注册了多个事件处理程序后，当事件被触发时，会依次执行这些事件
//下面这种写法其实并不是为window.onload事件注册的处理程序，而是为jQuery的ready()事件注册的处理程序。
//jQuery的ready事件与window.onload事件的区别：
//1.window.onload需要等待页面全部加载完毕，其中包含页面中的标签所引用的其他资源。（整个页面需要全部加载完毕）；
//而jQuery的ready事件，只要等待页面中所有的标签下载完毕就会被触发。所以说从用户“感觉”的角度来说，使用ready事件会让用户感觉处理速度“更快了”。
jQuery(function () {
alert('111111111');
});

$(function () {
alert('2222222222222222');
});

//----完整的写法------------
$(document).ready(function () {
alert('3333333333');
});
//document对象转成JQuery对象
jQuery(document).ready(function () {
alert('444444444');
});

$(window).load(function () {
//window对象转成JQuery对象，这种写法才等价于window.onload=function(){};
// });

jQuery中提供的两个函数

$.map(array,callback(element,index));

 var arrInt = [10, 20, 30, 40, 50, 60, 70, 80, 90];
//遍历数组中的每个元素，返回一个新的数组
//arrInt 要遍历的数组
//element 每一个元素的值
//index 该元素的索引
//ruturn 的值会放在一个新的数组里面
var arrIntNew = $.map(arrInt, function (element, index) {
return element * 2;
});
//arrIntNew 数组的内容是[20,40,60,80,100,120,140,160,180]
alert(arrIntNew);

        var arrInt = [1, 2, 3, 4, 5, 6, 7];
        $.each(arrInt, function (key, value) {
            if (key == 3) {
                //break;在$.each中跳出循环不能使用break;
                //需要使用
                return false; //跳出循环。
            }
            //当使用each遍历，普通的数组的时候，索引就是键，值就是值。
            alert(key + '    ,     ' + value);
        });

               var p = { 'name': '张三', 'age': 18, email: 'zs@yahoo.com' };
               $.each(p, function (k, v) {
                   alert(k + '   ,   ' + v);
               });

  var msg = ' hello ';
alert('====' + $.trim(msg) + '===========');

  //1.获取层对象
//页面上的元素对象才叫做dom对象，数组，日期对象，这些不是dom对象。
var dvObj = document.getElementById('dv1');
//当直接使用dom对象的时候存在浏览器的兼容性问题。
//为了解决浏览器的兼容性问题，所以这时可以把dom对象转换为jQuery对象，然后再操作
dvObj.innerText = 'Hello World!';

 //Dom  →  jQuery
                var $dvObj = $(dvObj);

                //把dom对象转换为jQuery对象后，就可以调用对应的所有的jQuery对象的成员了。
                $dvObj.text('你好，世界！');

                //dom对象只能使用dom对象的成员，jQuery对象只能使用jQuery对象的成员。这两种对象是互相独立的。
                // $dvObj.innerText = 'aaaaaaaaaaaaaaa';//错误！！！！！！！！！

    //把jQuery对象再转换为dom对象
                var domDiv = $dvObj[0];
                var domDiv = $dvObj.get(0);//这两种办法都可以把jQuery对象转换为dom对象。
                domDiv.innerText = 'bbbbbbbbbb';

                //jQuery对象：
                //可以把dom对象转换为jQuery对象
                //也可以把jQuery对象转换为dom对象。

jQuery对象的一些常用的方法

val()

css()

text()

html()

    document.getElementById('btn').onclick = function () {
                //获取文本框中用户输入的内容
				//转成jQuery对象
                var $txtObj = $(document.getElementById('txt'));
                alert($txtObj.val()); //从文本框中获取值
                $txtObj.val('哈啊哈哈哈哈'); //为文本框设置值

                //设置文本框的css样式
                //                $txtObj.css('border', '1px solid blue');//设置一个CSS属性

                //                $txtObj.css('float', 'right');//设置一个CSS属性
                $txtObj.css({
                    'border': '1px solid blue',
                    'width': '200px',
                    'height': '20px',
                    color: 'yellow',//若是合法的变量名，可以不加引号。
                    'background-color': 'blue',//不合法的变量名，要加引号。
                    paddingLeft: '30px',
                    'float': 'right',//float是保留字，要加引号。
                    fontSize: '28px'
                });//设置多个CSS属性

                //设置超链接
                var $alink = $(document.getElementById('a1'));
                $alink.text('摆了个肚');//相当于js里的innerText


                //相当于js里的innerHTML
                $alink.html('<img src="images/猪放炮.gif" />');
            };

问题

Array（数组）对象有没有对应的jQuery对象？

jQuery选择器1(完全兼容css选择器)

  $('#dv1').css({
'width': '100px',
height: '100px',
border: '1px solid blue'
});

  $('p').css('backgroundColor', 'red');

 $('#dv1').text('aaaaa');

 $(function () {
//选取按钮并注册一个单击事件
$('#btnSetText').click(function () {
//1.选取页面上所有的p元素
//隐式迭代和链式编程
$('p').text('大家都是p').css('border', '1px solid blue').css('width', '250px').mouseover(function () {
$(this).css('backgroundColor', 'yellow').siblings().css('backgroundColor', '');
});
});

 //选取页面上的所有的p元素，设置背景色为红色
            $('p').css('backgroundColor', 'red');

            //选取所有的#dv1下的所有的p元素，背景色设置为黄色
            $('#dv1 p').css('backgroundColor', 'yellow'); ;

            //选取页面上的所有的div元素下的p元素设置背景色为蓝色
            $('div p').css('backgroundColor', 'blue');

 //选取页面上的所有的span，设置文字颜色为red
            $('span').css('color', 'red');

            //选取body下的所有的span
            $('body span').css('color', 'yellow');

            //选取body下的直接子元素span
            $('body > span').css('color', 'yellow');

  $('div + p').css('backgroundColor', 'red');// +表示的是next(),后一个兄弟

 $('div ~ p').css('backgroundColor', 'red'); // ~ 表示的是nextAll(),后面的所有的兄弟

//等价于下面这种写法
 $('div').nextAll('span');
 //表示选取div后的下一个元素，并且该元素必须是span元素。
 $('div + span').css('backgroundColor', 'red');
 // + 是指该元素紧邻的下一个兄弟元素，
 //+ span 是指，该元素的下一个兄弟元素必须为span，才能被选中
 //如果该元素下一个兄弟元素是p元素，p元素的下一个兄弟元素是span元素，那么该选择器什么都选中不了。

  $('div').next(); 
  $('div + *'); 
  //这两种写法等价 

  $('div').nextAll(); 
  $('div ~ *'); 
  //这两种写法等价

 $('div').prev('span');
 //获取div的上一个兄弟元素，并且该兄弟元素必须是span 
 $('div').prevAll('span'); 
 //获取div前面的所有的span兄弟.

 //获取当前元素的所有的兄弟元素 
 $('div').siblings('span');

   $(function () {
            $('#uone li').mouseover(function () {

                //鼠标悬浮事件 ,$(this)将dom对象转成jQuery对象
                $(this).css('backgroundColor', 'red')
                       .siblings('li')
                       .css('backgroundColor', '');


            }).click(function () {
                //单击事件
                //有些方法是会破坏链式编程中返回的对象的，比如：next(),nextAll(),prev(),prevAll(),siblings(),无参数的：text()、val()、html()
                //当链式编程的链被破坏以后可以通过end()方法修复。
                $(this).prevAll().css('background-color', 'yellow')
                       .end().nextAll().css('backgroundColor', 'blue');
            });
        });

层次  选择器

后代元素  选择器

使用空格隔开

$('选择器1 选择器2');
//表示选取选择器1下的所有的选择器2。

案例2

   $(function () {

            //为每个td注册一个mouseover事件
            $('#t1 td').mouseover(function () {
                $(this).text('★').prevAll().text('★').end().nextAll().text('☆');
            }).mouseout(function () {
                //当鼠标移开的时候把所有的Td都变成☆，把具有isclicked属性的Td以及之前的td变成★
                $('#t1 td').text('☆');
                $('#t1 td[isclicked=isclicked]').text('★').prevAll().text('★');
            }).click(function () {
                $(this).attr('isclicked', 'isclicked').siblings().removeAttr('isclicked'); //等价于setAttribute()

                //点击某个td的时候显示分数
                $('#pscore').text($(this).attr('score'));
            }).attr('score', function (index) {
                return (index + 1) * 10;
            });
        });

   $('*').attr('banjimingcheng', '.netheima13');
   //给页面上所有的元素加上'banjimingcheng'这个属性，其值为'.netheima13'

  alert($('#chkBox').attr('checked'));
  //attr等价于getAttribute()和setAttribute()
  alert($('#chkBox').prop('checked')); //当要获取一个js dom对象的原生属性的时候，要使用prop()来获取。通过prop()获取的值，是经过计算的，不是直接在网页中看到的属性字符串。