jQuery基础 学习笔记

wuchangjian2021-10-30 19:02:37编程学习

目录

jQuery优点

jQuery下载

jQuery引入:(普通项目)

jQuery入口函数

jQuery对象和DOM对象转换

jQuery选择器

1.基础选择器

2.层级选择器

3.筛选选择器

jQuery操作样式

jQuery操作类名

jQuery效果

事件切换

jQuery属性操作

jQuery文本属性值

jQuery元素操作

元素的 创建、添加、删除  常用方法

jQuery事件注册

事件处理

事件对象

拷贝对象:深拷贝浅拷贝deep


jQuery优点

  1. 轻量级。核心文件仅几十kb,不会影响页面加载速度
  2. 跨浏览器兼容。基本兼容了现在主流的浏览器
  3. 链式编程,隐式迭代。
  4. 支持对事件,样式,动画的操作。简化了DOM操作
  5. 支持插件扩展开发。可安装第三方插件
  6. 免费开源

jQuery下载

  1. 官网,可下载最新版: jQuery
  2. 其它各版本下载:jQuery CDN

jQuery引入:(普通项目)

引入jQuery文件,在文档最后插入script标签

jQuery入口函数

// 第一种: 简单易用。
$(function () {   
    ...  // 此处是页面 DOM 加载完成的入口
}) ; 

// 第二种: 繁琐,但是也可以实现
$(document).ready(function(){
   ...  //  此处是页面DOM加载完成的入口
});

jQuery对象和DOM对象转换

// 1.DOM对象转换成jQuery对象,方法只有一种
var box = document.getElementById('box');  // 获取DOM对象
var jQueryObject = $(box);  // 把DOM对象转换为 jQuery 对象

// 2.jQuery 对象转换为 DOM 对象有两种方法:
//   2.1 jQuery对象[索引值]
var domObject1 = $('div')[0]

//   2.2 jQuery对象.get(索引值)
var domObject2 = $('div').get(0)

jQuery选择器

1.基础选择器

  • id选择器:$('#id')
  • 全选选择器:$('*')
  • 类选择器:$('.class')
  • 标签选择器:$('div')
  • 并集选择器:$('div,p,span')
  • 交集选择器:$('li.current')

2.层级选择器

  • 子代选择器:$('ul>li')
  • 后代选择器:$('ul li')

3.筛选选择器

  • :first:$('li:first')——第一个li元素
  • :last:$('li:last')——最后一个li元素
  • :eq(index):$('li:eq(2)')——索引为2的li元素
  • :odd:$('li:odd')——索引为奇数的li元素
  • :even:$('li:even')索引为偶数的li元素

jQuery操作样式

// 1.参数只写属性名,则是返回属性值
var strColor = $(this).css('color');

// 2.  参数是属性名,属性值,逗号分隔,是设置一组样式,属性必须加引号,值如果是数字可以不用跟单位和引号
$(this).css(''color'', ''red'');

// 3.  参数可以是对象形式,方便设置多组样式。属性名和属性值用冒号隔开, 属性可以不用加引号
$(this).css({ "color":"white","font-size":"20px"});

jQuery操作类名

// 1.添加类
$("div").addClass("current");

// 2.删除类
$("div").removeClass("current");

// 3.切换类
$("div").toggleClass("current");

jQuery效果

  • 显示隐藏:show() / hide() / toggle() ;

  • 划入画出:slideDown() / slideUp() / slideToggle() ;

  • 淡入淡出:fadeIn() / fadeOut() / fadeToggle() / fadeTo() ;

  • 自定义动画:animate() ;

停止动画排队:stop()

事件切换

  • hover()
  • over()
  • out()

jQuery属性操作

1.元素固有属性:prop()——适用于普通属性和表单属性:disabled、checked、selected

  • 获取:prop('属性“)
  • 设置属性:prop('属性','属性值')

2.元素自定义属性:attr()

  • 获取:attr('属性“)
  • 设置属性:attr('属性','属性值')

3.数据缓存:data()——可以在指定元素上存取数据,并不会修改DOM元素的结构。一旦页面刷新,存放的数据都将被移除

  • 添加数据:data('name','value')
  • 获取数据:data('name')

jQuery文本属性值

1.普通元素内容 html() ——相当于原生 innerHTML

  • 获取:html()
  • 设置:html('内容')

2.普通元素文本内容 text() ——相当于原生 innerText

  • 获取:text()
  • 设置:text('内容')

3.表单的值 val() ——相当于原生 value

  • 获取:val()
  • 设置:val('内容')

jQuery元素操作

1.each()

  • 语法:$('div').each(function(index,ele){ 。。。})
  • 作用:遍历普配到的每一个元素,主要用于DOM处理
  • 注:此方法用于遍历jq对象中的每一项,回调函数中的元素为DOM对象,使用jq方法时需要讲DOM对象转为jq对象

2.$.each()

  • 语法:$.each(object,function(index,ele){ ... })
  • 作用:可遍历任何对象,如数组、对象,主要用于数据处理
  • 注:此方法用于遍历jq对象中的每一项,回调函数中的元素为DOM对象,使用jq方法时需要讲DOM对象转为jq对象

元素的 创建、添加、删除  常用方法

// 1.创建
$('元素')

// 2.内部添加
element.append('内容')  // 把 内容 放到匹配 元素内部 的 最后面
element.prepend('内容')  // 把 内容 放到匹配 元素内部 的 最前面

// 3.外部添加
element.after('内容')  // 把 内容 放到目标 元素 后面
element.before('内容')  // 把 内容 放到目标 元素 前面

// 4.删除元素
element.remove()  // 删除匹配的元素
element.empty() // 删除匹配 元素集合 中的 所有子节点
element.html('') // 清空匹配元素的内容

jQuery事件注册

  • element.事件(function(){ .. .})
  • $('div).click(function(){ ... })

事件处理

  • on():绑定事件
  • off():解绑事件
  • trigger() / triggerHandler():事件触发

事件对象

element.on(event,[selector],function(event){
    event.preventDefault() // 或者 renturn false  阻止默认行为
    event.stopPropagation() // 阻止冒泡
})

拷贝对象:深拷贝浅拷贝deep

$.extend([deep], target, obj1, [objN])
// 1.deep 为 true深拷贝,为false浅拷贝
// 2.target 要拷贝的对象
// 3.obj1 待拷贝的第一个对象
// 4.objN 待拷贝的第N个对象

相关文章

实验五: 函数的设计和使用

实验五: 函数的设计和使用

一、实验目的  熟练掌握函数的定义和调用。熟练掌握函数的参数和常用方式。熟练使用lam...

TS(类中的访问类型和构造器)

  构造器:    ...

简约美观登录界面

<%@ page contentType="text/ht...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。