JavaWeb总复习——jQuery基础

jquery和html的整合

• jquery是单独的js文件 ，通过script标签的src属性导入即可
• 注意：使用jquery的时候如果放到整个网页的前面，需要把jquery代码放到页面加载函数中。否则应该把jquery代码放到整个网页的后面。

获取一个jquery对象

• $(“选择器”) 或者 jQuery(“选择器”)

• dom对象和jquery对象之间的转换

  dom对象===>jquery对象
  $(dom对象)
  jquery对象===>dom对象
  方式1:
  jquery对象[index]
  方式2:
  jquery对象.get(index)

页面加载:

• js:

  window.onload=function(){}//在一个页面中只能使用一次

• jquery 在一个页面中可以使用多次

  方式1:
  $(function(){...})
  方式2:
  $(document).ready(function(){});

派发事件:

• $(“选择器”).click(function(){…});

  等价于 原生js中
  dom对象.onclick=function(){…}

• 掌握事件:

  focus
  blur
  submit
  change
  click

jquery中效果:

• 隐藏或展示

  show(毫秒数) hide(毫秒数)

• 滑入或滑出

  slideDown(毫秒数):向下滑入
  slideUp(毫秒数):向上滑出

• 淡入或淡出

  fadeIn(int):淡入
  fadeOut(int):淡出

选择器总结:

• 基本选择器★

  $("#id值")  $(".class值")  $("标签名")
  
  了解:$("*")
  理解:获取多个选择器 用逗号隔开
  $("#id值,.class值")

• 层次选择器 ★

  a b:a的所有b后代
  a>b:a的所有b孩子
  a+b:a的下一个兄弟(大弟弟)
  a~b:a的所有弟弟

• 基本过滤选择器:★

  :frist 第一个
  :last 最后一个
  :odd  索引奇数
  :even 索引偶数
  :eq(index) 指定索引
  :gt(index) >
  :lt(index) <

• 内容过滤:

  :has("选择器"):包含指定选择器的元素

• 可见过滤:

  :hidden   在页面不展示元素 一般指 input type="hidden" 和 样式中display:none
  :visible

• 属性过滤器:★

  [属性名]
  [属性名="值"]

• 表单过滤:

  :input  所有的表单子标签  input select textarea button

属性和css操作总结:

• 对属性的操作:

  attr():设置或者获取元素的属性
  方式1:获取
  attr("属性名称")
  方式2:设置一个属性
  attr("属性名称","值");
  方式3:设置多个属性  json
  attr({
  "属性1":"值1",
  "属性2":"值2"
  })
  removeAttr("属性名称"):移除指定属性
  添加class属性的时候
  attr("class","值");
  addClass("指定的样式值"); 相当于 attr("class","指定的样式值");
  removeClass("指定的样式值");

• 对css操作:操作元素的style属性

  css():获取或者设置css样式
  方式1:获取
  css("属性名")
  方式2:设置一个属性
  css("属性名","值")
  方式3:设置多个
  css({
  "属性1":"值1",
  "属性2":"值2"
  });

• 获取元素的尺寸:

  width()
  height()

遍历数组

数组.each(function(){});
$.each(遍历数组,function(){});

• 注意:

  each的function中可以加两个参数 index和dom
  index是当前遍历的索引值
  dom指代的是当前遍历的dom对象(开发中一般使用this即可)

• 设置或者获取value属性

  jquery对象.val():获取
  jquery对象.val("...."):设置

• 设置获取获取标签体的内容

  html()
  text()
  
  xxxxx():获取标签体的内容
  xxxxx("....."):设置标签体的内容
  
  设置的区别:
  html:会把字符串解析
  text:只做为普通的字符串
  获取的区别:
  html:获取的html源码
  text:获取只是页面展示的内容