黑马程序员技术交流社区

标题: 【石家庄校区】初识JQuery [打印本页]

---

作者: 巴拉巴拉x    时间: 2018-5-3 14:36
标题: 【石家庄校区】初识JQuery

初识JQuery

JQuery概述

• 什么是JQuery?
  
  
  
  • JQuery是一个JS框架(JS的类库),对传统的JS进行了封装
  • 现在在企业中开发旺旺不会使用传统的JS进行开发,通常都会使用JS框架进行开发
    
    
• JS的常用框架
  
  
  
  • JQuery:小巧(网页开发)
  • ExtJS:比较大(企业应用)
  • DWR
  • Prototype
  • angularJS(现在正火的)
    
    
• JQ的使用
  
  
  
  • JQ的基本语法
    
    
  
  

JQuery的入门

• 引入JQuery的文件,(直接复制粘贴)
• $相当于一个JQuery的对象
• 页面加载弹窗

  
  
  

  • (1)$(function(){
        alert("aaa")});
    
    

  (2)$(document).ready(function(){    });1和2是等同的,只是书写方式不一样
  在内存中的DOM树绘制完成后就会加载
  而​window.onload=function(){
  alert("bbb")}是在页面加载完成后才会执行
  (DOM树绘制完成,然后才会传输数据(图片,文档等))才会执行
  

  
  

• js对象和JQuery对象可以互换但不能通用,所以在调用方法或者属性的时候要明确这个对象是JS对象还是JQuery对象
• js文件有前缀min的是压缩后的js文件,
  
  
  

JQ显示和隐藏

• JQ的效果操作
  
  
  
  • show()
    
    
    
    • 使用一:JQ对象.show();
    • 使用二:JQ对象.show("slow")//slow,normal,fast;
    • 使用三:JQ对象.show(毫秒值);
    • 使用四:JQ对象.show(毫秒值,function(){});
      
      
  • hide()
  • slideDown()
  • slideUp()
  • fadeIn()
  • fadeOut()
  • animate():自定义动画效果
  • toggle():单击切换函数
    
    
    
    • JQ对象.toggle(fn1,fn2...):单击第一下执行fn1,单击第二下执行fn2.
      
      
    
    
  
  

JQuery选择器

• 选择器的作用就是获取元素,且是JQuery的对象
• 基本选择器
  
  
  
  • ID选择器
    
    
    
    • 用法:$("#ID");
      
      
  • 类选择器
    
    
    
    • $(".类名")
      
      
  • 元素选择器
    
    
    
    • $("标签名")
      
      
  • 通配符选择器
    
    
    
    • $("*")
      
      
  • 并列选择器
    
    
    
    • $("div,span,p.myClass")
    • 所有的选择器都在双引号里边,用","隔开
      
      
    
    
• 层级选择器
  
  
  
  • 后代选择器:用空格隔开
  • 子元素选择器:用冒号隔开
  • 兄弟选择器
    
    
    
    • 单个兄弟选择器(最近的那个):用加号隔开
    • 所有兄弟选择器:用波浪线隔开
      
      
    
    
• 基本过滤选择器
  
  
  
  • odd:索引为奇数的偶数行:odd的翻译为奇数
  • even:索引为偶数的奇数行:even的翻译为偶数,
  • odd和even代表的是索引
    
    
  
  

  奇数索引对应的是偶数行

  
  
  • 查看API
    
    
• 属性选择器
  
  
  
  • [attribute]
  • [attribute = value]
  • 根据需要自定义属性,并赋值.这个属性是原本这个元素没有的.
  • 注意格式
  • 查看API
    
    
  
  

表单选择器

• 查API
  
  

表单对象属性选择器

• checked
• selected
• 查API
  
  

JQuery中添加和移除样式

• 如果样式没有事先定义,可以使用css方法为奇数行或者偶数行设置背景
• 如果已经在css文件中定义了odd和even样式,就动态移除样式,然后重新定义.
  
  
  
  • addClass();
  • removeClass();
    
    
  
  

JQuery对属性的操作方法

• attr()
  
  
  
  • 使用方法一:$("").attr("src")
  • 使用方法二:$("").attr("src","路径")
  • 使用方法三:$("").attr("src",function(){index,attr});
    
    
• prop();新版本的方法,attr方法已经停止更新
  
  
  
  • 使用方法一:$("").prop("src"),获取原有路径
  • 使用方法二:$("").prop("src","新路径"),设置为新路径
  • 使用方法三:$("").prop("src",function(){index,prop});
    
    
• removeProp();
• addClass();
• removeClass();
• this代表的对象符合就近原则.是一个JS对象
  
  
  

JQuery的DOM操作

• append():在原标签的文本里边追加
• appendTo():把原标签添加到目标标签内
• html():注意他和append()的不同.
• empty():把选中标签内的所有元素删除
• remove():会把选中的标签也会删除
  
  

JQuery元素的遍历

遍历方式一:

  $.each(objects,function(i,n) {
    i是索引,n是值    i,n 可以省略,如果用的到就写,用不到就不写});

• 
  
  

遍历方式二:

$().each(function(i,n){
    i是索引,n是值    i,n 可以省略,如果用的到就写,用不到就不写});

页面加载顺序

• 按程序从上往下加载,元素触发事件,得要元素加载完成后才能在元素上触发事件,所以触发事件要写到后边,或者在head标签内添加一个入口函数
  
  

$(function(){
    在这里边写元素触发事件等等

});

---

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

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