第十六篇：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表单输入框验证