Jquery-原创手记-慕课网

jQuery

http://jquery.cuishifeng.cn/

模块《=》类库

DOM/BOM/JavaScript的类库

版本：

1.x 1.12

2.x

3.x

转换：

jquery对象[0] => Dom对象

Dom对象 => $(Dom对象)

一、查找元素

DOM

10左右

jQuery：

选择器，直接找到某个或者某类标签

1. id

$('#id')

2. class

$(".c1")

3. 标签

</div>

</div>

</div>

$('a')

4. 组合a

</div>

</div>

</div>

$('a')

$('.c2')

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

5. 层级

$('#i10 a') 子子孙孙

$('#i10>a') 儿子

6. 基本

:first

:last

:eq()

7. 属性

$('[alex]') 具有alex属性的所有标签

$('[alex="123"]') alex属性等于123的标签

$("input[type='text']")

$(':text')

实例：

多选，反选，全选

- 选择权

$('#tb:checkbox').prop('checked'); 获取值

$('#tb:checkbox').prop('checked', true); 设置值

jQuery方法内置循环： $('#tb:checkbox').xxxx

- $('#tb:checkbox').each(function(k){

// k当前索引

// this，DOM，当前循环的元素 $(this)

})

- var v = 条件 ? 真值 : 假值

筛选

$('#i1').next() 下一个

$('#i1').nextAll() 下边所有的

$('#i1').nextUntil('#ii1') 直到找到ii1

<div>

</div>

$('#i1').prev() 上一个

$('#i1').prevAll() 上面所有

$('#i1').prevUntil('#ii1')

$('#i1').parent() 父标签

$('#i1').parents() 祖父的标签

$('#i1').parentsUntil() 找到哪里终止

$('#i1').children() 孩子

$('#i1').siblings() 兄弟

$('#i1').find() 子子孙孙中查找

$('li:eq(1)')

$('li').eq(1)

first()

last()

hasClass(class)

文本操作：

$(..).text() # 获取文本内容

$(..).text(“<a>1</a>”) # 设置文本内容

$(..).html()

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

$(..).val() ## input设置值

$(..).val(..)

样式操作：

addClass

removeClass

toggleClass 开关

$('#i1').click(function(){

$('.c1').toggleClass('hide');

})

属性操作：

# 专门用于做自定义属性

$(..).attr('n')

$(..).attr('n','v') 第一个是获取值，第二个是更新的值

$(..).removeAttr('n') 删除

# 专门用于chekbox,radio

$(..).prop('checked')

$(..).prop('checked', true)

PS:

index 获取索引位置

文档处理：

append 追加最下面 $('#u1').append(temp);

prepend 最上面

after

before

remove 删除

empty

clone 克隆

css处理

$('t1').css('样式名称', '样式值')

点赞：

- $('t1').append()

- $('t1').remove()

- setInterval

- 透明度 1 》 0

- position

- 字体大小，位置

位置：

$(window).scrollTop() 获取

$(window).scrollTop(0) 设置

scrollLeft([val])

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

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

position() 指定标签相对父标签(relative)标签的坐标

<div>

</div>

$('i1').height() # 获取标签的高度纯高度

$('i1').innerHeight() # 获取边框 + 纯高度 + ？

$('i1').outerHeight() # 获取边框 + 纯高度 + ？

$('i1').outerHeight(true) # 获取边框 + 纯高度 + ？

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

事件

DOM：三种绑定方式

jQuery：

$('.c1').click()

$('.c1').....

$('.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(){

})

阻止事件发生

return false

# 当页面框架加载完成之后，自动执行

$(function(){

$(...)

})

jQuery扩展：

- $.extend $.方法

- $.fn.extend $(..).方法

(function(){

var status = 1;

// 封装变量

})(jQuery)

二、操作元素

===》实例：

作业：

一：

$('i1').height() # 获取标签的高度纯高度

$('i1').innerHeight() # 获取边框 + 纯高度 + ？

$('i1').outerHeight() # 获取边框 + 纯高度 + ？

$('i1').outerHeight(true) # 获取边框 + 纯高度 + ？

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

二、所有实例敲一遍

三、编辑框

例子全选功能

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);

例子点击标题

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

获取当前标签的下一个，删除 hide样式查找兄弟中查找样式为 content的添加 hide

.hide{

display: none;

}

模态对话框

<style>

.hide{

display: none;

}

.modal{

position: fixed;

top: 50%;

left: 50%;

width: 500px;

height: 400px;

margin-left: -250px;

margin-top: -250px;

background-color: #eeeeee;

z-index: 10;

}

.shadow{

position: fixed;

top: 0;

left: 0;

right: 0;

bottom: 0;

opacity: 0.6;

background-color: black;

z-index: 9;

}

</style>

删除按钮

$('.del').click(function () {

$(this).parent().parent().remove();

});

添加按钮

function confirmModal() {

var tr = document.createElement('tr');

var td1 = document.createElement('td');

td1.innerHTML = "11.11.11.11";

var td2 = document.createElement('td');

td2.innerHTML = "8001";

$(tr).append(td1);

$(tr).append(td2);

$('#tb').append(tr);

$(".modal,.shadow").addClass('hide');

// $('.modal input[type="text"]').each(function () {

// // var temp = "<td>..."

// })

}

function addElement() {

$(".modal,.shadow").removeClass('hide');

}

function cancelModal() {

$(".modal,.shadow").addClass('hide');

$('.modal input[type="text"]').val("");

}

编辑按钮

$('.edit').click(function(){

$(".modal,.shadow").removeClass('hide');

// this

var tds = $(this).parent().prevAll(); 所有的

tds.each(function () {

// 获取td的target属性值

var n = $(this).attr('target'); ip

// 获取td中的内容

var text = $(this).text(); 80

var a1 = '.modal input[name="';

var a2 = '"]';

var temp = a1 + n + a2; 拼接 .modal input[name="ip"]

$(temp).val(text); $('.modal input[name="ip"]')(80) ##点开之后进行设置的

});

// var port = $(tds[0]).text();

// var host = $(tds[1]).text();

// $('.modal input[name="hostname"]').val(host);

// $('.modal input[name="port"]').val(port);

// 循环获取tds中内容

// 获取 <td>内容</td> 获取中间的内容

// 赋值给input标签中的value

});

</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>

$('.menu-item').click(function(){

$(this).addClass('active').siblings().removeClass('active');

$('.content').children().eq($(this).index()).removeClass('hide').siblings().addClass('hide');

});

</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 false;

}

});

return flag;

});

扩展

var v = $.wangsen();

alert(v);

$('#i1').css()

$.ajax()

jquery扩展

$.fn.extend({

"hanyang": function () {

return 'db';

}

});

var v = $('#i1').hanyang();

alert(v);

$.extend({

'wangsen': function () {

return 'sb';

}

});

var v = $.wangsen();

alert(v);

</script>