Javascript、JQuery笔记

//01.获取div的高度宽的
offsetheight—能够获取任何方式设置的高度
offsetwidth—能够获取任何方式设置的宽度
offsetleft—能够获取任何方式设置的左边距
offsettop—能够获取任何方式设置的上边距
style.height和style.width只能获取通过style属性设置后的高度和宽度

设置高度和宽度的时候一定记得加单位px,比如height+‘px’;

//02.js中声明一位数组
var array = new Array();
var array=[];
var array=[1,2,3];
空数组元素默认为undefined,长度默认为0；
使用array[array.length]即可实现数组的初始化；
将数组对象直接toString()，返回的是数组内所有元素连接成的字符串；列如：array.toString();
splice()方法是对数组元素进行删除，插入，以及替换;
删除：可以删除任意数量的项，只需指定 2 个参数：要删除的第一项的位置和要删除的项数。例如， splice(0,2)会删除数组中的前两项。
插入：可以向指定位置插入任意数量的项，只需提供 3 个参数：起始位置、 0（要删除的项数）和要插入的项。例如，splice(2,0,4,6)会从当前数组的位置 2 开始插入4和6。
替换：可以向指定位置插入任意数量的项，且同时删除任意数量的项，只需指定 3 个参数：起始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。例如，splice (2,1,4,6)会删除当前数组位置 2 的项，然后再从位置 2 开始插入4和6。
//03.event对象
ie浏览器和火狐浏览器获取event对象的兼容写法:
||运算符是将为true的一边进行返回
event对象的clientX和clientY属性分别返回鼠标相对于可视页面左上角的位置的坐标，左上角坐标为（0,0）
body的范围问题，不要给body注册mousemove事件，由于body在页面中并不是默认占满整个页面的，而是通过页面元素撑起来的。所以给想要给整个屏幕注册事件时，body注册mousemove事件是不合适的，应该给document注册mousemove事件。

 window.onload = function () {
            document.onmousemove = function (evt) {
                var e = window.event || evt;//||运算符是将为true的一边进行返回
                document.getElementById('img1').style.marginLeft = e.clientX+'px';
                document.getElementById('img1').style.marginTop = e.clientY+'px';
            };
        };

//04.marginleft和left的区别
left只要在设置 过定位位置position的情况下（position: relative;或者position: absolute）生效，即需要元素脱离文档流后才生效。
margin-left是元素的左外边距，任何情况下都生效。
margin和padding的区别：
margin是指从元素自身边框到另一个元素边框之间的距离，就是容器之外距离。而padding是指元素自身边框到自身内部另一个元素边框之间的距离，就是容器内距离。好比你的屋子作为目标元素 ，屋外的东西和屋子的距离用margin，屋内的东西和屋子的距离用padding。
//05.css中margin的赋值方式
margin：10px；代表上、右、下、左分别10px
margin：10px 10px；代表上下、左右分别10px
margin：10px 10px 10px；代表上、左右、下分别10px
margin：10px 10px 10px 10px；代表上、右、下、左分别10px
//06.div内容居中
div内容位置居中textAlign属性： divShowObj.style.textAlign = ‘center’;
//07.访问键值对数据对象用forin循环访问

var data = {
                "images/1.jpg": ["张三", "18", "images/11.jpg"],
                "images/2.jpg": ["李四", "19", "images/21.jpg"],
                "images/3.jpg": ["王五", "20", "images/31.jpg"]
            }
            for (var key in data) {
                //根据数据创建img元素
                var imgObj1 = document.createElement('img');
                //src属性赋值
                imgObj1.src = key;
                //追加到div的子元素中
                divShowObj.appendChild(imgObj1);
                //设置img的高和宽
                imgObj1.style.width = '150px';
                imgObj1.style.height = '220px';
                //设置img的间距和边框
                imgObj1.style.marginRight = '20px';
                imgObj1.style.border = '1px solid green';
            }

//08.清空div中的所有元素
利用while循环，hasChildNodes()方法返回bool类型结果，用来判断是否存在子元素，firstChild属性用来获取父元素的第一个子元素

while (divInfoObj.hasChildNodes()) {//循环遍历移除子元素
                        divInfoObj.removeChild(divInfoObj.firstChild);
                    }

//09.获取属性值,采用第二种

var src = this.src;//结果是http://....这种方式返回的是浏览器处理后的属性值
var src = this.getAttribute('src');//结果是images/1.jpg,这种方式返回代码中设置的原始值，所以一般采用这种方式来获取属性值

//10.任意给元素添加属性,注意setAttribution(name,value)方法的使用

//给元素都添加一个isClicked属性
 tdObjs[j].setAttribute('isClicked', 'isClicked');
 //移除自加属性
 tdObjs[j].removeAttribute('isClicked');

//11.获得div的高和宽存在的误区(盒子模型),window.getComputedsSyle(obj,null).height/width

 //通过offsetHeight和offsetWidth获得的是包含border,padding,margin的div的高和宽
 divObj.offsetHeight + "  " + divObj.offsetWidth;
 //window.getComputedStyle(divObj, null).height才能获得出去padding，border,margin之外的css设置的div的真实高和宽
window.getComputedStyle(divObj, null).height + "   " + window.getComputedStyle(divObj, null).width;

//12.表单元素的提交
调用按钮元素的click()方法可以实现自动触发按钮元素的onclick事件
调用表单元素的submit()方法可以实现自动触发表单元素的onsubmit事件
但是，用click()方法进行提交会触发表单元素的onsubmit事件，方便我们写一些在提交前的控制代码，用
表单元素的submit()方法直接提交则不会触发表单元素的onsubmit事件，直接提交，所以需要在使用submit()方法之前写好控制代码
终止事件的触发：return false;

window.onload = function () {
            //当点击层中内容的时候自动提交搜索
            document.getElementById('divSearch').onclick = function () {
                //直接调用表单元素的submit()方法就可以提交进行搜索,或者是调用提交按钮的click()方法也可以实现提交
                //但是这两种提交方式有区别的，如果是调用提交按钮的click()方法进行提交，是会触发表单元素的onsubmit事件的
                //如果直接调用表单元素的submit()方法进行提交，则不会触发表单元素的onsubmit事件
                //这样设计的目的是，当我们通过按钮的ckick()方法进行提交的时候，可以在触发事件之前写一些控制代码
                document.getElementById('form1').submit();
                //document.getElementById('btnSubmit').click();
            };
            //当点击提交按钮进行提交的时候需要先进行对输入内容的一个判断，所以需要对表单的onsubmit事件进行注册
            document.getElementById('form1').onsubmit = function () {
                if (document.getElementById('txt').value == '') {
                    alert('请输入搜所内容！');
                    //终止事件的触发
                    return false;
                }
            };
        };

//13.不同浏览器之间的差异
Event对象的获取：在IE下是window.event,在FF中是通过在事件函数中传一个参数，这个参数就是事件对象。
获取标签之间显示的文字：在IE下是innerText(),在FF中是textContent()。
动态创建表格，IE和FF也不一样
面试时问怎么解决不同浏览器之间的兼容性问题：
答：使用JQuery第三方框架（不要说写能力测试）。
//14.正则表达式的使用
一个“点”，表示任意一个字符
一个“+”，表示出现一次或多次 zoo+ (zoo)+
一个“*”，表示出现零次或一次或多次 zoo+ (zoo)+
一个“？”，表示出现零次或一次 zoo? (zoo)?
{n} 表示必须出现n次
{n,}表示至少出现n次
{n,m}表示至少出现n次，最多出现m次
[]表示从一个范围中国任取一个 [0-9] [a-z] [A-Z]
[^]表示“表示从一个范围中国任取一个”取反
\d表示数字，它的取反是\D
\w表示单词,它的取反是\W
\s表示任意空白字符，它的取反是\S
()作用是用来改变优先级和分组
^表示字符串的开始，$表示字符串的结束
| 表示或

利用正则表达式判断是匹配：test()方法

var reg = /^\w+@\w+(\.\w+)+$/;//在注释符号中写表达式
var result = reg.test('待检测字符串');//调用正则表达式对象的test()方法

利用正则表达式提取：exec()方法

var str = '中国移动10086中国联通10010中国电信10000中国农业银行95588';
            //创建正则表达式
            var regExp = /\d+/g;//在正则表达式后面加一个g表示全局搜索，不加的话只能提取到第一个匹配的结果
            //调用正则表达式对象的exec()方法进行提取
            var result = regExp.exec(str);
            //全局匹配的情况下，重复调用正则表达式对象的exec()方法就可以将所有匹配结果提取出来
            while (result) {
                alert(result);
                result = regExp.exec(str);
            }

提取组：用（）进行分组，exec()方法返回一个数组类型结果

 var str = '中国移动10086中国联通10010中国电信10000中国农业银行95588';
            //定义一个提取组的正则表达式
            var regExp = /(\d{1})\d{2}(\d{2})/g;//将电话号码的前一位和后两位分组提取出来,另外加上g表示全局提取
            //调用正则表达式对象的exec()方法进行提取
            var result = regExp.exec(str);//提取组返回的结果是一个数组
            while (result) {
                alert(result);//返回值result在这里是一个数组类型的结果，直接alert出来就是默认调用它的toString()方法
                result = regExp.exec(str)
            }

//15.字符串的match()方法进行提取
str.match(正则表达式全局模式);

var str = '中国移动10086中国联通10010中国电信10000中国农业银行95588';
            //调用字符串对象的match()方法进行提取
            //这个方法和正则对象的exec()方法的不同之处是，match()返回的是一个包含所有提取结果的数组，而exec()方法则需要重复调用才行
            //若果想要提取组的话，最好用exec()方法比较方便
            var result = str.match(/\d+/g);//注意：正则表达式一定要加全局模式
            for (var i = 0; i < result.length; i++) {
                alert(result[i]);
            }

//16.字符串的replace()配合正则进行字符串的替换操作

var str = '张三15853882256李四15898912094王五15989425632';
            //一组原样输出，二组替换成4个*，三组原样输出
            str= str.replace(/(\d{3})(\d{4})(\d{4})/g, '$1****$3');
            alert(str);

//17.字符串的match()方法配合正则还可以用来判断字符串中是否存在某些字符

function JudgePwdStrong(pwd) {
            var lev = 0;
            //如果密码中存在数字，强度加一
            if (pwd.match(/\d+/g)) {
                lev++;
            }
            //如果密码中存在小写字母，强度加一
            if (pwd.match(/[a-z]+/g)) {
                lev++;
            }
            //如果密码中存在大写字母，强度加一
            if (pwd.match(/[A-Z]+/g)) {
                lev++;
            }
            //如果密码中存在特殊字符，强度加一
            if (pwd.match(/[^a-zA-Z0-9]+/g)) {
                lev++;
            }
            //如果密码长度超过8，强度加一
            if (pwd.length > 8) {
                lev++;
            }
            return lev;
        }

//18.获取键盘码

 document.getElementById('txt1').onkeydown = function (evt) {
                alert(evt.keyCode);
            };

//19.将一个下拉列表中的全部选项并且按照原来顺序移动到另一个下拉列表中

function moveAll(sel1, sel2) {
            //为了能够将所有的元素全部按照原来顺序移动到另一半，所以用了倒序循环，并且用了insertBefore()进行追加子元素
            for (var i = sel1.getElementsByTagName('option').length-1; i >=0 ; i--) {//倒序循环是为了将所有元素进行移动
                var optionObj = sel1.getElementsByTagName('option')[i];
                sel2.insertBefore(optionObj, sel2.firstChild);//用insertBefore()是为了保证顺序
            }
        }

//20.js压缩
用压缩工具对写完的js文件进行压缩，ji文件中的方法名称不会压缩，变量名称会被压缩。然后再部署到服务器，能够提高用户访问速度。
面试时问：怎么优化网站提高访问性能？
1.对css,html,js文件进行压缩后再部署到服务器
2.在服务器先对文件进行gzip压缩发送给客户端，然后客户端接收后再进行解压。这样就通过占用一些电脑cpu换取了网络传输的速度。
//21.apply()方法和call()方法
apply()方法和call()方法的功能一样，只是衙门的用法略有不同，都是将原来的对象用一个新对象替换掉

 //定义一个变量，这个变量默认注册给了window对象
        var user_name = '张三';
        function showName(x,y,z) {
            alert(this.user_name);
            alert(x + y + z);
        }
        showName(10,20,30);//输出‘张三  60’
        //定义一个对象
        var Person = { user_name: '李四' };
        //利用apply()方法替换对象
        showName.apply(Person, [10, 20, 30]);//输出‘李四 60’
        //利用call()方法替换对象
        showName.call(Person, 10, 20, 30);//同样输出‘李四 60’,call()方法和apply()方法功能一样，只是用法不同

//21.匿名函数递归使用arguments-callee()方法
只要是匿名函数递归一定要用arguments.callee()方法，不是匿名函数可以直接用函数名进行调用递归

var index = 0;
        var f1 = function () {
            index++;
            alert(index);
            if (index < 5) {
                //递归调用自身,这里千万不要写f1()，因为当这个匿名函数重新赋值给另一个变量的时候，这个匿名函数内部的名称是无法更改的
                arguments.callee();
            }
        }
        var f2 = f1;
        f1 = null;
        f2();

//22.url编码
encodeURI()和encodeURIComponent()均可进行编码，二者不同的是，前者只是对url中的部分进行编码，而后者则是对整个url字符串进行编码。

 var url = 'http://localhost:53756/url编码.html';
        var result = window.encodeURI(url);//encodeURI()方法只是将需要编码的部分进行编码
        alert(result);//输出http://localhost:53756/url%E7%BC%96%E7%A0%81.html
        var result2 = window.encodeURIComponent(url);//encodeURIComponent()方法是将整个url都进行编码，这样编码后在服务器是识别不出来的，所以使用时只对需要编码的部分进行编码
        alert(result2);//输出http%3A%2F%2Flocalhost%3A53756%2Furl%E7%BC%96%E7%A0%81.html

//23.insertRow()和insertCell()动态创建表格

var jsonData = [
                { id: 1, name: "赵建宇", sex: "男", age: 19 },
                { id: 2, name: "张三", sex: "男", age: 20 },
                { id: 3, name: "李四", sex: "男", age: 21 },
                { id: 4, name: "王五", sex: "男", age: 22 },
                { id: 6, name: "赵六", sex: "男", age: 23 },
                { id: 7, name: "田七", sex: "男", age: 24 }];
            var tableObj = document.createElement('table');
            document.getElementById('btnCreate').onclick = function () {
                for (var i = 0; i < jsonData.length; i++) {
                    var rowObj1 = tableObj.insertRow(-1);
                    for (var key in jsonData[i]) {
                        var cellObj1 = rowObj1.insertCell(-1);
                        //注意style.border和border的区别
                        tableObj.border = '1px';
                        cellObj1.innerHTML = jsonData[i][key];
                    }
                }
                document.body.appendChild(tableObj);//最后记得将实例化完成的table追加到body
            };

//24.JQuery
JQuery的特点：
写得少，做得多
很好的解决了不同浏览器之间的兼容问题
对于不同控件具有统一的操作方式
体积小，使用方便
链式编程，隐式迭代，插件丰富，开源免费
JQuery中的顶级对象：$对象，也就是JQuery对象，只有将普通的DOM对象封装成JQuery对象，然后才能调用JQuery中的各种方法。$是JQuery的简写，在代码中可以用JQuery代替$，但为了方便直接写$。
JQuery注册事件：JQuery注册的事件的多个赋值语句不会被覆盖，会依次执行。
//25.JQuery的ready事件
下面这种写法其实不是为window.onload事件注册的处理程序，而是为JQuery的ready()事件注册的处理程序。

$(function () {
            alert('这是JQuery的Ready事件');
        });

window.onload事件和JQuery的ready()事件的区别：
window.onload事件是需要等待页面中的所有标签元素和引用的资源全部加载完毕之后才触发的。
JQuery的ready()事件是只要页面的所有标签元素加载完毕了就可以触发。
所以说，从用户的“感觉”的角度来说，使用JQuery的ready()事件会让用户感觉处理速度“更快了”。

//$(function(){});是$(document).ready(function(){});的简写形式。
        $(function () {
            alert('这是JQuery的ready()事件');
        });
        $(document).ready(function () {
            alert('这是JQuery的ready()事件')
        });

和window.onload等价的写法：

 //将window对象转成JQuery中的对象，再调用load事件
        $(window).load(function () { });

//26.JQuery中的map方法，用来遍历数组
技巧：当不知道一个回调函数中的参数有什么的时候，可以用毁掉函数的arguments.length查看参数个数，然后alert一下，就知道了。
map方法遍历数组，他的回调函数参数一个是元素，一个是该元素的索引，需要return一下才能返回被接收。
回调函数中的参数element,他是一个DOM类型的对象

 var array = [10, 20, 30, 40, 50];
            //map方法的回调函数参数一个是数组元素，一个是该元素的索引
            var result = $.map(array, function (element, index) {//回调函数可通过arguments.length查看回调函数的参数个数，然后alert一下，这里的element是一个DOM类型的对象
                return element*2;
            })
            $.map(result, function (element) {
                alert(element);//打印20 40 60 80 100
            })

//27.JQuery中的each方法用来循环普通数组和对象
each方法与map方法不同，each方法知识对数组进行遍历，不会对数组的值进行改变。
在each方法中想要跳出循环，只能用return false ，而不能用break。

 var intArray = [10, 20, 30, 40, 50];
            //用each方法来遍历普通数组
            //如果想要跳出循环，只能用return false,而不能用break
            var result= $.each(intArray, function (index,element) {//和map方法不同的是，回调函数的参数顺序不同
                alert(index + "  " + element);
            });
            var data = { name: "张三", sex: "男", age: 18 };
            $.each(data, function (key,value) {
                alert(key + "  " + value);
            });

//28.JQuery中的trim()方法去掉字符串前后两端的空格

$(function () {
            var str = "       hello      ";
            var result = $.trim(str);//trim()方法去掉字符串前后端的空格
            alert("======" + result + "=======");
        });

//29.DOM对象和JQuery对象之间的互相转换以及常用方法
将DOM对象转换成JQuery对象: var $Obj = $(domObj);
/将JQuery对象转换成DOM对象 var domObj2 = $Obj[0];//或者domObj2=$Obj.get(0); 这两种方式都可以将JQuery对象转换成DOM对象
JQuery对象的获取和设置值的方法val() : alert($(’#btn1’).val()); $(’#btn1’).val(“重新设置了值”);
//JQuery对象设置样式的方法css()

$ ("#div1").css({
“width”: “400px”,
“height”: “400px”,
“backgroundColor”: “blue”
});
在JQuery对象中设置包含文字的方法是text()：$Obj.text(‘hello world!’);
//设置超链接的热点文字为一张照片 $("#a1").html(’’);

//DOM对象只能访问自己的成员，JQuery对象也只能访问自己的成员
            $('#btn1').click(function () {
                //获得DOM对象
                var domObj = document.getElementById('div1');
                domObj.innerText = '你好世界！';
                //将DOM对象转换成JQuery对象
                var $Obj = $(domObj);
                $Obj.text('hello world!');//在JQuery对象中设置包含文字的方法是text();
                //将JQuery对象转换成DOM对象
                var domObj2 = $Obj[0];//或者  domObj2=$Obj.get(0); 这两种方式都可以将JQuery对象转换成DOM对象
                domObj2.innerText = '你好 world!';
            });
            //JQuery对象的获取和设置值的方法val()
            alert($('#btn1').val());
            $('#btn1').val("重新设置了值");
            //JQuery对象设置样式的方法css()
            $("#div1").css({
                "width": "400px",
                "height": "400px",
                "backgroundColor": "blue"
            });
            //JQuery对象的html()方法     
            //设置超链接的热点文字为一张照片
            $("#a1").html('');

//30.Jquery中的选择器及隐式迭代以及链式编程
之所以JQuery能使用链式编程，是因为它的每个方法用完之后都把this返回了。

 $("p").text("全部改变了");//这里是获取页面的所有p标签，但是没有去循环遍历,是因为隐式迭代
            $("#div1").css({
                "width": "500px",
                "height": "500px",
                "backgroundColor": "red"
            }).css({
                "fontSize": "xx-large"
            }).text("哈哈哈");//链式编程
            //链式编程注意：只有使用方法进行设置值的时候才能进行链式编程的写法，如果只是获取值，则不能使用链式编程
            $("p.cls1").text("这是所有类样式为cls1的p标签");//标签+类样式选择器
            $(".cls,#btn1,div,p").css({ "backgroundColor": "red" });//组合选择器
            //层次选择器
            $("div p").text("哈哈");//这是层次选择器，选取的是所有div下的所有p标签
            $("p > font").text("我是所欲p标签下的直接子元素");//直接子元素选择器
            $("#p1 + p").css({});//选择#p1的p标签的下一个同胞p标签
            //上边等价于
            $("#p1").next("p").css({ "color": "blue" });//选择#p1的p标签的下一个同胞p标签
            $("#p1 ~ p").css({ "color": "blue" });//选择#p1的p标签的所有同胞p标签
            //上边等价于
            $("#p1").nextAll("p").css({ "color": "blue" });//选择#p1的p标签的所有同胞p标签
            //获取上一个同胞元素
            $("#p1").prev("p").text("我是上一个元素");
            //获取前面的所有同胞元素
            $("#p1").prevAll("p").text("hah");
            //获取当前元素的所有兄弟元素
            $("#p1").siblings("p").text("嘎嘎嘎");

//31.链式编程被打破后使用end()方法可以恢复链

$(this).prevAll().css({ "backgroundColor": "red" }).end().nextAll().css({ "backgroundColor": "blue" });//end()方法返回this对象

//32.获取和设置属性的两个方法之间的区别：prop()和attr(),前者获取和设置的值是计算过的值，而后者获取或设置的值是在页面中看到的字符串值。建议使用prop()。

//注意获取和设置属性的两个方法attr()和prop()的区别
                $("ul input").prop("checked", true);//这是使用prop()方法来设置属性
                $("ul input").prop("checked");//这是实用prop()方法来获取属性值，返回结果为“true”或者“false”
                $("ul input").attr("checked", "checked");//这是使用attr()方法来设置属性
                $("ul input").attr("checked");//这是使用attr()方法来获取属性值，返回结果为“checked”或者“undefined”

//32.JQuery中的属性选择器

 //JQuery中的属性选择器
            $("input[type=text]");

//33.如何理解JQuery对象是一个包装集

//如何判断页面中存不存在某个元素，由于JQuery对象就是一个dom对象的集合，所以可以访问它的length属性
            if ($("#btn1").length > 0) {
                alert("存在该元素！");
            } else {
                alert("不存在该元素!");
            }
            //由于JQuery对象是一个包装集，所以我们可以通过下标访问里边的每一个dom对象.通过下标访问返回的是dom对象
            for (var i = 0; i < $("input").length; i++) {
                alert($("input")[i].id);//这里返回的是dom对象
            }

//34.使用JQuery操作类样式
JQuery对象的addClass(),removeClass(),hasClass()

 //JQuery操作类样式复杂写法
                //判断某个元素是否应用了某个类样式
                if ($("body").hasClass("night")) {
                    //如果该元素应用了此类样式，那么把该类样式移除
                    $("body").removeClass("night");
                } else {
                    //如果该元素不存在该类样式，那么把他添加上
                    $("body").addClass("night");
                }

JQuery对象的toggleClass()方法可以更简单的操作类样式
这个方法会自动帮助我们判断某个元素是否应用了某个类样式，如果应用了，那么就移除，如果没应用，那么就应用。

//JQuery操作类样式简单写法
                //Jquery对象的toggleClass()方法会自动帮助我们判断是否应用了某个类样式
                $("body").toggleClass("night");

//35.JQuery中的基本的过滤器
注意：选择器和过滤器之间加空格和不加空格是不一样的，"p:first"表示所有p标签中的第一个p标签
"p :first"表示p标签下的第一个子元素

  //JQuery中基本的过滤器
            //获取第一的p标签
            $("p:first").css({ "backgroundColor": "red" });
            //获取最后一个p标签
            $("p:last").css({ "backgroundColor": "blue" });
            //获得第三个p标签
            $("p:eq(2)").css({ "backgroundColor": "yellow" });
            //获得偶数位的p标签
            $("p:even").css({ "backgroundColor": "gray" });
            //获得奇数位的p标签
            $("p:odd").css({ "backgroundColor": "black" });
            //索引大于2的所有p标签
            $("p:gt(2)").css({ "backgroundColor": "green" });
            //索引小于4的所有p标签
            $("p:lt(4)").css({ "backgroundColor": "red" });
            //获取除了应用了cls1类样式的所有的p标签
            $("p:not(.cls1)").css({ "backgroundColor": "pink" });
            //获取所有的标题标签
            $(":header").css({ "backgroundColor": "red" });

//36.使用选择器进行相对定位
$(“选择器”，上下文参数); 这里的上下文参数可以使dom对象，也可以是JQuery对象

 $("tr").click(function () {
                $("td:even", $(this)).css({ "backgroundColor": "red" });
                $("td:odd", $(this)).css({ "backgroundColor": "yellow" });
            });

//37.JQuery中的属性过滤选择器

//得到所有含有name属性的input标签
            $("input[name]").css({ "border": "1px solid red" });
            //得到所有含有name属性，并且name属性等于txt1的标签
            $("input[name=txt1]").css({ "border": "1px solid blue" });
            //得到包含name属性，但name属性不等于txt1的所有元素
            $("input[name!=txt1]").css({ "border": "1px solid red" });
            //得到包含name属性，并且name属性以a开头的元素
            $("input[name^=a]").css({ "border": "1px solid red" });
            //得到包含name属性，且name属性以a结尾的
            $("input[name$=a]").css({ "border": "1px solid red" });
            //得到包含name属性，并且name属性中包含a的
            $("input[name*=a]").css({ "border": "1px solid red" });
            //得到同时具有多个属性的元素
            $("input[name][id][type]").css({ "border": "1px solid red" });
            //得到name属性为""的
            $("input[name=]").css({ "border": "1px solid red" });

//38.JQuery中的表单过滤器

//得到表单中被禁用的元素
            $("#form1 :disabled").css({ "backgroundColor": "blue" });
            //得到表单中没有被禁用的元素
            $("#form1 :enabled").css({ "backgroundColor": "red" });
            //得到表单中被选中的复选框
            $("#form1 input:checked").prop("checked",false);
            //得到表单中没有被选中的复选框
            $("#form1 input:not(:checked)").prop("checked", true);
            //得到被选中的下拉框
            $("#btn1").click(function () {
                $("#form1 option:selected").text(function (index,val) {
                    return "===" + val + "===";
                });
            });
            //得到为被选中的下拉框
            $("#btn1").click(function () {
                $("option:not(:selected)").text(function (num,val) {
                    return "===" + val + "===";
                });
            });

//39.JQuery动态创建元素
被动添加方法：
append() prepend() after() before()
主动添加方法：
appendTo() prependTo() insertAfter() insertBefore()

                //第一种创建元素的方法，直接用append()追加
                var aObj = $('百度');
                $("#div1").append(aObj);
                //第二种创建元素的方法，将创建好的元素主动追加到目标元素上
                $('百度').appendTo("#div1");
                //将创建的元素插入到最前面，使用prepend()
                var aObj = $('百度');
                $("#div1").prepend(aObj);
                //将创建的元素主动插入到最前面
                $('百度').prependTo("#div1");
                //将创建的元素放在已有元素的后面，使用after()
                var aObj = $('百度');
                $("#div1").after(aObj);
                //将创建的元素放在已有的元素前面，使用before()
                var aObj = $('百度');
                $("#div1").before(aObj);
                //将创建好的元素主动插入到已有元素的后面
                $('百度').insertAfter("#div1");
                //将创建好的元素主动插入到已有元素的前面
                $('百度').insertBefore("#div1");

//40.使用JQuery动态创建表格
注意使用循环方法map()和each()二者的回调函数参数的区别

var data = {
            "百度": "http://www.baidu.com",
            "饿了么": "http://www.baidu.com",
            "阿里": "http://www.baidu.com",
        };
        $(function () {
            //注册单击事件
            $("#btn1").click(function () {
                //创建一个table主动添加到body中
                var tblObj = $('').appendTo("body");
                ////用each()方法进行循环遍历数据，创建tr，主动添加到table对象中
                //$.each(data, function (key, val) {
                //    $('' + key + ''+key+'').appendTo(tblObj);
                //});
                //用map方法进行循环遍历数据，创建tr，主动添加到table对象中
                $.map(data, function (val,key) {
                    $('' + key + '+ val + '" target="_blank">' + key + '').appendTo(tblObj);
                });
            });
        });

//41.Jquery清空和删除元素
empty()是将制定元素内部的元素清空
remove()是将指定元素本身移除，自毁

 //清除div中的所有元素，empty()方法
            $("#btnClear").click(function () {
                //清空div
                $("#div1").empty();
            });
            //remove()方法是将自身移除
            $("#btnDel").click(function () {
                //删除指定元素，自毁
                $("#div1").remove();
            });

//42.Jquery获取向上两级的父元素

$(this).parent().parent().remove();//将向上两级父元素直接移除

//43.JQuery中节点的替换与包裹:
节点替换：replaceWith() replaceAll()
节点包裹： wrap() wrapAll() wrapInner()

                //节点替换
                //第一种节点替换,replaceWith()方法
                $("body hr").replaceWith($('百度'));
                //第二种节点替换的方式,replaceAll()方法
                $($('百度')).replaceAll($("body hr"));
                //节点包裹
                //第一种节点包裹的方式,wrapAll()方法是讲不通位置的p标签聚集在一起，然后包裹起来，只有一个h3标签
                $("p").wrapAll('
');
                //第二种包裹的方式,wrap()方法是将每一个p标签都用一个h3标签包裹起来
                $("p").wrap('
');
                //第三种包裹的方式,wrapInner()方法，是将每一个h3标签用p标签包裹起来，是被包裹在里面
                $("p").wrapInner('
');

//44.//JQuery中快速选中radio,checkbox,select的方法

            $(":radio").val(["male"]);//val()方法内传入的是数组
            $(":checkbox").val(["ckb2"]);
            $("select").val(["sel3"]);

//45.//JQuery中取消已经注册的事件以及合成事件

            //为注册时间按钮注册事件
            $("#btn1").click(function () {
                //为注册事件的按钮增加边框
                $(this).css({ "border": "5px solid red" });
            });
            //为取消事件按钮注册事件
            $("#btn2").click(function () {
                //只取消click事件
                $("#btn1").unbind("click");
                //取消所有事件
                $("#btn1").unbind();
            });
            //合成事件，比如hover事件就是mouseover和mouseout的合成事件
            //hover事件需要两个处理函数参数，第一个是mouseover的,第二个是mouseout的
            $("#btn1").hover(function () {
                $(this).css({ "color": "red" });
            }, function () {
                $(this).css({ "color": "black" });
            });

//46.JQuery中取消事件冒泡以及事件对象的属性
JQuery中的事件对象event是经过封装的，已经是兼容的，和js里边的event对象是不一样的

 //JQuery中的事件对象event是经过封装的，已经是兼容的，和js里边的event对象是不一样的
            //为p标签注册单击事件
            $("#p1").click(function (evt) {
                //获取当前事件的类型,使用event对象的type属性
                alert(evt.type);
                alert("p标签的单击事件被触发");
                //取消事件冒泡，调用event对象的stopPropagation()方法
                evt.stopPropagation();
            });
            $("#div1").click(function (evt) {
                alert("div的单击事件bei触发");
                //得到冒泡事件中最先触发事件的元素，使用event.target
                alert(evt.target);
            }).mousemove(function (evt) {
                //得到页面坐标,event对象的pageX和pageY分别得到坐标值
                $("title").prop("text", function () {
                    return evt.pageX + "    " + evt.pageY;
                });
            });
            $("#txt1").keydown(function (evt) {
                //event对象的which属性是获取键盘按下的哪个键
                alert(evt.which);
            });

//47.JQuery动画
show()------hide()--------toggle()
slideDown()------slideUp()-----slideToggle()
fadeIn()-------fadeOut()-------fadeToggle()

 //显示
            $("#btnShow").click(function () {
                $("#div1").show(1000);
            });
            //隐藏
            $("#btnHide").click(function () {
                $("#div1").hide(1000);
            });
            //显示或隐藏
            $("#btnShowOrHide").click(function () {
                $("#div1").toggle(1000);
            });
            //下拉显示
            $("#btnSlideShow").click(function () {
                $("#div1").slideDown(1000);
            });
            //上拉隐藏
            $("#btnUpHide").click(function () {
                $("#div1").slideUp(1000);
            });
            //滑动显示或隐藏
            $("#btnSlideShowOrHide").click(function () {
                $("#div1").slideToggle(1000);
            });
            //淡入
            $("#btnFadeIn").click(function () {
                $("#div1").fadeIn(2000);
            });
            //淡出
            $("#btnFadeOut").click(function () {
                $("#div1").fadeOut(2000);
            });
            //淡入或淡出
            $("#btnFadeInOrOut").click(function () {
                $("#div1").fadeToggle(2000);
            });

//48.JQuery自定义动画
自定义动画调用animate()方法，停止动画调用先用过滤器“：animated”定位到正在执行动画的元素，然后调用stop(参数1，参数2)方法，第一个bool参数是指是否清除动画队列，第二个bool参数是指是否跳到动画结尾。
有一些样式是不能用来动画显示的，因为这些样式一改立马就变了，比如backgroundColor、color等等。

 $("#btnStartAnimate").click(function () {
                //调用animate()方法自定义动画
                $("#div1").animate({ "width": "+=200px", "height": "+=150px" }, 1000)
                    .animate({ "width": "-=150", "height": "+=150px" }, 1000)
                .animate({ "width": "+=250", "height": "+=150px" }, 1000)
                .animate({ "width": "-=200", "height": "-=200px" }, 1000)
                .animate({ "width": "300px", "height": "100px","left":"900px","top":"600px" }, 1000);
            });
            $("#btnStopAnimate").click(function () {
                //停止动画stop()方法，第一个bool参数是指是否清除动画队列，第二个bool参数是指是否跳到动画结尾
                $(":animated").stop(true,true);
            });

//49.JQuery-cookie插件
在引入cookie插件js包之前必须将JQuery的js包引入，因为Cookie插件是依靠JQuery的。
cookie是什么以及他的特点：
cookie就是保存在浏览器上的内容，以键值对的形式存在，所以在写入的时候是以键值对的形式写入的。
特点：
1.cookie保存到客户端的硬盘里，根据不同的浏览器保存的路径不同
2.有一定的安全性问题
3.cookie是和浏览器相关的
4.cookie是经过浏览器写入硬盘的
5.cookie是和域名相关的
6.cookie是由浏览器在用户请求相同的域名时一起携带发起请求的
7.因为cookie是写在客户端浏览器的，所以我们随时可以删除对应的cookie信息

   获取cookie的方法： $.cookie("userName")；
   设置cookie的方法： $.cookie("userName", user_name, { expires: 7, path: "/", secure: false })；
   参数： { expires: 7, path: "/", secure: false }
   参数中的expires是有效期，如果不设置，默认为进程内有效，即存在于内存中，随着浏览器进程的关闭而释放。
   参数中的path是被访问网站的根目录，如果设置成/a/b/c，那么只有访问a/b/c这个目录下的页面的时候才能一起携带cookie，访问这个网站其它页面不会携带cookie。
   参数secure设置为true的时候，只有https协议的网站才能携带cookie，设置为false的时候，http协议的网站也能携带cookie。

            //首先读取cookie
            if ($.cookie("userName")) {
                $("p").text("你好，"+$.cookie("userName")+"！");
            }
            else {
                $("p").text("你好，游客！");
            }
            $("#btnRememberMe").click(function () {
                //获取用户名称
                var user_name = $("#txtName").val();
                //写入cookie
                $.cookie("userName", user_name, { expires: 7, path: "/", secure: false });
            });

//50.JQzoom插件使用

    <!-- 需要引入的js文件和css文件，JQzoom文件需要与Jquery版本适配 -->
    <script src="JQuery/JQzoom/js/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="JQuery/JQzoom/js/jqzoom.pack.1.0.1.js" type="text/javascript"></script>
    <link href="JQuery/JQzoom/css/jqzoom.css" rel="stylesheet" />

只需要选中a标签调用jqzoom()方法就ok。

    <!-- 一个a标签内含一个img标签 -->
    <a href="images/JQzoom.jpg" title="这是一张图片" id="a1">
        <img src="images/JQzoom-1.jpg" title="这是一张图片" />
    </a>
    <script type="text/javascript">
        $(function () {
            //选中a标签直接调用jqzoom()方法即可
            //$("#a1").jqzoom();
            $("#a1").jqzoom({
                zoomWidth: 300, //放大图的宽度(默认是 200)
                zoomHeight: 250, //放大图的高度(默认是 200)
                offset: 10, //离原图的距离(默认是 10)
                position: "left", //放大图的定位(默认是 "right")
                preload: 1
            }
                );
        });
    </script>

//51.JQueryUI控件的使用

    <link href="JQuery/jquery-ui-1.12.1.custom/jquery-ui.css" rel="stylesheet" />
    <script src="JQuery/jquery-2.0.0.js" type="text/javascript"></script>
    <script src="JQuery/jquery-ui-1.12.1.custom/jquery-ui.js" type="text/javascript"></script>

<body>
    <style type="text/css">
        li {
        margin-top:10px;
        }
    </style>
    <!-- 日期选择器只需要在页面上提供一个文本框即可 -->
    请选择日期：<input id="txtDate" type="text"/>
    <!-- 折叠面板 -->
    <div style="width:500px">
        <div id="accordionDiv">
            <p>第一部分</p>
            <div>
                <ul>
                    <li>这是第一部分的内容</li>
                    <li>这是第一部分的内容</li>
                    <li>这是第一部分的内容</li>
                    <li>这是第一部分的内容</li>
                </ul>
            </div>
            <p>第二部分</p>
            <div>
                <ul>
                    <li>这是第二部分的内容</li>
                    <li>这是第二部分的内容</li>
                    <li>这是第二部分的内容</li>
                    <li>这是第二部分的内容</li>
                </ul>
            </div>
            <p>第三部分</p>
            <div>
                <ul>
                    <li>这是第三部分的内容</li>
                    <li>这是第三部分的内容</li>
                    <li>这是第三部分的内容</li>
                    <li>这是第三部分的内容</li>
                </ul>
            </div>
        </div>

    </div>
    <!-- 对话框 -->
    <div id="dialogDiv" title="这是一个简单的对话框">
        <p>这是对话框里边的内容</p>
    </div>
    <input type="button" id="btnShowDialog" value="打开对话框"/>
    <script type="text/javascript">
        $(function () {
            //调用datepicker()方法来绑定日期选择面板
            $("#txtDate").datepicker();
            //选中总的div,调用accordion()方法即可实现折叠面板功能
            $("#accordionDiv").accordion();
            //调用dialog()方法绑定对话框
            $("#dialogDiv").dialog({
                title:"这是对话框的标题",
                autoOpen: false,
                show: "blind",
                hide: "explode",
                buttons: {
                    "OK": function () {
                        $("#dialogDiv").dialog('close');//调用close方法关闭对话框
                    }
                }
            });
            //单击按钮打开对话框
            $("#btnShowDialog").click(function () {
                $("#dialogDiv").dialog('open');//调用open方法打开对话框
                $("#dialogDiv").dialog({
                    modal:true//modal属性设置对话框后遮罩一层灰纱
                })
            });
        });
    </script>
</body>

//52.自己编写一个JQuery插件
JQuery的扩展方法JQuery.extend()和JQuery.fn.extend()的区别：
jQuery为开发插件提拱了两个方法：jQuery.fn.extend()和jQuery.extend()。

Jquery.extend()方法是为JQuery自身进行扩展方法

jQuery.extend({
　　add: function(a, b) { alert(a + b); }
});
jQuery.add(10,20); //30

JQuery.fn.exyend()方法是为实例化的Jquery对象扩展的方法

jQuery.fn.extend({          
     clickFunc: function() {            
           $(this).click(function(){                 
                  alert($(this).val());           
            });           
      }       
});       
$("#input1").clickFunc(); //输出文本框的文本

总结：
jQuery.extend()是为jQuery类添加类方法（静态方法），需要通过jQuery类来调用（直接使用 $.xxx 调用）；

jQuery.fn.extend()是为jQuery类添加成员函数（实例方法），所有jQuery实例都可以直接调用（需要使用 $().xxx 调用）。

自己编写的一个JQuery插件

//插件主体
; (function ($) {
    $.fn.extend({
        setTableStyle: function () {
            //这里的this代表的是table元素，谁调用这个方法数就是this
            $("tr", this).mouseover(function () {//得到table下的所有tr标签，注册mouseover事件
                //鼠标悬浮的背景颜色变黄，其他变白，这里的this则不同，这里的this是注册事件的对象
                $(this).css({ "backgroundColor": "yellow" }).siblings().css({ "backgroundColor": "white" });
            });
        },
        clearTableStyle: function () {
            //将table下的所有tr标签重新设置背景颜色均为白色，并且清空已经注册的事件，unbind()方法直接清空所有已经注册的事件
            $("tr", this).css({ "backgroundColor": "white" }).unbind();
        }
    })
})(jQuery);

    <!-- 引入所需的js包 -->
    <!-- 先引入JQuery主程序 -->
    <script src="JQuery/jquery-2.0.0.js" type="text/javascript"></script>
    <!-- 再引入自己编写的插件js包 -->
    <script src="JQuery-tableStyle.js" type="text/javascript"></script>

//调用插件
 $(function () {
            $("#btnSet").click(function () {//注册按钮的单击事件
                $("#tbl1").setTableStyle();//选中table元素直接调用扩展方法setTableStyle()方法
            });
            $("#btnClear").click(function () {//注册单击事件
                $("#tbl1").clearTableStyle();//选中table元素，直接调用扩展方法clearTableStyle()方法
            });
        });