前端(十八)—— jQuery高级操作:选择器、文本属性与类、事件、文档操作、动画、结构关系
JQ选择器、文本属性与类、事件、文档操作、动画、结构关系
可参考jQuery的API文档
一、选择器
1、css语法匹配
标签 | 类 | id | 交集
群组 | 后代 | 兄弟
伪类 | 属性
$(':input') // : 在表单中找到所有的标签
$('.div')
$('div')
$('div:first-child')
$('div:not(:last-child)')
$('body .div')
var $lis = $('.ul>li');
2、索引匹配
:eq(index) // 从0开始,匹配一个给定索引值(index)的元素
:gt(index) // 从0开始,匹配所有大于给定索引值(>index)的元素
:lt(index) // 从0,匹配所有小于给定索引值(<index)的元素
:even // 匹配所有索引值为偶数的元素,如索引为0, 2, 4, 6
:odd // 匹配所有索引值为奇数的元素,如索引为1, 3, 5, 7
// 伪类获取最中间一列
$('li:nth-child(3n-1)').on('click', function () {
console.log("中间列");
})
// 找到索引大于5的li
$('li:gt(5)').on('click', function () {
console.log("最后一4排");
})
// 伪类取反
$('li:not(:nth-child(2n))').on('click', function () {
console.log("对角线");
})
二、文本、属性与类
1、文本
// 无参表示获取文本
$('div').text() // 获取div中的文本
// 有参表示对文本的修改
html([val|fn]) // html(function(index,old){return '新的值'})
text([val|fn])
val([val|fn|arr]) // 表单元素获取内容
var $div = $('div');
// 在原有内容后面追加新的内容
$div.text(function (index, old) {
var target = '上山打老虎';
return old + target;
})
// 所有input失去焦点时,打印他们的内容
// $(this) 在jQuery中表示this
$(':input').on('blur', function () {
console.log($(this).val());
})
2、属性
attr(name|pro|key,val|fn) // attr('href','www.baidu.com'),添加属性
removeAttr(name)
prop(n|p|k,v|f)
removeProp(name)
3、类
addClass(class|fn) // 追加新的类名,不用考虑字符串拼接
removeClass([class|fn]) // 删除指定类名
toggleClass(class|fn[,sw]) // 切换,有指定类名则删除,没有则添加
$('div').on("mouseover", function () {
console.log(123);
$(this).addClass("active"); // 追加一个新类名
})
$('div').on("mouseout", function () {
$(this).removeClass("active"); // 删除指定类名
})
$('div').on("click", function () {
$(this).toggleClass("active"); // 切换类名,鼠标点击后有指定类名则删除,没有则添加
})
4、样式
// 1. 链式对样式进行赋值
$('div').css("width", "200px").css("height", "200px");
// 2. 通过对象赋值,单位JQ会自动加
$('div').css({
width: 300, // 默认添加单位
height: "300px",
"background-color": "pink", // key为css连接语法,js不支持这样的标识符,用字符串形式表示
borderRadius: '50%' // 小驼峰命名
})
// 整体样式操作
var $lis = $('.ul>li');
$lis.css({
'background-color': 'cyan'
})
三、事件
1、on绑定
// on('事件名', 参数, 回调函数){}
$('.box').on('click', {num: 10}, function(ev) {
console.log(ev.data.num) // ev.data.num 访问参数
})
// 数据由ev.data存储
// 可以绑定多个事件
2、非on事件绑定
// 事件名(参数, 回调函数)
$('.box').click({num: 10}, function(ev) {
console.log(ev.data.num)
})
// 数据由ev.data存储
3、解绑
$('.box').off() // 解绑box的所有事件
4、冒泡和默认事件
阻止冒泡:ev.stopPropagation() // js和jq只兼容stopPropagation
阻止默认事件:ev.preventDefault() | return false // 两种方法js和jq都兼容
四、文档操作(不建议使用)
1、内部插入
append(content|fn) // $('body').append($('div'))
appendTo(content) // $('div').appendTo($('body'))
prepend(content|fn)
prependTo(content)
2、外部插入
after(content|fn)
before(content|fn)
insertAfter(content)
insertBefore(content)
3、包裹
wrap(html|ele|fn)
unwrap()
wrapAll(html|ele)
wrapInner(html|ele|fn)
4、替换
replaceWith(content|fn)
replaceAll(selector)
5、删除
empty()
remove([expr])
detach([expr])
6、复制
clone([Even[,deepEven]])
// 文档操作
$(function () {
// 1.创建
var $div = $("<div></div>");
// 2.设置
$div.addClass("div");
$div.on('click', function () {
console.log('div click');
})
// 3.添加
// $('body').append($div);
$div.appendTo($('body'));
})
五、动画
1、基本
show([s,[e],[fn]]) // 显示
hide([s,[e],[fn]]) // 隐藏
toggle([s],[e],[fn]) // 显隐切换
2、滑动
slideDown([s],[e],[fn])
slideUp([s,[e],[fn]])
slideToggle([s],[e],[fn]) // 上下滑动切换
3、淡入淡出
// 参数:时间、运动曲线、动画结束后的回调函数
fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]])
fadeToggle([s,[e],[fn]]) // 淡入淡出切换
// 隐藏
$('.b1').on('click', function () {
$('.box').hide()
})
// 显示
$('.b2').on('click', function () {
$('.box').show()
})
// 显隐切换
$('.b3').on('click', function () {
$('.box').toggle()
})
// 上下滑动切换
$('.b4').on('click', function () {
$('.box').slideToggle()
})
// 淡入淡出切换
$('.b5').on('click', function () {
$('.box').fadeToggle(1000, "linear", function () {
console.log("动画完成");
})
4、自定义
animate(p,[s],[e],[fn])
应用于轮播图
<div>
<input type="button" value="图1" />
<input type="button" value="图2" />
<input type="button" value="图3" />
<input type="button" value="图4" />
</div>
$('input').click(function () {
// ul做动画
$('ul').animate({
// 定位left状态改变
// 点击第几个 $(this).index() 按钮就往左移动几个宽度$('li').width()
left: -$(this).index() * $('li').width()
}, 300)
})
六、结构关系
children([expr]) // 所有子级
parent([expr]) // 父级
parents([expr]) // 所有父级
next([expr]) // 下一个兄弟
nextAll([expr]) // 后面的所有兄弟
prev([expr]) // 前面的兄弟
prevAll([expr]) // 前面的所有兄弟
siblings([expr]) // 所有的兄弟
前端(十八)—— jQuery高级操作:选择器、文本属性与类、事件、文档操作、动画、结构关系的更多相关文章
- 008-elasticsearch5.4.3【二】ES使用、ES客户端、索引操作【增加、删除】、文档操作【crud】
一.ES使用,以及客户端 1.pom引用 <dependency> <groupId>org.elasticsearch.client</groupId> < ...
- Jquery框架1.选择器|效果图|属性、文档操作
1.JavaScript和jquery的对比 书写繁琐,代码量大 代码复杂 动画效果,很难实现.使用定时器 各种操作和处理 <!DOCTYPE html> <html lang=&q ...
- 第十八个知识点:画一个描述ECB,CBC,CTR模式的操作
第十八个知识点:画一个描述ECB,CBC,CTR模式的操作 第8周是画三个图的任务,但是维基百科上已经有人画的很好了 https://en.wikipedia.org/wiki/File:ECB_en ...
- 前端jQuery之文档操作
1.文档操作内部插入 A.append(B) 吧B添加到A的后面 A.appendTo(B) 吧A添加到B的后面 A.prepend(B) 吧B添加到A的前面 A.prependTo(B) 吧A添加到 ...
- 前端之JQuery:JQuery文档操作
jquery之文档操作 一.相关知识点总结1.CSS .css() - .css("color") -> 获取color css值 - .css("color&qu ...
- python 全栈开发,Day54(jQuery的属性操作,使用jQuery操作input的value值,jQuery的文档操作)
昨日内容回顾 jQuery 宗旨:write less do more 就是js的库,它是javascript的基础上封装的一个框架 在前端中,一个js文件就是一个模块 一.用法: 1.引入包 2.入 ...
- jQuery二——属性操作、文档操作、位置属性
一.jquery的属性操作 jquery对象有它自己的属性和方法. 其中jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作. 1.html属性操作 是对htm ...
- jQuery中的文档操作处理(五):append()、prepend()、after()、before()、wrap()、wrapAll()、wrapInner()、clone()等
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...
- jQuery 核心 - noConflict() 方法,jQuery 文档操作 - detach() 方法
原文地址:http://www.w3school.com.cn/jquery/manipulation_detach.asp 实例 使用 noConflict() 方法为 jQuery 变量规定新 ...
随机推荐
- 重写__eq__函数——对象list中使用in index()——获得list中不同属性对象个数
https://blog.csdn.net/anlian523/article/details/80868961
- python3练习,做一个迷宫生成程序
直接上代码: #!/usr/bin/python3 #coding=utf-8 import random import tkinter as tk class Cell(): TOP = (0) R ...
- switch gnome-terminal tabs
Ctrl+Page Down (forward) and Ctrl+Page Up (backward). http://unix.stackexchange.com/a/67963
- C++异常处理try、catch 没有finally
程序的错误大致可以分为三种,分别是语法错误.逻辑错误和运行时错误: 1) 语法错误在编译和链接阶段就能发现,只有 100% 符合语法规则的代码才能生成可执行程序.语法错误是最容易发现.最容易定位.最容 ...
- haproxy附加
1.安装haproxy yum -y install haproxy 2.编写文件 vim /etc/haproxy/haproxy.cfg
- Java继承和构造函数
构造函数不是类的成员,它们不是由子类继承的.它们用于初始化实例变量. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 class CSuper { public ...
- 20140903 dynamic_cast和static的区别 链表的冒泡排序和插入排序
1.四个类型转换 http://www.cnblogs.com/chio/archive/2007/07/18/822389.html static_cast和dynamic_cast的区别 dyna ...
- 比较全面的CSS hack方式一览
转载请注明来自CSDN freshlover的博客专栏<史上最全CSS Hack方式一览> 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某 ...
- c# 关于DataTable
1.DataRow数组 转DataTable using (SqlConnection con = new SqlConnection("server=.;uid=sa;pwd=123;da ...
- Codesforces 485D Maximum Value
D. Maximum Value You are given a sequence a cons ...