jquery基础
2021-05-18 19:28
YPE html>
标签:checked 开关 反选 elf 选择器 put asc dex 条件
1 概要
jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器,如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。
2 选择器
选择器,直接找到某个或者某类标签
1. id选择器
$(‘#id‘)
2. class选择器
$(".c1")
3. 标签选择器
f
f
f
$(‘a‘)
4. 组合选择器
f
f
f
$(‘a‘)
$(‘.c2‘)
$(‘a,.c2,#i10‘)
5. 层级选择器
$(‘#i10 a‘) 子子孙孙
$(‘#i10>a‘) 儿子
6. 基本
:first
:last
:eq()
7. 属性选择器
$(‘[eric]‘) 具有eric属性的所有标签
$(‘[eric="123"]‘) eric属性等于123的标签
$("input[type=‘text‘]")
$(‘:text‘)
3 筛选器
3.1 过滤筛选器
$("li").eq(2)
$("li").first()
$("ul li").hasclass("test")
$(‘li:eq(1)‘)
$(‘li‘).eq(1)
first()
last()
hasClass(class)
3.2 查找筛选器
查找子标签: $("div").children(".test") $("div").find(".test")
向下查找兄弟标签: $(".test").next() $(".test").nextAll()
$(".test").nextUntil()
向上查找兄弟标签: $("div").prev() $("div").prevAll()
$("div").prevUntil()
查找所有兄弟标签: $("div").siblings()
查找父标签: $(".test").parent() $(".test").parents()
$(".test").parentUntil()
$(‘#i1‘).next()
$(‘#i1‘).nextAll()
$(‘#i1‘).nextUntil(‘#ii1‘)
$(‘#i1‘).prev()
$(‘#i1‘).prevAll()
$(‘#i1‘).prevUntil(‘#ii1‘)
$(‘#i1‘).parent()
$(‘#i1‘).parents()
$(‘#i1‘).parentsUntil()
$(‘#i1‘).children()
$(‘#i1‘).siblings()
$(‘#i1‘).find()
4 文本操作
$(..).text() # 获取文本内容
$(..).text(“1”) # 设置文本内容
$(..).html()
$(..).html("1")
$(..).val()
$(..).val(..)
5 样式操作
addClass
removeClass
toggleClass
6 属性操作
# 专门用于做自定义属性
$(..).attr(‘n‘)
$(..).attr(‘n‘,‘v‘)
$(..).removeAttr(‘n‘)
# 专门用于chekbox,radio
$(..).prop(‘checked‘)
$(..).prop(‘checked‘, true)
7 三种绑定方式
第一种:
$(‘.c1‘).click()
$(‘.c1‘).bind(‘click‘,function(){
})
$(‘.c1‘).unbind(‘click‘,function(){
})
第二种:
$(‘.c‘).delegate(‘a‘, ‘click‘, function(){
})
$(‘.c‘).undelegate(‘a‘, ‘click‘, function(){
})
第三种:
$(‘.c1‘).on(‘click‘, function(){
})
$(‘.c1‘).off(‘click‘, function(){
})
- 1
- 2
8 示例
8.1 全选、取消、反选
选项 | IP | PORT |
---|---|---|
1.1.1.1 | 80 | |
1.1.1.1 | 80 | |
1.1.1.1 | 80 |
8.2 Tab切换菜单
8.3 菜单筛选器
8.4 css处理
$(‘t1‘).css(‘样式名称‘, ‘样式值‘)
点赞:
- $(‘t1‘).append()
- $(‘t1‘).remove()
- setInterval
- 透明度 1 》 0
- position
- 字体大小,位置
赞
赞
赞
赞
function AddFavor(self) {
// DOM对象
var fontSize = 15;
var top = 0;
var right = 0;
var opacity = 1;
var tag = document.createElement(‘span‘);
$(tag).text(‘+1‘);
$(tag).css(‘color‘,‘green‘);
$(tag).css(‘position‘,‘absolute‘);
$(tag).css(‘fontSize‘,fontSize + "px");
$(tag).css(‘right‘,right + "px");
$(tag).css(‘top‘,top + ‘px‘);
$(tag).css(‘opacity‘,opacity);
$(self).append(tag);
var obj = setInterval(function () {
fontSize = fontSize + 10;
top = top - 10;
right = right - 10;
opacity = opacity - 0.1;
$(tag).css(‘fontSize‘,fontSize + "px");
$(tag).css(‘right‘,right + "px");
$(tag).css(‘top‘,top + ‘px‘);
$(tag).css(‘opacity‘,opacity);
if(opacity clearInterval(obj);
$(tag).remove();
}
}, 40);
}
8.5 表单认证
8.6 位置
$(window).scrollTop() 获取
$(window).scrollTop(0) 设置
scrollLeft([val])
offset().left 指定标签在html中的坐标
offset().top 指定标签在html中的坐标
position() 指定标签相对父标签(relative)标签的坐标
$(‘i1‘).height() # 获取标签的高度 纯高度
$(‘i1‘).innerHeight() # 获取边框 + 纯高度 + ?
$(‘i1‘).outerHeight() # 获取边框 + 纯高度 + ?
$(‘i1‘).outerHeight(true) # 获取边框 + 纯高度 + ?
# 纯高度,边框,外边距,内边距
jquery基础
标签:checked 开关 反选 elf 选择器 put asc dex 条件
原文地址:http://www.cnblogs.com/goodshipeng/p/7735639.html