jQuery基础 学习笔记

目录

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个对象