jquery基础

发布时间：2023-09-06 01:20责任编辑：胡小海关键词：暂无标签

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选择器
<div class=‘c1‘></div>
$(".c1")
3. 标签选择器
<div id=‘i10‘ class=‘c1‘>
<a>f</a>
<a>f</a>
</div>
<div class=‘c1‘>
<a>f</a>
</div>
<div class=‘c1‘>
<div class=‘c2‘> </div>
</div>

$(‘a‘)

4. 组合选择器
<div id=‘i10‘ class=‘c1‘>
<a>f</a>
<a>f</a>
</div>
<div class=‘c1‘>
<a>f</a>
</div>
<div class=‘c1‘>
<div class=‘c2‘> </div>
</div>

$(‘a‘)
$(‘.c2‘)

$(‘a,.c2,#i10‘)

5. 层级选择器
$(‘#i10 a‘) 子子孙孙
$(‘#i10>a‘) 儿子

6. 基本
:first
:last
:eq()
7. 属性选择器
$(‘[eric]‘) ??????具有eric属性的所有标签
$(‘[eric="123"]‘) eric属性等于123的标签

<input type=‘text‘/>
<input type=‘text‘/>
<input type=‘file‘/>
<input type=‘password‘/>

$("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(“<a>1</a>”) # 设置文本内容

$(..).html()
$(..).html("<a>1</a>")

$(..).val()
$(..).val(..)

5 样式操作
addClass
removeClass
toggleClass
<!DOCTYPE html>
<html lang="en">
<head>
???<meta charset="UTF-8">
???<title>Title</title>
???<style>
???????.c1{
???????????width:200px;
???????????height:200px;
???????????background-color: lightgreen;
???????}
???????.hide{
???????????display: none;
???????}
???</style>
</head>
<body>
???<input type="button" value="开关" />
???<div >显示内容</div>
???<script src="jquery.min.js"></script>
???<script>
???????$("#i1").click(function () {
// ???????????if($(".c1").hasClass("hide")){
// ???????????????$(".c1").removeClass("hide");
// ???????????}
// ???????????else {
// ???????????????$(".c1").addClass("hide");
// ???????????}
???????????$(".c1").toggleClass("hide");
???????});
???</script>
</body>
</html>

6 属性操作
# 专门用于做自定义属性
$(..).attr(‘n‘)
$(..).attr(‘n‘,‘v‘)
$(..).removeAttr(‘n‘)
<input type=‘checkbox‘ id=‘i1‘ ?/>

# 专门用于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(){

})

<!DOCTYPE html>
<html lang="en">
<head>
???<meta charset="UTF-8">
???<title>Title</title>
</head>
<body>
???<input type="text" />
???<input type="button" value="添加" />

???<ul >
???????<li>1</li>
???????<li>2</li>
???</ul>
<script src="jquery.min.js"></script>
???<script>
???????$(‘#a1‘).click(function () {
???????????var v = $(‘#t1‘).val();
???????????var temp = "<li>" + v + "</li>";
???????????$(‘#u1‘).append(temp);
???????});

// ???????$(‘ul li‘).click(function () {
// ???????????var v = $(this).text();
// ???????????alert(v);
// ???????})

// ???????$(‘ul li‘).bind(‘click‘,function () {
// ???????????var v = $(this).text();
// ???????????alert(v);
// ???????})

// ???????$(‘ul li‘).on(‘click‘, function () {
// ???????????var v = $(this).text();
// ???????????alert(v);
// ???????})

???????$(‘ul‘).delegate(‘li‘,‘click‘,function () {
???????????var v = $(this).text();
???????????alert(v);
???????})
???</script>
</body>
</html>

8 示例
8.1 全选、取消、反选
<!DOCTYPE html>
<html lang="en">
<head>
???<meta charset="UTF-8">
???<title>Title</title>
</head>
<body>
???<input type="button" value="全选" />
???<input type="button" value="反选" />
???<input type="button" value="取消" ?/>

???<table border="1">
???????<thead>
???????????<tr>
???????????????<th>选项</th>
???????????????<th>IP</th>
???????????????<th>PORT</th>
???????????</tr>
???????</thead>
???????<tbody >
???????????<tr>
???????????????<td><input type="checkbox" /></td>
???????????????<td>1.1.1.1</td>
???????????????<td>80</td>
???????????</tr>
???????????<tr>
???????????????<td><input type="checkbox" /></td>
???????????????<td>1.1.1.1</td>
???????????????<td>80</td>
???????????</tr>
???????????<tr>
???????????????<td><input type="checkbox" /></td>
???????????????<td>1.1.1.1</td>
???????????????<td>80</td>
???????????</tr>
???????</tbody>
???</table>
???<script src="jquery.min.js"></script>
???<script>
???????function checkAll() {
???????????$(‘#tb :checkbox‘).prop(‘checked‘,true);
???????}
???????function cancleAll() {
???????????$(‘#tb :checkbox‘).prop(‘checked‘,false);
???????}
???????function reverseAll() {
???????????$(‘:checkbox‘).each(function(k){
???????????????// this,代指当前循环的每一个元素
???????????????// Dom
???????????????/*
???????????????if(this.checked){
???????????????????this.checked = false;
???????????????}else{
???????????????????this.checked = true;
???????????????}
???????????????*/
???????????????/*
???????????????if($(this).prop(‘checked‘)){
???????????????????$(this).prop(‘checked‘, false);
???????????????}else{
???????????????????$(this).prop(‘checked‘, true);
???????????????}
???????????????*/
?????????????// 三元运算var v = 条件? 真值：假值
???????????????var v = $(this).prop(‘checked‘)?false:true;
???????????????$(this).prop(‘checked‘,v);
???????????})
???????}
???</script>
</body>
</html>

8.2 Tab切换菜单
<!DOCTYPE html>
<html lang="en">
<head>
???<meta charset="UTF-8">
???<title>Title</title>
???<style>
???????.hide{
???????????display: none;
???????}
???????.menu{
???????????height: 38px;
???????????background-color: #eeeeee;
???????????line-height: 38px;
???????}
???????.active{
???????????background-color: brown;
???????}
???????.menu .menu-item{
???????????float: left;
???????????border-right: 1px solid red;
???????????padding: 0 5px;
???????????cursor: pointer;
???????}
???????.content{
???????????min-height: 100px;
???????????border: 1px solid #eeeeee;
???????}
???</style>
</head>
<body>
???<div style="width: 700px;margin:0 auto">
???????<div >
???????????<div ? a="1">菜单一</div>
???????????<div ? a="2">菜单二</div>
???????????<div ? a="3">菜单三</div>
???????</div>
???????<div >
???????????<div b="1">内容一</div>
???????????<div ?b="2">内容二</div>
???????????<div b="3">内容三</div>
???????</div>
???</div>
???<script src="jquery.min.js"></script>
???<script>
???????$(‘.menu-item‘).click(function(){
???????????$(this).addClass(‘active‘).siblings().removeClass(‘active‘);
???????????var target = $(this).attr(‘a‘);
???????????$(‘.content‘).children("[b=‘"+ target+"‘]").removeClass(‘hide‘).siblings().addClass(‘hide‘);
???????});
???</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
???<meta charset="UTF-8">
???<title>Title</title>
???<style>
???????.hide{
???????????display: none;
???????}
???????.menu{
???????????height: 38px;
???????????background-color: #eeeeee;
???????????line-height: 38px;
???????}
???????.active{
???????????background-color: brown;
???????}
???????.menu .menu-item{
???????????float: left;
???????????border-right: 1px solid red;
???????????padding: 0 5px;
???????????cursor: pointer;
???????}
???????.content{
???????????min-height: 100px;
???????????border: 1px solid #eeeeee;
???????}
???</style>
</head>
<body>
???<div style="width: 700px;margin:0 auto">
???????<div >
???????????<div ? >菜单一</div>
???????????<div ? >菜单二</div>
???????????<div ? >菜单三</div>
???????</div>
???????<div >
???????????<div >内容一</div>
???????????<div >内容二</div>
???????????<div >内容三</div>
???????</div>
???</div>
???<script src="jquery.min.js"></script>
???<script>
???????$(‘.menu-item‘).click(function(){
???????????$(this).addClass(‘active‘).siblings().removeClass(‘active‘);
???????????$(‘.content‘).children().eq($(this).index()).removeClass(‘hide‘).siblings().addClass(‘hide‘);
???????});
???</script>
</body>
</html>

8.3 菜单筛选器
<!DOCTYPE html>
<html lang="en">
<head>
???<meta charset="UTF-8">
???<title>Title</title>
???<style>
???????.header{
???????????background-color: black;
???????????color: wheat;
???????}
???????.content{
???????????min-height: 50px;
???????}
???????.hide{
???????????display: none;
???????}
???</style>
</head>
<body>
???<div style="height:400px;width: 200px;border: 1px solid #dddddd">
???????<div >
???????????<div >标题一</div>
???????????<div >内容</div>
???????</div>
???????<div >
???????????<div >标题二</div>
???????????<div >内容</div>
???????</div>

???????<div >
???????????<div >标题三</div>
???????????<div >内容</div>
???????</div>
???</div>
???<script src="jquery.min.js"></script>
???<script>
???????$(‘.header‘).click(function(){
???????????// 当前点击的标签 $(this)
???????????// 获取某个标签的下一个标签
???????????// 获取某个标签的父标签
???????????// 获取所有的兄弟标签
???????????// 添加样式和移除样式
???????????// $(‘.i1‘).addClass(‘hide‘)
???????????// $(‘#i1‘).removeClass(‘hide‘)
???????????// var v = $("this + div");
???????????// $("label + input")
???????????// console.log(v);
???????????//
???????????// $("afsldkfja;skjdf;aksdjf")

???????????// 筛选器
???????????/*
???????????$(this).next() ?????下一个
???????????$(this).prev() ?????上一个
???????????$(this).parent() ???父
???????????$(this).children() ?孩子
???????????$(‘#i1‘).siblings() 兄弟
???????????$(‘#i1‘).find(‘#i1‘) 子子孙孙中查找
???????????// . . .
???????????//
???????????$(‘#i1‘).addClass(..)
???????????$(‘#i1‘).removeClass(..)
???????????*/

???????????// 链式编程
???????????// $(...).click(function(){
???????????// ????this..
???????????// })
// ???????????$(this).next().removeClass(‘hide‘);
// ???????????$(this).parent().siblings().find(‘.content‘).addClass(‘hide‘)

???????????$(this).next().removeClass(‘hide‘).parent().siblings().find(‘.content‘).addClass(‘hide‘)

???????})
???</script>
</body>
</html>

8.4 css处理

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

<!DOCTYPE html>
<html lang="en">
<head>
???<meta charset="UTF-8">
???<title>Title</title>
???<style>
???????.container{
???????????padding: 50px;
???????????border: 1px solid #dddddd;
???????}
???????.item{
???????????position: relative;
???????????width: 30px;
???????}
???</style>
</head>
<body>
???<div >
???????<div >
???????????<span>赞</span>
???????</div>
???</div>
???<div >
???????<div >
???????????<span>赞</span>
???????</div>
???</div>
???<div >
???????<div >
???????????<span>赞</span>
???????</div>
???</div>
???<div >
???????<div >
???????????<span>赞</span>
???????</div>
???</div>

???<script src="jquery.min.js"></script>
???<script>
???????$(‘.item‘).click(function () {
???????????AddFavor(this);
???????});

???????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 < 0){
???????????????????clearInterval(obj);
???????????????????$(tag).remove();
???????????????}
???????????}, 40);

???????}
???</script>

</body>
</html>

8.5 表单认证
<!DOCTYPE html>
<html lang="en">
<head>
???<meta charset="UTF-8">
???<title>Title</title>
???<style>
???????.error{
???????????color: red;
???????}
???</style>
</head>
<body>
???<form action="s5.html" method="POST">
???????<div><input name="n1" tex = "用户名" type="text" /></div>
???????<div><input name="n2" tex = "密码" type="password" /></div>
???????<div><input name="n3" tex = "邮箱" type="text" /></div>
???????<div><input name="n4" tex = "端口" type="text" /></div>
???????<div><input name="n5" tex = "IP" type="text" /></div>
???????<input type="submit" value="提交" />
???</form>
???<script src="jquery.min.js"></script>
???<script>
???????$(function(){
???????????// 当页面所有元素完全加载完毕后，执行
???????????$(‘:submit‘).click(function () {
???????????????$(‘.error‘).remove();
???????????????var flag = true;
???????????????$(‘#f1‘).find(‘input[type="text"],input[type="password"]‘).each(function () {
???????????????????var v = $(this).val();
???????????????????var n = $(this).attr(‘tex‘);
???????????????????if(v.length <= 0){
???????????????????????flag = false;
???????????????????????var tag = document.createElement(‘span‘);
???????????????????????tag.className = "error";
???????????????????????tag.innerHTML = n + "必填";
???????????????????????$(this).after(tag);
???????????????????}
???????????????});
???????????????return flag;
???????????});
???????});
???</script>
</body>
</html>

8.6 位置
$(window).scrollTop() ?获取
$(window).scrollTop(0) 设置
scrollLeft([val])

offset().left ????????????????指定标签在html中的坐标
offset().top ?????????????????指定标签在html中的坐标

position() ??????????????????指定标签相对父标签(relative)标签的坐标
<div style=‘relative‘>
<div>
<div id=‘i1‘ style=‘position:absolute;height:80px;border:1px‘></div>
</div>
</div>

$(‘i1‘).height() ??????????# 获取标签的高度纯高度
$(‘i1‘).innerHeight() ?????# 获取边框 + 纯高度 + ？
$(‘i1‘).outerHeight() ?????# 获取边框 + 纯高度 + ？
$(‘i1‘).outerHeight(true) ?# 获取边框 + 纯高度 + ？

# 纯高度，边框，外边距，内边距

<!DOCTYPE html>
<html>
<head lang="en">
???<meta charset="UTF-8">
???<title></title>
</head>
<body>
???<div style="border: 1px solid #ddd;width: 600px;position: absolute;">
???????<div style="background-color: black;height: 40px;"></div>
???????<div style="height: 300px;"></div>
???</div>
<script type="text/javascript" src="jquery.min.js"></script>
<script>
???$(function(){
???????$(‘#title‘).mouseover(function(){
???????????$(this).css(‘cursor‘,‘move‘);
???????});
???????$("#title").mousedown(function(e){
???????????//console.log($(this).offset());
???????????var _event = e || window.event;
???????????var ord_x = _event.clientX;
???????????var ord_y = _event.clientY;

???????????var parent_left = $(this).parent().offset().left;
???????????var parent_top = $(this).parent().offset().top;

???????????$(‘#title‘).on(‘mousemove‘, function(e){
???????????????var _new_event = e || window.event;
???????????????var new_x = _new_event.clientX;
???????????????var new_y = _new_event.clientY;

???????????????var x = parent_left + (new_x - ord_x);
???????????????var y = parent_top + (new_y - ord_y);

???????????????$(this).parent().css(‘left‘,x+‘px‘);
???????????????$(this).parent().css(‘top‘,y+‘px‘);

???????????})
???????});
???????$("#title").mouseup(function(){
???????????$("#title").off(‘mousemove‘);
???????});
???})
</script>
</body>
</html>

jquery基础

原文地址：http://www.cnblogs.com/goodshipeng/p/7735639.html

jquery基础

知识推荐