python第九十天----jquery

jQuery
http://jquery.cuishifeng.cn/

　　相当于js的模块，类库
　　DOM/BOM/JavaScript的类库

一、查找元素

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

1.id 
                $('#id')
            2.class
                $('.p')
            3.标签
                $('a')
                $('div')
            4. 组合 
                $('a,.c1,#div1')
                
                
                <div id="i1">
                    ddddd
                </div>
                <div class="c1" id="div1">
                    <a href="">xxx</a>
                    <a href="">yyyyy</a>
                </div>
                
            5.层级选择器
                $('#div1 a')   //id div1 下的 所有 a 标签
                $('#div1>a')   //id div1 下的 子级 a 标签
                
            6.筛选 器
                $(#div>a:first)//id div1 下的 子级 a 标签 的第一个
                $(#div>a:last)//id div1 下的 子级 a 标签 的最后一个
                $(#div>a:eq(0))//id div1 下的 子级 a 标签 索引
                
                $(this).next()  //下一个
                $(this).nextAll()  //下面所有的  同级
                $(this).nextUntil('#id4')  //下面标签直至到 #id4
                
                $(this).prev()  //上一个
                $(this).prevAll()  //上面所有  
                
                $(this).parent()  //父级
                $(this).parents()  //父 父 级  所有
                $(this).parentsUntil('.p1')  //父 父 级  所有
                
                $(this).children()  //子级
                $('#id').sibilings()  //所有兄弟 同级
                $('#id').find('#id')  //所有子级
            7.属性
                $('[type]') //有 type 属性的标签
                $('[type=radio]')//有 type=radio 属性的标签
                
                $(':radio') //表单属性
                筛选

转换：
jquery对象[0] ＝〉〉 dom对象
dom对象 ＝〉〉 $(dom对象)// jquery对象

实例:
$(':checkbox').prop('checked'); 获取值
$(':checkbox').prop('checked',true); 设置值

jquery 方法 内置循环
$(':checkbox').xxxx

文本操作

$(..).text()  #获取文本内容
                $(..).text('<a> </a>') #设置文本内容
                
                $(..).html()  #获取网页内容
                $(..).html('<a> </a>') #设置网页内容
                
                $(..).val()  #获取值
                $(..).val('<a> </a>') #设置值

样式操作

.hasClass('')//判断  有无样式
               .removeClass('')//移除
               .addClass('')//添加
               
               .toggleClass('')//判断  有无样式  有就移除  无就添加

属性操作

$(..).attr('n','v') //自定义属性进行修改 一个形参,获取值  两个形参 设置值
                $(..).removeAttr('n')//移除属性
                
                $(..).prop('n',true)//用于chekbox,radio   一个形参,获取值  两个形参 设置值
                索引 
                    var v=$(this).index();

css操作
$(tag).css('color','green');//可以精确的设置
内容操作

.append(temp)//添加在子列表最下面
                .prepend(temp)//添加在子列表最上面
                .after(temp)//添加在兄弟位 下面
                .before(temp)//添加在兄弟位 上面
                .remove() //移除 
                .empty() // 清空内容
                
                .clone  // 克隆 复制
                clearInterval(obj);//清除定时器

位置
滚动条

$(window).scrollTop()//无参 获取
                $(window).scrollTop(100)//有参 设置
                
                文档标签的位置
                $('#id').offset()//获取到坐标
                offset().left //横坐标
                offset().top//纵坐标

事件
绑定方式

$('.c1').click()
                
                
                $('.c1').bind('click',function(){})//绑定事件
                $('.c1').unbind('click',function(){})//解除绑定
                
                $('.c1').on('click',function(){})
                $('.c1').off('click',function(){})
                
                $('.c1').delegate('li','click',function(){})
                $('.c1').undelegate('li','click',function(){})

阻止事件发生
return false

//加载页面框架完成就执行
$(function(){

})

扩展 

1、  //扩展
                    $.extend({
                        'name':function(){
                            return 's';
                        }
                    })
                    $.name();//调用
                2、
                    $.fn.extend({
                        'name':function(){
                            return 's';
                        }
                    })
                    $('id').name();//调用

自执行 封装 变量

(function(){

})(jquery)

二、操作元素

$('il').height([val|fn])# 获取纯高度
        $('il').width([val|fn])
        $('il').innerHeight()#获取边框+纯高度
        $('il').innerWidth()
        $('il').outerHeight([soptions])#获取边框+纯高度+
        $('il').outerHeight([soptions])#获取边框+纯高度+
        $('il').outerWidth([options])