|
就业班day_06_JQuery 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 --》原生 You can't use 'macro parameter character #' in math mode("#id")[0] 五 jquery选择器 id # class . 元素 后代 空格 子代 > 相邻兄弟 + 后面兄弟 ~ 分组 逗号 , 属性$("input[type='text']") 过滤选择器 :first :last :even 偶数 :odd 奇数 :eq(index) 等于 :lt(index) 小于 :gt(index) 大于 表单选择器 :text :password : ("input:checked") 六 隐藏和显示函数 show("slow | normal | fast") 表示显示速度 show(2000) 表示速度 2秒内完成显示 show(2000, function() {xxxx}) 表示2秒内完成显示，并调用funciton中定义的方法。 hide slideUp slideDown 滑动 fadeIn fadeOut 淡入淡出 七 改变样式 1 css() You can't use 'macro parameter character #' in math mode("#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(){}); 为什么元素添加什么事件，对应事件的处理函数是什么。bootstrap 响应式页面开发 能针对不同的屏幕进行适配 ，依赖于jquery 一 环境准备 <link rel="stylesheet" href="css/bootstrap-theme.min.css" /> <link rel="stylesheet" href="css/bootstrap.min.css" /> <script type="text/javascript" src="js/jquery-1.11.0.js"></script> <script type="text/javascript" src="js/bootstrap.min.js"></script> 添加meta <meta name="viewport" content="width=device-width, initial-scale=1.0"> 二 栅格系统 col-xs-n 表示手机 col-sm-n 表示平板 col-md-n 表示中等屏幕pc col-lg-n 表示大屏幕pc 每行有12列。 | 
收藏
淘帖
踩
