js+jquery
2.JQuery的语法: 引入js文件
传统的js方式加载只能一次, 等页面加载完才执行方法
$相当于JQuery;可以多次加载;$(function(){ }); 等页面的DOM树绘制完成后进行执行
3.js对象和JQuery对象:
js对象: document.getElementById().innerHTML="js";
JQuery对象: $(function(){ $("#id").html("JQ"); })
4.两者的相互转换:
JQ转JS的对象: 1. $("#id")[0].innerHTML="js";
2. $("#id").get(0).innerHTML="js";
Js转JQ的对象: $(document.getElementById()).html("JQ");
5.特效
JQ的显示和隐藏
1. show()和hide();
1.JQ对象.show() 2.JQ对象.show("slow,normal,fast");显示速度 3.JQ对象.show(毫秒值);
4.JQ对象.show(毫秒值,function(){});
2. slideDown() 下滑 使用方法:同上
slideUp(); 上滑
3. fadeIn(); 淡入
fadeout(): 淡出
4.animate(); 自定义动画
$("#block").animate({
width: "90%",
height: "100%",
fontSize: "10em",
borderWidth: 10
}, 1000 );
5.toggle() 单击多次来切换函数
JQ对象.toggle(fn1,fn2.....)
6.JQuery的选择器:
id选择器;
$("#id")
类选择器:
$(".class")
元素选择器
$("div")
通配符选择器
$("*")
并列选择器:
$("#id,.class")
7.JQ事件 单机 ---------------不用在标签中写了
$(function(){ ----------------在DOM加载完成加入单击事件
$("#id").click(function(){
$("#id").css("",""); ------.css样式
})
});
8.层级选择器:
后代选择器: 只要是属于后代都选择 包括孙子
空格
子元素选择器 只招第一层的元素 只要儿子
>
下一个元素选择器 同级别,靠着的div
+
兄弟元素 不一定靠着 $("form ~ input") ~ 会找元素后面所有同辈的元素
9.基本过滤选择器; 对选择器进行深层次的过滤
"#id div:first"
first last ....
eq(写下标);
10.内容选择器
contains("内容")
$("div:contains('1')")
11.属性选择器
div[属性="名字"]
$("div[title='aaa']")
12.表单选择器;
13 如果样式事先未定义,使用css方法,
反之,用JQuery中css类中的addclass(); removeclass();
例如: $("tbody tr:even").addClass("even"); 就是在添加样式在偶数行
13.表单属性选择器; $(":text") $(":input") :selected; $(":input") 所有的input的标签
14 JQ对属性的操作
$("").attr("src");
$("").attr("src","text.jpg");
$("").attr("src","text.jpg","width":"100px");添加属性
prop();新版本方法,第一个参数为属性,第二个为属性值
$(":checkbox[name='ids']").prop("checked",this.checked);
15.文档处理,操作节点的
append(); 添加一个元素
$("").appendTo(""); 把前面元素添加到哪里
.html()是覆盖
16 遍历数组
$.each (数组, function(i,n){ 遍历}) i是下标(从0开始) n是值
$(数组).each(function(i,n){ 遍历});
17.val值
jquery部分
1.jQuery(html,[ownerDocument]); html: 属性, [ownerDocument]属性默认值
$("option:selected",ture);
2.JQuery常用的事件和JS相同
事件的切换:
hover()鼠标悬停;
最新版本不支持 toggle(function(){},function(){}); 单机三次回到第一个
3.复杂的入口函数: $(document).ready(function({}));
4.JQ完成表单效验:
1 查找指定元素:
find();找出正在处理的元素的后代元素
parent()取得一个包含着所有匹配元素的唯一父元素的元素集合。
children();取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。
结果:<span>Hello Again</span>
2.事件处理:
trigger("操作的事件"); 执行他自己定义的操作事件
triggerHandler("操作的事件");执行别人事件
3.each:以每一个匹配的元素作为上下文来执行一个函数。
blur:当元素失去焦点时触发 blur 事件。
4.引入多个class用空格隔开,(外部引入样式时)
1. JQuery是 一个js的框架 (js的类库),对传统的js进行封装;
2.JQuery的语法: 引入js文件
传统的js方式加载只能一次, 等页面加载完才执行方法
$相当于JQuery;可以多次加载;$(function(){ }); 等页面的DOM树绘制完成后进行执行
3.js对象和JQuery对象:
js对象: document.getElementById().innerHTML="js";
JQuery对象: $(function(){ $("#id").html("JQ"); })
4.两者的相互转换:
JQ转JS的对象: 1. $("#id")[0].innerHTML="js";
2. $("#id").get(0).innerHTML="js";
Js转JQ的对象: $(document.getElementById()).html("JQ");
5.特效
JQ的显示和隐藏
1. show()和hide();
1.JQ对象.show() 2.JQ对象.show("slow,normal,fast");显示速度 3.JQ对象.show(毫秒值);
4.JQ对象.show(毫秒值,function(){});
2. slideDown() 下滑 使用方法:同上
slideUp(); 上滑
3. fadeIn(); 淡入
fadeout(): 淡出
4.animate(); 自定义动画
$("#block").animate({
width: "90%",
height: "100%",
fontSize: "10em",
borderWidth: 10
}, 1000 );
5.toggle() 单击多次来切换函数
JQ对象.toggle(fn1,fn2.....)
6.JQuery的选择器:
id选择器;
$("#id")
类选择器:
$(".class")
元素选择器
$("div")
通配符选择器
$("*")
并列选择器:
$("#id,.class")
7.JQ事件 单机 ---------------不用在标签中写了
$(function(){ ----------------在DOM加载完成加入单击事件
$("#id").click(function(){
$("#id").css("",""); ------.css样式
})
});
8.层级选择器:
后代选择器: 只要是属于后代都选择 包括孙子
空格
子元素选择器 只招第一层的元素 只要儿子
>
下一个元素选择器 同级别,靠着的div
+
兄弟元素 不一定靠着 $("form ~ input") ~ 会找元素后面所有同辈的元素
9.基本过滤选择器; 对选择器进行深层次的过滤
"#id div:first"
first last ....
eq(写下标);
10.内容选择器
contains("内容")
$("div:contains('1')")
11.属性选择器
div[属性="名字"]
$("div[title='aaa']")
12.表单选择器;
13 如果样式事先未定义,使用css方法,
反之,用JQuery中css类中的addclass(); removeclass();
例如: $("tbody tr:even").addClass("even"); 就是在添加样式在偶数行
13.表单属性选择器; $(":text") $(":input") :selected; $(":input") 所有的input的标签
14 JQ对属性的操作
$("").attr("src");
$("").attr("src","text.jpg");
$("").attr("src","text.jpg","width":"100px");添加属性
prop();新版本方法,第一个参数为属性,第二个为属性值
$(":checkbox[name='ids']").prop("checked",this.checked);
15.文档处理,操作节点的
append(); 添加一个元素
$("").appendTo(""); 把前面元素添加到哪里
.html()是覆盖
16 遍历数组
$.each (数组, function(i,n){ 遍历}) i是下标(从0开始) n是值
$(数组).each(function(i,n){ 遍历});
17.val值
1.jQuery(html,[ownerDocument]); html: 属性, [ownerDocument]属性默认值
$("option:selected",ture);
2.JQuery常用的事件和JS相同
事件的切换:
hover()鼠标悬停;
最新版本不支持 toggle(function(){},function(){}); 单机三次回到第一个
3.复杂的入口函数: $(document).ready(function({}));
4.JQ完成表单效验:
1 查找指定元素:
find();找出正在处理的元素的后代元素
parent()取得一个包含着所有匹配元素的唯一父元素的元素集合。
children();取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。
结果:<span>Hello Again</span>
2.事件处理:
trigger("操作的事件"); 执行他自己定义的操作事件
triggerHandler("操作的事件");执行别人事件
3.each:以每一个匹配的元素作为上下文来执行一个函数。
blur:当元素失去焦点时触发 blur 事件。
4.引入多个class用空格隔开,(外部引入样式时)