第十六篇:jQuery基础

一、jQuery和Dom的关系

http://jquery.cuishifeng.cn/
模块,类库 DOM/BOM/JavaScript的类库;

二、jQuery选择器

1.查找元素
DOM:
10个左右
jQuery:
选择器,直接找到某个或某类某些标签
1.id
$('#id')
2.class
$('.c1')
3.标签
$('a')
4.组合选择器
$('a,.c2,#i10')

5.层级选择器
$('#i10 a')子子孙孙
$('#i10>a')只找儿子
$('#id>a:first') 第一个a标签;
$('#i10 a:eq(0)')索引查找
6.基本
:first
:last
:eq
7.属性查找
$('[name]') 具有属性的标签
$('[name="123"]') 属性等于值的标签;
8.选择反选框;
内置循环each
$(':checkbox').each(function(k){
//this,代指当前循环的每一个元素
console.log(k,this)
if(this.checked){
this.checked = false;
}else{
this.checked = ture;

}

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() 下一个
$(this).nextAll()
$(this).nextUntil()
$(this).prev() 上一个
$(this).prevAll()
$(this).prevUntil()
$(this).parent() 父
$(this).parents() 祖宗
$(this).parentsUntil() 到某个标签截止
$(this).children() 子
$(this).siblings() 兄弟
$(this).find()
$(this).eq()
$(this).first()
$(this).last()
$(this).hasClass()
$(this).index() 获取索引

转换:jquery对象[0] => DOM对象;
Dom对象 => $(Dom对象)

绑定事件:
$('.header').click(function(){
$(this).addClass('hide') 添加样式
$(this).removeClass('hide') 移除样式

})
链式编程;

 

四、jQuery内容操作

  

2.操作元素
内容操作:
$('#i1').text() 不加参数获取文本内容,加参数赋值;
$('#i1').html() 获取html内容;

$('#i1').val() 获取值和赋值;

样式操作:
$('.c1').toggleClass('hide') 有该样式就去掉,没有就加上;
$('').css("color",'值')
属性操作:
#专门用于做自定义属性;
$().attr('n','v') 传一个参数获取属性值,传两个参数设置值
$().removeAttr() 删除属性;
#专门用于checkbox,radio等选择标签;
$().prop('checked')
$().prop('checked',true)
文档处理:
$().append() 往后追加
$().prepend() 往前插入
$().after()
$().before()
$().remove() 删除内容和标签;
$().empty() 只清空内容
$().clone() 克隆内容


位置:
$(window).scrollTop() 无参数表示获取滚动条位置,有参数设置;
$(window).scrollLeft()

$().offset 指定标签在html中的坐标;
$().offset.left
$().offset.top
position() 指定标签相对父标签(relative)标签的坐标
$().height() #获取标签的高度
$().innerHeight() #获取标签的边框+高度
$().outerHeight() #
$().outerHeight(true)

五、jQuery事件绑定的方式

绑定事件:
$().click()
$().***
$().bind('click',function(){})
$().unbind('click',function(){})
$().delegate('a','click',function(){}) 委托绑定,新增标签绑定事件;
$().undelegate('a','click',function(){})
$().on('click',function(){})
$().off('click',function(){})
阻止事件执行;
onclick="return ClickOn();"
return false 后面不执行,true后面执行;

jquery扩展:
$.extend({
'text':functin(){
return 'ddd';
}
})
$.text();
$.fn.extend({
'text':functin(){
return 'ddd';
}
})
$().text();
整理:

#当页面框架加载完成以后自动执行
$(function(){

})

 

实战练习:

1.模态对话框
2.多选反选
3.表格操作
4.tab菜单
5.抽屉点赞效果
-$().append()
-setInterval
-透明度;
-position
-字体大小
-位置
6.form表单输入框验证

posted @ 2018-01-26 14:55  hanfuming  阅读(100)  评论(0编辑  收藏  举报