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