web前端学习day_04:jQuery框架

╰半橙微兮° 2023-02-17 02:19 20阅读 0赞

### jQuery框架 ###

*  作用:给页面添加动态效果(和js一样),目的是为了提高原生JavaScript代码的开发效率
 *  jQuery就是一个通过js语言所以写的框架
 *  由于jQuery框架就是js语言所写,引入框架和引入普通的js文件一样
 *  js对象的方法和jq对象的方法不能混着调用,各自调用各自独有的方法和属性

#### 1. js对象和jq对象互相转换 ####

*  js转jq: var jq = $(js);
 *  jq转js: var js = jq\[0\]; jq本质上就是一个数组里面装的是js对象

#### 2. jq中的选择器 ####

1.  基础选择器 写法和css一样

*  标签名选择器 $(“div”)
 *  id选择器 $("\#id")
 *  class选择器 $(".class")
 *  分组选择器 $(“div,\#id,.class”)
 *  任意元素选择器 $("\*")

1.  层级选择器

*  $(“div span”) 匹配div里面所有的span(子孙后代选择器)
 *  $(“div>span”) 匹配div里面的span子元素(子元素选择器)
 *  $(“div+span”) 匹配div的弟弟span
 *  $(“div~span”) 匹配div的弟弟们span
 *  层级相关的方法:
    
    1.  $("\#abc").prev(“span”) 匹配id为abc元素的哥哥元素
    2.  $("\#abc").prevAll(“div”) 匹配id为abc元素的哥哥们元素
    3.  $("\#abc").next(“div”) 匹配id为abc元素的弟弟元素
    4.  $("\#abc").nextAll(“div”) 匹配id为abc元素的弟弟们元素
    5.  $("\#abc").siblings(“div”) 匹配id为abc元素的兄弟元素
    6.  $("\#abc").parent() 匹配id为abc元素的父元素
    7.  $("\#abc").children(“div”) 匹配id为abc元素的子元素们

1.  过滤选择器

*  $(“div:first”) 匹配第一个div
 *  $(“div:last”) 匹配最后一个div
 *  $(“div:eq(n)”) 匹配下标为n的div n从0开始
 *  $(“div:lt(n)”) 匹配下标小于n的div
 *  $(“div:gt(n)”) 匹配下标大于n的div
 *  $(“div:even”) 匹配下标为偶数的div
 *  $(“div:odd”) 匹配下标为奇数的div
 *  $(“div:not(.abc)”) 匹配class值不等于abc的div

1.  内容选择器

*  div:has§
 *  div:empty
 *  div:parent
 *  div:contains(‘xxx’)

1.  可见选择器

*  div:visible
 *  div:hidden
 *  .show()
 *  .hide()
 *  .toggle()

1.  属性选择器

*  div\[id\]
 *  div\[xxx=‘xxx’\]
 *  div\[xxx!=‘xxx’\]

1.  子元素选择器

*  div:first-child
 *  div:last-child
 *  div:nth-child(n) n从1开始

1.  表单选择器

*  :input
 *  :password
 *  :radio
 *  :checkbox
 *  :checked
 *  :selected

#### 3. 修改页面元素相关 ####

1.  创建及添加元素

*  创建: var d = $(“
    
    abc
    
    ”);
 *  添加到某个元素里面的最后面: 元素对象.append(新元素);
 *  添加到某个元素里面的最前面: 元素对象.prepend(新元素);
 *  插入到某个元素的前面: 元素对象.before(新元素);
 *  插入到某个元素的后面: 元素对象.after(新元素);

1.  删除元素

*  元素对象.remove();

1.  获取和修改元素的文本内容

*  元素对象.text(“xxx”) 修改 等效 innerText=“xxx”;
 *  元素对象.text() 获取 等效 innerText

1.  获取和修改元素的html内容

*  元素对象.html(“
    
    # xxx #
    
    ”) 等效 innerHTML=“
    
    # xxx #
    
    ”;
 *  元素对象.html() 获取 等效 innerHTML

1.  获取或修改元素的css样式

*  元素对象.css(“样式名”,“值”) 修改
 *  元素对象.css(“样式名”) 获取
 *  样式批量赋值: 元素对象.css(\{“color”:“red”,“background-color”:“blue”\})

1.  获取或修改元素的属性 attribute属性

*  元素对象.attr(“class”,“xxx”); 修改
 *  元素对象.attr(“class”) 获取

#### 4. 页面失去焦点事件 ####

*  当页面从浏览状态进入到其它页面的时候属于失去焦点事件
 *  onblur = function()\{\}

#### 5. 页面获取焦点事件 ####

*  每次从浏览其它页面回到此页面的时候会触发获取焦点事件
 *  onfocus = function()\{\}

#### 6. hover事件 ####

*  是将鼠标移入和移出事件合并到了一起

#### 7. 事件模拟 ####

*  可以通过代码模拟事件触发
 *  元素对象.trigger(“事件名称”)

#### 8.动画相关 ####

*  元素对象.hide(时间,方法) 隐藏
 *  元素对象.show(时间,方法) 显示
 *  元素对象.fadeOut(时间,方法) 淡出
 *  元素对象.fadeIn(时间,方法) 淡入
 *  元素对象.slideUp(时间,方法) 上滑
 *  元素对象.slideDown(时间,方法) 下滑
 *  元素对象.animate(样式代码,时间) 自定义