jquery基础

2021-05-18 19:28

阅读:284

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




Title




显示内容




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(){

})





Title




  • 1

  • 2






8 示例
8.1 全选、取消、反选




Title





























选项 IP PORT
1.1.1.1 80
1.1.1.1 80
1.1.1.1 80




8.2 Tab切换菜单




Title






内容一

内容二

内容三











Title






内容一

内容二

内容三






8.3 菜单筛选器




Title





标题一

内容



标题二

内容


标题三

内容







8.4 css处理

$(‘t1‘).css(‘样式名称‘, ‘样式值‘)
点赞:
- $(‘t1‘).append()
- $(‘t1‘).remove()
- setInterval
- 透明度 1 》 0
- position
- 字体大小,位置





Title























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 表单认证




Title














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


评论


亲,登录后才可以留言!