python学习第三十一天（jquery）

一、jquery对象

jQuery 对象就是通过jQuery包装DOM对象后产生的对象。jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $(“#test”).html();

$("#test").html()    
       //意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法 

       // 这段代码等同于用DOM实现代码： document.getElementById(" test ").innerHTML; 

       //虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错

       //约定：如果获取的是 jQuery 对象, 那么要在变量前面加上$. 

var $variable = jQuery 对象
var variable = DOM 对象

$variable[0]：jquery对象转为dom对象      $("#msg").html(); $("#msg")[0].innerHTML

二、选择器和筛选器

1、选择器

1 基本选择器      
$("*")  $("#id")   $(".class")  $("element")  $(".class,p,div")    和css选择器语法一样


2 层级选择器      
$(".outer div")  $(".outer>div")   $(".outer+div")  $(".outer~div")   和css选择器语法一样



3 基本筛选器      
$("li:first") 第一个
$("li:eq(2)") 索引等于2，索引从0开始
$("li:even") 索引为偶数的
$("li:gt(1)") 索引大于1的
$('li:lt(1)') 索引小与1的


4 属性选择器    
$('[id="div1"]')   $('[color=‘red’][id]')


5 表单选择器     
$("[type='text']")----->$(":text")         注意只适用于input标签  : $("input:checked")

2、筛选器

1  过滤筛选器     
$("li").eq(2)  $("li").first()  
$("ul li").hasclass("test")返回一个boolean值
 2  查找筛选器

$("div").children(".test"). 子代
$("div").find(".test")  后代
                               
 $(".test").next()下一个
 $(".test").nextAll()    
 $(".test").nextUntil() 直到什么停止中间的部分
                           
 $("div").prev()  上一个
 $("div").prevAll()  
 $("div").prevUntil()   
                        
 $(".test").parent()  $(".test").parents()  $(".test").parentUntil() 

 $("div").siblings() 所有的兄弟
 

三、两种循环方法

 jquery循环的两种方式
                 //方式一
//                 li=[10,20,30,40]
//                 dic={name:"cheng",age：‘24’}
//                 $.each(li,function(i,x){
//                     console.log(i,x)//i是索引或者key，x是值 
//                 })

                 //方式二
//                    $("tr").each(function(){
//                        console.log($(this).html()) this是遍历的元素
//                    })

四、操作元素

1、属性操作

--------------------------属性
$("").attr(); 自定义属性使用
$("").removeAttr();
$("").prop();固有属性使用
$("").removeProp();
--------------------------CSS类
$("").addClass(class|fn)
$("").removeClass([class|fn])
--------------------------HTML代码/文本/值
$("").html([val|fn])
$("").text([val|fn])
$("").val([val|fn|arr])
---------------------------
$("").css("color","red")

2、文档操作

//创建一个标签对象
    $("<p>")


//内部插入

    $("").append(content|fn)      ----->$("p").append("<b>Hello</b>");
    $("").appendTo(content)       ----->$("p").appendTo("div");
    $("").prepend(content|fn)     ----->$("p").prepend("<b>Hello</b>");
    $("").prependTo(content)      ----->$("p").prependTo("#foo");

//外部插入

    $("").after(content|fn)       ----->$("p").after("<b>Hello</b>");
    $("").before(content|fn)      ----->$("p").before("<b>Hello</b>");
    $("").insertAfter(content)    ----->$("p").insertAfter("#foo");
    $("").insertBefore(content)   ----->$("p").insertBefore("#foo");

//替换
    $("").replaceWith(content|fn) ----->$("p").replaceWith("<b>Paragraph. </b>");

//删除

    $("").empty()   只清空标签内的内容
    	
    $("").remove([expr])   连标签都删除了

//复制

    $("").clone([Even[,deepEven]])

3、css操作

CSS
        $("").css(name|pro|[,val|fn])
    位置
        $("").offset()      相对于视口的偏移量
        $("").position()			相对于已定位的父级标签的偏移量
        $("").scrollTop([val])   不加参数时显示当前滚动的位置，加参数时是滑动到参数的位置，如$(window).scrollTop(0)是返回顶部
        $("").scrollLeft([val])
    尺寸
        $("").height([val|fn])	什么都不包括
        $("").width([val|fn])
        $("").innerHeight()  包括padding
        $("").innerWidth()
        $("").outerHeight([soptions])。包括padding和border     
        $("").outerWidth([options])

五、扩展机制

<script>
    
$.extend(object)      //为JQuery 添加一个静态方法。
$.fn.extend(object)   //为JQuery实例添加一个方法。


    jQuery.extend({
          min: function(a, b) { return a < b ? a : b; },
          max: function(a, b) { return a > b ? a : b; }
        });
    console.log($.min(3,4));

//-----------------------------------------------------------------------

$.fn.extend({
    "print":function(){
        for (var i=0;i<this.length;i++){
            console.log($(this)[i].innerHTML)
        }

    }
});

$("p").print();
</script>