2017年12月24日 JS跟Jquery基础

js基础

alert();
confirm();

基础语法：与C#一致
数据类型及类型转换
var (string,decimal)
parseInt()
parseFloat();
isNaN();

运算符：
数学运算符：+ - * /  ++ --   %
关系运算符：== != >= <= > <
逻辑运算符：&&   ||   !
其他运算符：+= -= *= /=  ?:

语句
分支语句，循环语句

数组：Array();
函数：function
funciton 函数名(a)
{
    return ??;
}

Dom操作
var a =document.getElementById();
var b =document.getElementsByClassName();
document.getElementsByName();
document.getElementsByTagName();

window.open('','_blank');
window.close();
window.opener  -  返回的是一个窗口对象
window.setInterval(function(){},2000);
window.setTimeout(funciton(){},2000);
window.clearInterval();
window.scrollTo(x,y);

window.history.go(-1);

window.location.href="url"; - 当前页面跳转
var a = window.location.href; - 获取当前页面地址

操作元素的样式
a.style.backgroundColor = "red";
a.style.width="10px";

a.offsetTop/Left/Width/Height - 实时数据

操作元素的内容
表单元素 - value
非表单元素 - innerHTML   innerText

操作元素的属性
setAttribute('','');
getAttribute('');
removeAttribute('');

创建及删除元素
对象.innerHTML= "标记拼好的字符串";
-----------------
var a = document.createElement('div');
a.setAttribute('class', 'div2');
document.getElementById('div1').appendChild(a);
-----------------
对象.parentNode.removeChild(对象);

获取相关元素
获取对象父级
对象.parentNode
获取对象子级
对象.childNodes
获取哥哥
对象.previousSibling - 注意！！！
或取弟弟
对象.nextsibling - ！！！

字符串操作  数学操作

时间日期

onclick
onmouseover/onmouseout
onfocus/onblur
onkeyup
ondblclick

jquery基础

什么是jquery?

基于js的框架.

ID选择器:#

class选择器:.

标签选择器:标签名

并列:用,隔开

后代:用空格隔开;

过滤

取首个 - :first

取末尾 - :last

等于

:eq(索引)

不等于

大于 - :gt(索引)

小于 - :lt(索引)

排除 - :not(选择器)

奇偶数

奇数 - :odd

偶数 - :even

属性过滤

属性名过滤 - 直接加[属性名]

内容过滤

文字 - :contains("字符串")

子元素 - :has("选择器")

事件

常规事件

未来元素写法 - $(document).on('事件名','元素名',function(){});

阻止事件冒泡 - return false

DOM操作

操作属性

获取属性 - var s = $("选择器").attr("属性名")

设置属性 - $("选择器").attr("属性名","属性值")

删除属性 - $("选择器").removeAttr("属性名")

操作样式

操作内联样式

获取样式 - var s = $("选择器").css("样式名")

设置样式 - $("选择器").css("样式名","值")

操作样式表的class

添加class - $("选择器").addClass("class名")

移出class - $("选择器").removeClass("class名")

添加交替class - $("选择器").toggleClass("class名")

操作内容

表单元素

取值- var s = $("选择器").val()

赋值 - $("选择器").val("值")

非表单元素

赋值 - $("选择器").html("内容"), $("选择器").text("内容")

取值 - var s = $("选择器").html(),  var s = $("选择器").text()

操作相关元素

查找

父.前辈

parent() - 父辈

parents(选择器) - 前辈

子.后代

children(选择器) - 子级

find(选择器) -后代

兄弟

哥

prev() - 前面的一个元素

prevAll(选择器) - 前面兄弟级的元素

弟

next() - 后面的一个元素

nextAll(选择器) - 后面兄弟级的元素

新建 - $("HTML字符串")

添加

appen(Jqurey对象) - 内部添加

after() - 下部平级添加

before - 上部平级添加

移除

empty() - 清空内部所有元素

remove() - 移除元素

复制 - clone()