Jquery

Posted 2020-10-01 lifusen

‘use strict‘;
// 如果浏览器支持strict模式，
// 下面的代码将报ReferenceError错误:
abc = ‘Hello, world‘;
alert(abc);
if (confirm() { //如果点“是”

} else {

}
xm[‘middle-school‘]
对象内部的成员命中有- 那么必须加引号 调用该成员属性 必须用a[‘s-c‘] 而不是a.sc

////////////////////////////////////////////////////////////////////////////////
typeof true; // ‘boolean‘ 看值的类型
typeof Math.abs; // ‘function‘
typeof null; // ‘object‘
javascript把null、undefined、0、NaN和空字符串‘‘ ""视为false，其他值一概视为true。
var now = new Date();
now; // Wed Jun 24 2015 19:49:22 GMT+0800 (CST)
now.getFullYear(); // 2015, 年份
now.getMonth(); // 5, 月份，注意月份范围是0~11，5表示六月
now.getDate(); // 24, 表示24号
now.getDay(); // 3, 表示星期三
now.getHours(); // 19, 24小时制
now.getMinutes(); // 49, 分钟
now.getSeconds(); // 22, 秒
now.getMilliseconds(); // 875, 毫秒数
now.getTime(); // 1435146562875, 以number形式表示的时间戳
var d = new Date(2015, 5, 19, 20, 15, 30, 123);
d; // Fri Jun 19 2015 20:15:30 GMT+0800 (CST)
或者
var d = Date.parse(‘2015-06-24T19:49:22.875+08:00‘);
d; // 1435146562875
但它返回的不是Date对象，而是一个时间戳。不过有时间戳就可以很容易地把它转换为一个Date：
var d = new Date(1435146562875);
d; // Wed Jun 24 2015 19:49:22 GMT+0800 (CST)
Date对象表示的时间总是按浏览器所在时区显示的，不过我们既可以显示本地时间，也可以显示调整后的UTC时间：
var d = new Date(1435146562875);
d.toLocaleString(); // ‘2015/6/24 下午7:49:22‘，本地时间（北京时区+8:00），显示的字符串与操作系统设定的格式有关
d.toUTCString(); // ‘Wed, 24 Jun 2015 11:49:22 GMT‘，UTC时间，与本地时间相差8小时
////////////////////////////////////////////////////////////////////////////////
\d 1个数字
\w 一个字母或数字
\s 匹配1个空格，包括Tab
. 匹配任意字符，但不能匹配换行符
* 任意个字符
+ 至少一个字符
? 0个或1个字符
{n} n个字符
{n,m} n到m个字符
[] 范围匹配。
\- 特殊字符要用\进行转义。
| 或的关系
^ 表示行的开头，^\d表示必须以数字开头
$ 表示行的结束，\w$表示必须以数字或字母结束。
var re1 = /ABC\-001/;
var re2 = new RegExp(‘ABC\\-001‘);
判断是否匹配用test
var re = /^\d{3}\-\d{3,8}$/;
re.test(‘010-12345‘); // true
http://www.sojson.com/regex/generate 常用的正则表达式
////////////////////////////////////////////////////////////////////////////////
JSON是JavaScript Object Notation的缩写，它是一种数据交换格式。
JSON.stringify(xiaoming); 格式化
JSON.parse(ss); 反格式化
把json字符串变成javascript对象
JSON.parse(‘{"name":"小明","age":14}‘, function (key, value) {
// 把number * 2:
if (key === ‘name‘) {
return value + ‘同学‘;
}
return value;
}); // Object {name: ‘小明同学‘, age: 14}

函数的写法
function abs(x) {
if (x >= 0) {
return x;
} else {
return "asdfasdfas";
}
}
var abs = function (x) {
if (x >= 0) {
return x;
} else {
return -x;
}
};
无名字如上 使用abs() 调用
console.log(‘hello,延时器执行‘);
window.setTimeout方法
setInterval(hello,5000);//5秒后执行 ‘定时器执行‘
window.clearTimeout(id); 取消
定义在对象内部的函数叫方法。
var xiaoming = {
name: ‘小明‘,
birth: 1990,
age: function () {
var y = new Date().getFullYear();
return y - this.birth;
}
};
///////////////////////////////////////////////////////////////////////////////////////
bom对象:
alert(‘window inner size: ‘ + window.innerWidth + ‘ x ‘ + window.innerHeight);全屏下是分辨率;
window.open打开窗口
screen对象表示屏幕的信息
常用的属性有：
- screen.width：屏幕宽度，以像素为单位；
- screen.height：
屏幕高度，以像素为单位；
- screen.colorDepth：返回颜色位数，如8、16、24。
表示浏览器对象，最常用的属性包括：

- navigator.appName：浏览器名称；
- navigator.appVersion：浏览器版本；
- navigator.language：浏览器设置的语言；
- navigator.platform：操作系统类型；
- navigator.userAgent：浏览器设定的User-Agent字符串。
location对象表示当前页面的URL信息：
location.protocol; // ‘http‘
location.host; // ‘www.example.com‘
location.port; // ‘8080‘
location.pathname; // ‘/path/index.html‘
location.search; // ‘?a=1&b=2‘
location.hash; // ‘TOP‘
if (confirm(‘重新加载当前页‘ + location.href + ‘?‘)) {
location.reload();
} else {
location.assign(‘/discuss‘); // 设置一个新的URL地址
}
////////////////////////////////////////////////////////////////////////////////////
document对象：
document.getElementById(); 对象
menu.tagName; // ‘DL‘
getElementsByClassName(‘cs‘); 集合
getElementsByTagName(‘ul‘);集合
JavaScript可以通过document.cookie读取到当前页面的Cookie：
- 更新：更新该DOM节点的内容，相当于更新了该DOM节点表示的HTML的内容；
- 遍历：遍历该DOM节点下的子节点，
以便进行进一步操作；
- 添加：在该DOM节点下新增一个子节点，相当于动态增加了一个HTML节点；
- 删除：将该节点从HTML中删除，
相当于删掉了该DOM节点的内容以及它包含的所有子节点。
window.onload=function(){
在这写dom选择器代码
及操作dom的代码。
}
1、获取DOM
第一种
document.getElementById()
document.getElementsByTagName()
以及CSS选择器
document.getElementsByClassName()
第二种
// 通过querySelector获取ID为q1的节点：
var q1 = document.querySelector(‘#q1‘);
// 通过querySelectorAll获取q1节点内的符合条件的所有节点：
var ps = q1.querySelectorAll(‘div.highlighted > p‘);
p是一个对象
p.innerHTML = ‘ABC <span style="color:red">RED</span> XYZ‘;
第二种是修改innerText或textContent属性，这样可以自动对字符串进行HTML编码，保证无法设置任何HTML标签：
HTML被自动编码，无法设置一个<script>节点:
修改CSS也是经常需要的操作。DOM节点的style属性对应所有的CSS，可以直接获取或设置。
因为CSS允许font-size这样的名称，但它并非JavaScript有效的属性名，
所以需要在JavaScript中改写为驼峰式命名fontSize：
p.style.fontSize = ‘20px‘;
3、更新DOM
一个是使用appendChild，把一个子节点添加到父节点的最后一个子节点
更多的时候我们会从零创建一个新的节点，然后插入到指定位置：
list = document.getElementById(‘list‘),
haskell = document.createElement(‘p‘);
haskell.id = ‘haskell‘;
haskell.innerText = ‘Haskell‘;
list.appendChild(haskell);
创建一个对象
var d = document.createElement(‘style‘);
d.setAttribute(‘type‘, ‘text/css‘);
d.innerHTML = ‘p { color: red }‘;
document.getElementsByTagName(‘head‘)[0].appendChild(d);
2.2 如果我们要把子节点插入到指定的位置怎么办？可以使用parentElement.insertBefore(newElement, referenceElement);，
子节点会插入到referenceElement之前。
var
list = document.getElementById(‘list‘),
ref = document.getElementById(‘python‘),
haskell = document.createElement(‘p‘);
haskell.innerText = ‘Haskell‘;
list.insertBefore(haskell, ref );
4、删除DOM
// 拿到待删除节点:
var self = document.getElementById(‘to-be-removed‘);
// 拿到父节点:
var parent = self.parentElement;
// 删除:
var removed = parent.removeChild(self);
removed === self; // true
捕获型事件
var div2 = document.getElementById(‘div2‘);
div2.addEventListener(‘click‘, alertID, true);
在节点上addEventListener(‘click‘, 出发后会发生的行为, true);
冒泡型事件
<p onclick="Add(‘p事件触发<br />‘,‘p‘)" style="background:#c00;">点击</p>
在标签上onclick=‘方法‘
onclick事件 onchange事件 onselect onLoad（图像或页面结束载入时产生） onmouseover和onmouseout
////////////////////////////////////////////////////////////////////////////////////////////////////////////
使用jquery
1、从http://www.jq22.com/jquery-info122下载并解压至项目的js目录
<script src="jquery.js"></script>
<script>
$(function () {
alert(‘jQuery版本：‘ + $.fn.jquery);
});
</script>
//三种写法
$(document).ready(function);
$().ready(function);
$(function)
////////////////////////////////////////////////////////////////////////////////////////////////////////////
基本选择器（6个）
1、按ID查找
// 查找<div id="abc">:
var div = $(‘#abc‘);
jQuery的选择器不会返回undefined或者null
jQuery对象和DOM对象之间可以互相转化：
var div = $(‘#abc‘); // jQuery对象
var divDom = div.get(0); // 假设存在div，获取第1个DOM元素
var another = $(divDom); // 重新把DOM包装为jQuery对象
2、按tag查找
var ps = $(‘p‘); // 返回所有<p>节点
ps.length; // 数一数页面有多少个<p>节点
3、按class查找
var a = $(‘.red‘); // 所有节点包含`class="red"`都将返回
// 例如:
// <div class="red">...</div>
// <p class="green red">...</p>
4、按属性查找
一个DOM节点除了id和class外还可以有很多属性，很多时候按属性查找会非常方便，比如在一个表单中按属性来查找：
var email = $(‘[name=email]‘); // 找出<??? name="email">
var passwordInput = $(‘[type=password]‘); // 找出<??? type="password">
var a = $(‘[items="A B"]‘); // 找出<??? items="A B">
当属性的值包含空格等特殊字符时，需要用双引号括起来。
按属性查找还可以使用前缀查找或者后缀查找：
var icons = $(‘[name^=icon]‘); // 找出所有name属性值以icon开头的DOM
// 例如: name="icon-1", name="icon-2"
var names = $(‘[name$=with]‘); // 找出所有name属性值以with结尾的DOM
// 例如: name="startswith", name="endswith"
5、组合查找
组合查找就是把上述简单选择器组合起来使用。如果我们查找$(‘[name=email]‘)，很可能把表单外的也找出来，
但我们只希望查找，就可以这么写：
var emailInput = $(‘input[name=email]‘); // 不会找出<div name="email">
同样的，根据tag和class来组合查找也很常见：
var tr = $(‘tr.red‘); // 找出<tr class="red ...">...</tr>
6、多项选择器
多项选择器就是把多个选择器用,号组合起来一块选：
$(‘p,div‘); // 把<p>和<div>都选出来
$(‘p.red,p.green‘); // 把<p class="red">和<p class="green">都选出来
要注意的是，选出来的元素是按照它们在HTML中出现的顺序排列的，而且不会有重复元素。
////////////////////////////////////////////////////////////////////////////////////////////////////////////
层级选择器
如果两个DOM元素具有层级关系，就可以用$(‘ancestor descendant‘)来选择，层级之间用空格隔开。例如：
$(‘div.testing li.lang-javascript‘); // [<li class="lang-javascript">JavaScript</li>]
子选择器
子选择器$(‘parent>child‘)类似层级选择器，但是限定了层级关系必须是父子关系，
$(‘ul.lang>li.lang-javascript‘); // 可以选出[<li class="lang-javascript">JavaScript</li>]
过滤器（Filter）
过滤器一般不单独使用，它通常附加在选择器上，帮助我们更精确地定位元素。观察过滤器的效果：
$(‘ul.lang li‘); // 选出JavaScript、Python和Lua 3个节点

$(‘ul.lang li:first-child‘); // 仅选出JavaScript
$(‘ul.lang li:last-child‘); // 仅选出Lua
$(‘ul.lang li:nth-child(2)‘); // 选出第N个元素，N从1开始
$(‘ul.lang li:nth-child(even)‘); // 选出序号为偶数的元素
$(‘ul.lang li:nth-child(odd)‘); // 选出序号为奇数的元素
表单相关
针对表单元素，jQuery还有一组特殊的选择器：
:input： 可以选择<input>，<textarea>，<select>和<button>；
:file： 可以选择<input type="file">，和input[type=file]一样；
:checkbox： 可以选择复选框，和input[type=checkbox]一样；
:radio： 可以选择单选框，和input[type=radio]一样；
:focus： 可以选择当前输入焦点的元素，例如把光标放到一个<input>上，用$(‘input:focus‘)就可以选出；
:checked： 选择当前勾上的单选框和复选框，用这个选择器可以立刻获得用户选择的项目，
如$(‘input[type=radio]:checked‘)；
:enabled： 可以选择可以正常输入的<input>、<select>
等，也就是没有灰掉的输入；
:disabled： 和:enabled正好相反，选择那些不能输入的。
////////////////////////////////////////////////////////////////////////////////////////////////////////////
1.修改Text和HTML

jQuery对象的text()和html()方法分别获取节点的文本和原始HTML文本，例如，如下的HTML结构：

无参数调用text()是获取文本，传入参数就变成设置文本，HTML也是类似操作，自己动手试试：
j2.text(‘JavaScript & ECMAScript‘);
2.修改CSS
$(‘#test-css li.dy>span‘).css(‘background-color‘, ‘#ffd351‘).css(‘color‘, ‘red‘);
如果页面中已经有个一个class
$(‘#test-css li.dy>span‘).addClass(‘highlight‘);
3.显示和隐藏DOM
var a = $(‘a[target=_blank]‘);
a.hide(); // 隐藏
a.show(); // 显示
注意，隐藏DOM节点并未改变DOM树的结构，它只影响DOM节点的显示。这和删除DOM节点是不同的。
4.获取DOM信息
利用jQuery对象的若干方法，我们直接可以获取DOM的高宽等信息，而无需针对不同浏览器编写特定代码：
// 浏览器可视窗口大小:
$(window).width(); // 800
$(window).height(); // 600

// HTML文档大小:
$(document).width(); // 800
$(document).height(); // 3500

// 某个div的大小:
var div = $(‘#test-div‘);
div.width(); // 600
div.height(); // 300
div.width(400); // 设置CSS属性 width: 400px，是否生效要看CSS是否有效
div.height(‘200px‘); // 设置CSS属性 height: 200px，是否生效要看CSS是否有效
attr()和removeAttr()方法用于操作DOM节点的属性：
// <div id="test-div" name="Test" start="1">...</div>
var div = $(‘#test-div‘);
div.attr(‘data‘); // undefined, 属性不存在
div.attr(‘name‘); // ‘Test‘
div.attr(‘name‘, ‘Hello‘); // div的name属性变为‘Hello‘
div.removeAttr(‘name‘); // 删除name属性
div.attr(‘name‘); // undefined
6.操作表单
对于表单元素，jQuery对象统一提供val()方法获取和设置对应的value属性：
input.val(); // ‘test‘
input.val(‘[email protected]mple.com‘); // 文本框的内容已变为[email protected]
select.val(); // ‘BJ‘
select.val(‘SH‘); // 选择框已变为Shanghai
textarea.val(); // ‘Hello‘
textarea.val(‘Hi‘); // 文本区域已更新为‘Hi‘
7、修改DOM结构
要添加新的DOM节点，除了通过jQuery的html()这种暴力方法外，还可以用append()方法，例如：
首先要拿到ul节点：然后，调用append()传入HTML片段： ul.append(‘<li><span>Haskell</span></li>‘);
除了接受字符串，append()还可以传入原始的DOM对象，jQuery对象和函数对象：
// 创建DOM对象:
var ps = document.createElement(‘li‘);
ps.innerHTML = ‘<span>Pascal</span>‘;
// 添加DOM对象:
ul.append(ps);
// 添加jQuery对象:
ul.append($(‘#scheme‘));
// 添加函数对象:
ul.append(function (index, html) {
return ‘<li><span>Language - ‘ + index + ‘</span></li>‘;
});
传入函数时，要求返回一个字符串、DOM对象或者jQuery对象。因为jQuery的append()可能作用于一组DOM节点，
只有传入函数才能针对每个DOM生成不同的子节点。

append()把DOM添加到最后，prepend()则把DOM添加到最前。

要删除DOM节点，拿到jQuery对象后直接调用remove()方法就可以了。
如果jQuery对象包含若干DOM节点，实际上可以一次删除多个DOM节点：
var li = $(‘#test-div>ul>li‘);
li.remove(); // 所有<li>全被删除
jQuery能够绑定的事件主要包括：

鼠标事件

click: 鼠标单击时触发；

dblclick：鼠标双击时触发；

mouseenter：鼠标进入时触发；

mouseleave：鼠标移出时触发；

mousemove：鼠标在DOM内部移动时触发；

hover：鼠标进入和退出时触发两个函数，相当于mouseenter加上mouseleave。

键盘事件

键盘事件仅作用在当前焦点的DOM上，通常是<input>和<textarea>。

keydown：键盘按下时触发；

keyup：键盘松开时触发；

keypress：按一次键后触发。

其他事件

focus：当DOM获得焦点时触发；

blur：当DOM失去焦点时触发；

change：当、或的内容改变时触发；

submit：当``提交时触发；

ready：当页面被载入并且DOM树完成初始化后触发。

写法var a = $(‘#test-link‘);
a.on(‘click‘, function () {
alert(‘Hello!‘);
});
a.click(function () {
alert(‘Hello!‘);
});
取消绑定：通过off(‘click‘,function)实现。
function hello() {
alert(‘hello!‘);
}

a.click(hello); // 绑定事件

// 10秒钟后解除绑定:
setTimeout(function () {
a.off(‘click‘, hello);
}, 10000);
内置动画 show / hide/toggle
//隐藏
$(‘#test-form‘).hide(3000);

//显示
setTimeout(function(){
$(‘#test-form‘).show(2000);
},3000);

$(‘#test-form‘).toggle(1000);
$(‘#test-form‘).toggle(1500);
slideUp / slideDown/slideToggle
$(‘#test-form‘).slideUp(‘quick‘);
$(‘#test-form‘).slideDown(‘quick‘);
$(‘#test-form‘).slideToggle(‘middle‘);
fadeIn / fadeOut
var div = $(‘#test-fade‘);
div.fadeOut(‘slow‘); // 在0.6秒内淡出
animate
var div = $(‘#test-animate‘);
div.animate({
opacity: 0.25,
width: ‘256px‘,
height: ‘256px‘
}, 3000, function () {
console.log(‘动画已结束‘);
// 恢复至初始状态:
$(this).css(‘opacity‘, ‘1.0‘).css(‘width‘, ‘128px‘).css(‘height‘, ‘128px‘);
});