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

秒客网

python第九十天----jquery

相关文章