A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

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

   

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马