就业班_JavaEE_day05_jquery
一 引入
<script src = " jquery.1.11.min.js"></script> // min表示js是压缩过的,不带空格。
二 jquery和原生js的onload事件对比
注册页面加载事件并添加函数
原生js的写法：window.onload = function() {} 或者在body标签上<body>
jquery的二种写法
a $( function() { }); b $(document).ready( function() { }); 二种写法意思一样
jquery的写法和原生js写法的区别
a jquery可以写多个， 原生只能是一个，后续写的会将前面写的替换 ；jquery写的多个按顺序执行。
b 执行时机不同，query比原生的效率高。 jquery写法的是在dom树在内存中形成后就执行， 原生js是在页面加载完成后才执行。
例如：<body><img src="address" /></body> 内存中dom树形成了之后jquery就开始执行，不需要等到去加载图片， 而原生js则需要等到加载图片后才开始执行。
三 jquery的动态事件注册都放在onload中写 或者 放在</body>后 编写。
四 jquery对象和原生对象的转换
原生--》jquery $(原生对象)
jquery --》原生 $("#id").get(0) 或者 $("#id")[0]
五 jquery选择器
id #
class .
元素
后代 空格
子代 >
相邻兄弟 +
后面兄弟 ~
分组 逗号 ,
属性$("input[type='text']")
过滤选择器 :first :last :even 偶数 :odd 奇数 :eq(index) 等于 :lt(index) 小于 :gt(index) 大于
表单选择器 :text :password : $("select option:selected") $("input:checked")
六 隐藏和显示函数
show("slow | normal | fast") 表示显示速度
show(2000) 表示速度 2秒内完成显示
show(2000, function() {xxxx}) 表示2秒内完成显示，并调用funciton中定义的方法。
hide
slideUp slideDown 滑动
fadeIn fadeOut 淡入淡出
七 改变样式
1 css() $("#id").css("样式名","样式值") $("#id").css({ "样式名1" : "样式值1" , "样式名2" : "样式值2" })
2 事先定义好 .类名{} 这样使用的多， 将css与js分离
通过添加或者删除元素的class属性来实现。
八 属性
prop()
$("#id").prop("属性名") 表示根据属性名获取属性值
$("#id").prop("属性名","属性值") 表示设置属性值
$("#id").removeProp("属性名") 表示删除该属性。
addClass(); $("#id").addClass("类名");
removeClass() $("#id").removeClass("类名");
toggleClass(); $("#id").toggleClass("类名"); 表示取反 有则取消样式 ，无则添加样式。
$("#id").html() 表示获取该标签的html
$("#id").html("<html>xxxx</html>") 表示设置该标签的html
$("#id").val( ) 表示获取该标签的value值
$("#id").val("xxx") 表示设置该标签的value值
$("#id").text() 表示获取该标签的text值
$("#id").text("xxxxx") 表示设置该标签的text值，标签原样输出。
九 dom操作
append $("p").append("<b>Hello</b>");
appendTo $("p").appendTo("div"); 将p中的内容剪切到div中
insertBefore $("p").insertBefore("#foo");将p中的内容剪切到foo的前面
insertAfter $("p").insertAfter("#foo"); 将p中的内容剪切到foo的后面
empty $("p").empty(); 保留p标签，p之间的所有内容都清除
remove $("p").remove(); 不保留p标签，p之间的所有内容都清除
十 事件(与原生js的事件类似，只是去掉了on)
事件切换 鼠标悬停
$("#id").hover(
function(){
//鼠标悬停在元素上做什么操作
}
function(){
//鼠标离开元素 做什么操作
}
);
如果只是做悬停的样式变化，可以使用css 的伪类 :hover 来实现。 如果除了样式改变还有其它操作则需要通过hover事件来实现。
trigger 先只执行我们定义的focus函数，再执行浏览器的默认操作
triggerHandler 只执行我们定义的focus函数，不执行浏览器的默认操作
$("#id").trigger("focus");
on bind 可以用来处理多个不同事件的处理逻辑相同情况下。
$("#id").on("click dblclick",function(){});
delegate 可以用来处理页面加载后新添加元素的事件注册。
$("#id").delegate("button","click", function(){}); 为什么元素添加什么事件，对应事件的处理函数是什么。
col-lg-n 表示大屏幕pc
每行有12列。