黑马程序员技术交流社区

标题: 【石家庄校区】就业班day_06_JQuery [打印本页]

作者: 时光。 时间: 2018-5-9 15:18
标题: 【石家庄校区】就业班day_06_JQuery

就业班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列。

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2