什么是javaScript框架库
普通JavaScript的缺点：每种空间的操作方式不同意，不同浏览器下有区别封装库，要编写跨浏览器的程序非常麻烦。因此出现了很多对javaScript的
常见的Javascript框架库
Prototype、YUI(网络反响一般)、Dojo、ExtJs、jQuery （http://jquery.com）等，这些库对JavaScript进行了封装，简化了开发。这些库是对javaScript的封装，内部都是javaScript的实现。
为什么要学习Jquery
很好用
DOM对象转jQuery对象
var btn = document.getElementById('btn");
// $(btn) Dom对象直接转成jQuery对象
$(btn).click(function(){
$(this).css("backgroundColor",'red');
});
- 把jQuery 对象转Dom对象
$(btn).get(0);转成Dom对象
$(btn)[0];转成Dom对象
Dom复习
- document.getElementById('id值')；更加id获取元素，单个
- document.getelementByTagName(标签的名字)；根据标签的名字获取元素，有很多个
- document.getElementByName('name属性值')；多个
- document.getElementByClassName('类的名字')；多个
选择器
1.1 基本选择器
-
根据id 来获取 $("#id"); id 值
-
根据class来获取值 $(".className") 获取到是多个
-
更具标签的名字来获取 $("标签的名字如p")；获取到的也是多个。
-
标签空格子标签 eg $("div p ") div里面所有的p子标签
-
标签+ 类样式选择器 $("li.cls");
-
多条件并列选择器 $("li ,div,p");这里里面的标签是并列关系，这里是选中所有的标签
几个常用的方法
- html()
.html() 相当于css中的 innerHTMl - text（）
.text()方法，设置标签中间现实的的文字，类似innerText - val()
val（"括号中有值就是设置，没有值就是读值') - css()
.css(里面写属性，属性的值) 第一种表示方式
.css({属性：属性值})第二种方式
$("*") 所有的
1.2 层级选择器
$(".outer p") class 名字叫outer 的所有子孙p标签
$(".outer>div")class 名字叫outer 的儿子div
$(".outer+div") 毗邻 outer的div
$(".outer~div") outer 后面所有直接的兄弟标签
1.3 基本筛选器
$("li:first") 列表中的第一个
$("li:eq(2)") 列表中索引为2的
$("li:lt(2)") 列表中序号小于2的
$("li:gt(2)") 列表中序号大于2的
$("li:event") 列表中隔一个算一个。
$("#uu>li:even") uu中li 的偶数行
$("#uu>li:odd") uu 中li的偶数行
1.4 属性选择器 这个是重点
$("[id = "div1"]")
$("["属性名 = "一个取的名字""]")
eg : <input type="text" value="123">
<input type="button" value="321">
$("[type = 'button']").css("color","red");//
2.0 过滤选择器
$("li").eq(2)
$("li").first()
$("li").hasclass("test")//判断li中有没有class 等于test 的 返回bool值
$("li").toggleClass("test")//样式在test 添加和移除中切换
3.0
$(".class").children().css("color","red") //名字为clolor 的所有子控件。不包括自己
-
children 只找儿字辈
$(".class").children(".div1").css("color","red")// children 还可以限制 -
find 后代都找
$(".class").find(".div1").css("color","red")// find 还可以限制 -
next 下一个
$(".class").next().css("color","red") // 获取下一个元素 -
nextAll 后面同级的全部啊
$(".class").nextAll().css("color","red") -
nextUntil 向下到div6前
$(".class").nextUntil(".div6").css("color","red") -
prev() 获取的是当前元素的前一个兄弟元素
$(this).prev().css("backgroundColor":""); -
prevAll();获取的是当前元素前面的所有兄弟元素
-
siblings（）获取当前元素以外的所有兄弟元素元素。
-
parent 父控件
$(".class").parent().css("color","red") -
parent s一直想上找，找到头<body>控件
$(".class").parents().css("color","red") -
parent 一直想上找，找到div6 下面一层
$(".class").parentsUntil(".div6").css("color","red") -
siblings 兄弟者一层大的都变
$(".class").sibilings().css("color","red")
js属性操作
$(#ck).attr("id") 取属性
$(#ck),attr("id","eee")设置属性
$(#ck).attr("checked","true")//设置选中
$(#ck).removeAttr("checked","true")//删除属性
$(#ck).prop("checked","true")//设置全选属性
$(#ck).removeProp("checked","true")//删除属性
$(#ck).addClass("hidden") // 添加类样式
$("#ck").removeClass("hidden")//移除样式，不谢类名就是移除所有
遍历
li =[120,20,30]
$.eaceh(li, function(i,x)){
i索引
x 120
})
<ul id="uu">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<script src="js/jQuery.js"></script>
<script>
$(function () {
$("#uu>li").each(function (indx,element) {
//这里就是通过each 相当于是遍历 得到的是索引 和对应的对象
$(element).css("opacity",(indx+1)/10);
});
});
</script>
val
$(":text").val()//获取指
$(":text").val("456")//设定值
append 插入。appendTo拼接到
var ele = $(".p1")
$(".div1").append(ele) //插入到div1 中
$(".p1").appendTo($(".div1"))//拼接到div中
删除 empty remove
$("div").empty() 内部内容清空
$("div").remove() 删除整个标签都删除了
动画
- hide（） 隐藏
$("div").hide(1000); 参数是数字表示1000ms
$("div").hide('slow')//参数是字符串600ms
$("div").hide('normal');//参数是字符串400ms
$("div").hide('fast');参数是字符串200ms - show（）显示
$("div"). show(1000);//参数是数字表示1000ms
$("div"). show('slow')//参数是字符串600ms
$("div"). show('normal');//参数是字符串400ms
$("div"). show('fast');参数是字符串200ms - slideUp（）
$("div").slideUp(1000) ； 划入 - slideDown() 划出
$("div").slideDown(1000) - slideToggle() 切换划入划出
$("div").slideToggle(1000)
fade动画
- fadeIn（）
$("div").fadeIn(1000，0.5)//淡入 - fadeOut()
$("div").fadeOut(1000) 淡出 - fadeToggle()
$("div").fadeToggle(1000)淡入淡出 - fadeTo()
$("div")/ fadeTo(1000,0.5). fadeTo有两个参数，第一个参数是时间，第二个参数是透明度
animate 动画
-
animate({},1000,回调函数) 这个方法有3个参数 第一个参数是键值对，对象。第二个是时间，第三个是回调函数
$("div").animate({"width":"100","height":"1000","left":"100",function(){
可以在里面执行这个动画执行完成后的动作。
}}) -
stop() 停止当前动画
jQuery 创建元素
- $("标签代码")
eg var a = $("<a href = 'http:www.baidu.con'>百度</a>") 这样就创建了一个a 标签
$("div").append(a) 这样就给div 添加了一个子标签
jQuery中追加元素的方法
- prepend(aObj) 把元素插入到一个元素前
- after(aobj）添加兄弟元素
eg: $("div").after(obj) 给div 添加obj 兄弟元素后面 - before（obj）；
eg: $("div").before(obj) 给div 添加obj 兄弟元素前面 - appendTo()
eg: obj.appendTo($("div")) obj 主动添加到div上
对元素的操作
清空
- empty() 清空里面的内容
- html（） 清空里面的内容
- remove(). 删除自己
- clone（）克隆
设置和获取系统属性值或者自定义属性值
- attr() 方法：可以设置属性值，两个参数。参数1.属性名
eg $("a").attr("title","牛人"); 设置title
eg $("a").attr("href","http://www.baicu.com")
2.属性值 - attr()方法：可以获取属性值，一个参数。参数的名字
eg $("a").attr("href") 获取a的href - prop() 设置属性 prop('checked',true);
事件的绑定
- bind（） 下面是给btn 绑定click 方法
$(#btn).bind("click",function(){
})
-
delegate 给dv 中的p标签添加了点击事件
三个参数 1. 要绑定事件的元素 p
2. 绑定的事件 click
3. 事件触发的方法。function
eg ("#dv").delegate("p","click",function(){
}) -
on 方法来绑定方法
如下eg on() 这个方法中可以有两个或者三个参数。
on 这个方法是父元素条用的，为自己的子标签绑定事件$(function () { // 这里是两个参数，第一个参数是事件的名字，第二个参数是处理事件的函数。 $("#btn").on("click",function () { $("#dv").append($("<p>这是一个p标签</p>")); // on方法在这里是三个参数 第一个参数是 事件的名字，第二个参数是要绑定事件的元素p。 第三个是处理事件的函数。 $("#dv").on("click","p",function () { console.log("点击了里面的p标签"); }); });});
在这几个绑定事件的方法，使用on ，bind 和delegate 方法尽量不要用
事件的解绑
-
off
off 对应的是on// 绑定事件 三个参数的 \$("#dv").on("click",p,function(){ })； // 解除绑定事件 \ $("#div").off("click",p); 如果是连个参数的 \$("#div".off("click")); -
unbind() 解除bind（） 的绑定事件
$("#btn").bind("click",function () { alert("这是bind的方法绑定的") }); $("#btn").unbind("click"); 这是解除bind 方式的。 -
undelegate（） 解除绑定，对应的是delegate
$("#btn").delegate("p","click",function () { alert("给p标签添加事件") }); $("#btn").undelegate("p","click"); //给p 标签解除绑定事件 -
使用细节
1 .如果父级元素和子级元素都是通过正常的方式绑定事件，如果通过off 解绑父级元素，父级元素事件解绑，对子级元素没有影响。
- 如果子级元素是父级元素通过调用delegate 的方式绑定的事件，父级元素使用off 方式解除绑定事件，这个时候父级元素和子级元素的相同的事件都会被解绑。
- 特殊使用方法
$(#"dv").off("click","**") 解除子控件的绑定事件，父控件的绑定事件没有改变
$("#div").off() 移除父级元素和子级元素的绑定事件。
事件触发（ 条件 要先绑定了事件 才能触发事件）
-
触发事件： 触发一个事件的时候在该事件内部调用了其他元素的一个事件方法。他有下面几种方法
-
1直接调用元素的事件方法 click（）
\ $("div").click(); -
2 使用.trigger()方法
\ $("div").trigger("触发的事件的名字 如 click"); -
第三种方式： 使用.triggerHandle()方法
#("#div").triggerHandler("触发事件的名字 如 click"); -
触发事件 的区别
$("text").focus()
$("div").trigger("focus")
$("div").triggerHandler("focus");
前两中的触发方式是一样的， 最有一种触发方式虽然能触发但是看不到触发的效果。
事件对象
$("#dv").on("click",'input',function (event) {
//这里的event 就是事件
console.log(event);
// event 中有几个参数要学习下
// 1 delegateTarget：div#dv.dv 意思是同div 给inpt元素绑定的事件
// 2 currentTagret 当前的事件是给谁绑定的 input
// 3 target 谁触发的事件。
});
事件冒泡
概念： 元素中有元素，这些元素所有相同的事件，一旦最里面的元素的事件触发了，外面的所有的元素的相同的事件都会被触发。
// 元素A中有一个元素B，A和B都有点击事件，B点击事件触发，A点击事件自动触发.如下面的例子，点击了最小的div 两个大的div 的事件也被触发了
在每个Jquery 中添加return false;取消事件冒泡
<div id="dv1">
<div id="dv2">
<div id="dv3">
</div>
</div>
</div>
<script src="js/jQuery.js"></script>
<script>
$(function () {
$("#dv1").click(function () {
alert("div1被点击了"+ this.id);
});
$("#dv2").click(function () {
alert("div2被点击了"+ this.id);
});
$("#dv3").click(function () {
alert("div3被点击了"+ this.id);
// 取消事件冒泡
return false;
});
});
</script>
多库共存的问题
var xy = . 改成xy 。用途是一个文件中导入了多个库，关键名字一样的时候用到这样的方法。
网友评论