黑马程序员技术交流社区

标题: 【石家庄校区】就业班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