【石家庄校区】JQuery笔记整理

JQuery
概述

JQuery是JS的一个框架(JS的类库),对传统的JS进行封装

JQuery   $(function()){  alert(""121313)  }

• window.onload 与 入口函数$(function(){})的区别
  
  
  
  • 都是在页面加载完成后触发,$(function(){})比window.onload效率高
  • windows.onload只能触发1次,$(function(){})可以触发多次window.onload是等页面加载完成后执行;$(function(){})是等页面的DOM树绘制完成后执行)
    
    
    
  
  

核心函数

• jQuery的方法只能由jQuery的对象调用
• 核心函数：$(),括号内可以写:
  
  
  
  • 选择器
  • 原生的js对象
  • 数组
    
    
    
• 入口函数:
• $(function(){
     
  });
  $(document).ready(function(){
     
  });
• ​
  
  
  

效果

• show():显示
• hide():隐藏
• slideDown():向下滑动
• slideUp():向上滑动
• fadeIn():淡入
• fadeOut():淡出
• animate():自定义动画
• toggle():单击切换函数
  
  
  

选择器基本选择器

• id选择器:$("#id")
• 类选择器:$(".类名")
• 元素选择器:$("元素名")
• 通配符选择器:$("*")
• 并列选择器:$("选择器1,选择器2,选择器3...")
  
  
  

层级选择器

• 后代选择器：使用空格所有后代包含孙子及以下的元素
  
  
  
  • $("form input")
    
    
    
• 子元素选择器：使用>第一层的元素（儿子）
• 下一个元素:使用+下一个同辈元素
• 兄弟元素:使用~后面所有的同辈元素
  
  
  

基本过滤选择器

• odd例如:$("tr:even")
• even
• eq
• first
• last
  
  
  

属性选择器

• div[id]:有id属性的div选择器
• div[title='aa']:title=aaa的属性的div元素
  
  
  

表单对象选择器

• :checked
• :selected
  
  
  

表单元素选择器

• :text
• :password
• :radio
• :checkbox
• :file
  
  
  

筛选

• parent()例如:$(this).parent()
• child()
• find()例如:$("form").find(":input")
• is()例如:$(this).is("#id")
  
  
  

Jq操作元素属性

• prop()
  
  
  
  • $("#id").prop("src"):获取属性的值
  • $("#id").prop("src","xxxx"):改变元素的属性
  • $("#id").prop("src":"xxxx","name":"xxxx"):改变元素的多个属性
    
    
    
• removeProp()
• attr():不再维护
• removeAttr():不再维护
  
  
  

文档处理

• append()
  
  
  
  • append()可以作用于数组,将会为数组内的所有元素追加相同的内容
  • 例如:$("p").append("<b>Hello</b>");,所有p标签后面都会追加helloworld
    
    
    
• appendTo()
• insetAfter()
• insertBefore()
• remove()
• empty()
  
  
  

html()/text()/val()

• html()
  
  
  
  • $("#id").html():获取元素里面的html代码
  • $("#id").html("<span>da</span>"):用括号内的内容覆盖原内容,标签可以正确识别
    
    
    
• text()
  
  
  
  • $("#id").text():获取元素里面的文本
  • $("#id").text("<span>da</span>"):用括号内的内容覆盖原内容,标签不能识别
    
    
    
• val()
  
  
  
  • $("#id").val():获取元素的value属性值
  • $("#id").val("xx"):设置元素的value属性值
    
    
    
  
  

CSS操作(改变页面元素样式)

• css():适用于样式代码比较少的情况
• addClass():适用于样式事先定义好的情况
• removeClass()
• toggleClass():样式存在的话就删掉,不存在的话就添加上
  
  
  

事件

跟JS的事件是一致的  ,只不过去掉ON

• hover():鼠标悬停
  
  
  
  • 注:如果是仅改变元素样式,则也可以使用CSS的伪类实现
    
    
    
  
  

• on():在选择元素上绑定一个或多个事件
• bind():为每个匹配元素的特定事件绑定事件处理函数。
• delegate():指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。
• trigger():在每一个匹配的元素上触发某类事件,同时执行浏览器的默认动作
• triggerHandler():这个特别的方法将会触发指定的事件类型上所有绑定的处理函数,但不会执行浏览器默认动作
  
  
  

【石家庄校区】JQuery笔记整理

JQuery
概述

JQuery是JS的一个框架(JS的类库),对传统的JS进行封装

JQuery   $(function()){  alert(""121313)  }

• window.onload 与 入口函数$(function(){})的区别
  
  
  
  • 都是在页面加载完成后触发,$(function(){})比window.onload效率高
  • windows.onload只能触发1次,$(function(){})可以触发多次window.onload是等页面加载完成后执行;$(function(){})是等页面的DOM树绘制完成后执行)
    
    
    
  
  

核心函数

• jQuery的方法只能由jQuery的对象调用
• 核心函数：$(),括号内可以写:
  
  
  
  • 选择器
  • 原生的js对象
  • 数组
    
    
    
• 入口函数:
• $(function(){
     
  });
  $(document).ready(function(){
     
  });
• ​
  
  
  

效果

• show():显示
• hide():隐藏
• slideDown():向下滑动
• slideUp():向上滑动
• fadeIn():淡入
• fadeOut():淡出
• animate():自定义动画
• toggle():单击切换函数
  
  
  

选择器基本选择器

• id选择器:$("#id")
• 类选择器:$(".类名")
• 元素选择器:$("元素名")
• 通配符选择器:$("*")
• 并列选择器:$("选择器1,选择器2,选择器3...")
  
  
  

层级选择器

• 后代选择器：使用空格所有后代包含孙子及以下的元素
  
  
  
  • $("form input")
    
    
    
• 子元素选择器：使用>第一层的元素（儿子）
• 下一个元素:使用+下一个同辈元素
• 兄弟元素:使用~后面所有的同辈元素
  
  
  

基本过滤选择器

• odd例如:$("tr:even")
• even
• eq
• first
• last
  
  
  

属性选择器

• div[id]:有id属性的div选择器
• div[title='aa']:title=aaa的属性的div元素
  
  
  

表单对象选择器

• :checked
• :selected
  
  
  

表单元素选择器

• :text
• :password
• :radio
• :checkbox
• :file
  
  
  

筛选

• parent()例如:$(this).parent()
• child()
• find()例如:$("form").find(":input")
• is()例如:$(this).is("#id")
  
  
  

Jq操作元素属性

• prop()
  
  
  
  • $("#id").prop("src"):获取属性的值
  • $("#id").prop("src","xxxx"):改变元素的属性
  • $("#id").prop("src":"xxxx","name":"xxxx"):改变元素的多个属性
    
    
    
• removeProp()
• attr():不再维护
• removeAttr():不再维护
  
  
  

文档处理

• append()
  
  
  
  • append()可以作用于数组,将会为数组内的所有元素追加相同的内容
  • 例如:$("p").append("<b>Hello</b>");,所有p标签后面都会追加helloworld
    
    
    
• appendTo()
• insetAfter()
• insertBefore()
• remove()
• empty()
  
  
  

html()/text()/val()

• html()
  
  
  
  • $("#id").html():获取元素里面的html代码
  • $("#id").html("<span>da</span>"):用括号内的内容覆盖原内容,标签可以正确识别
    
    
    
• text()
  
  
  
  • $("#id").text():获取元素里面的文本
  • $("#id").text("<span>da</span>"):用括号内的内容覆盖原内容,标签不能识别
    
    
    
• val()
  
  
  
  • $("#id").val():获取元素的value属性值
  • $("#id").val("xx"):设置元素的value属性值
    
    
    
  
  

CSS操作(改变页面元素样式)

• css():适用于样式代码比较少的情况
• addClass():适用于样式事先定义好的情况
• removeClass()
• toggleClass():样式存在的话就删掉,不存在的话就添加上
  
  
  

事件

跟JS的事件是一致的  ,只不过去掉ON

• hover():鼠标悬停
  
  
  
  • 注:如果是仅改变元素样式,则也可以使用CSS的伪类实现
    
    
    
  
  

• on():在选择元素上绑定一个或多个事件
• bind():为每个匹配元素的特定事件绑定事件处理函数。
• delegate():指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。
• trigger():在每一个匹配的元素上触发某类事件,同时执行浏览器的默认动作
• triggerHandler():这个特别的方法将会触发指定的事件类型上所有绑定的处理函数,但不会执行浏览器默认动作