jQuery选择器和操作CSS样式

1、jQuery选择器的迭代

 

• $("p")

• $(".box")

• $("#box")

• $("#box ul li")

• $("li.special")

• $("ol , ul")

• $("*")----获取document里面所有的元素

2、animate函数

/* 
    animate函数------animate(obj,myJson,time,callBack);
    对于animat来说单纯的js对象不能被animate点，要把对象放在$()里面才能用Jquery里  面的东西。
*/
/* 方式一 */
$(".box p").animate({left:500},2000,function(){
    console.log("运行结束！");
})
​
/* 方式二 */
var a = $("ul li p");
$(a).animate({left:600},2000,function () {
    alert("运动完成！");
});
​

3、筛选选择器

还是比较重要的

/* 
    筛选选择器 ---- 都是从0开始
    lt() ---- 小于
    gt() ---- 大于
    odd() ---- 奇数从 从下标1开始
    even() ----偶数
    eq() ---- 选中第n个目标,
    
*/
$(".box p:lt(2)");//在选中的集合中选中小于（个数）2的p
$(".box p:gt(2)");//在选中的集合中选中大于（个数）2的p
​
/* eq()动态获取（解耦） */
var a = 2;
$(".box p").eq(a).css({background:"deeppink"});

map方法

类数组没有map等方法

/* 原生map--数组下面的方法---对比---Python的map方法可以直接传入对象 */
var arr = [1,2,3];
var arr1 = [3,4,56];
var b = arr.map(function(items){
    return items+1;
});
/*
参考Python的写法，Python没有数组，有列表
    arr = [1,2,3]
    def add(items):
        return items+1
    print(list(map(add,arr)))---[2, 3, 4]
*/
​
console.log(b);//Array(3) [ 2, 3, 4 ]
    
/* jQuery--map方法 可以批量操作*/
    var num = $(".box p").map(function(items){
        return $(this).html()
    })

 

获取表单的内容----map的简单应用

<form action="#">
    姓名:<input type="text"><br><br>
    年龄:<input type="text"><br><br>
    性别:<input type="text"><br><br>
    <button>提交</button>
</form>
<script src='https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js'></script>
<script>
    $("button").click(function(){
        var arr = $("input").map(function(){
            return $(this).val();//于数组的形式返回
        })
        console.log(arr.get(1));//获取年龄
    });;
</script>

slice、children方法

/*  
    slice(a,b)
    选中从a到b但是不包括b
    从下标0开始
*/
$(".bxo p").slice(1,3).css({"background":"green"});
​
/*
    children()
    选中指定的亲儿子
*/
$(".bxo p").children("span").css({"background":"green"});
​
/*
    find() -- 选中指定的后代，不给参数的话就是选中当前对象的所有子标签
    ，也可以不给参数
*/
$(".bxo p").children("span").css({"background":"green"});
​
/* parent()---选中父亲，不需要传参数 */
$("p").parent().css({backgroundColor:"deeppink"});
​
/* parents ---选中指定的父亲 可以选参数  */
 $("p").parents("li").css({backgroundColor:"deeppink"});
​
/*  */

添加和删除类名

/* 
    添加类名：
        addClass("类名")--添加类名
        removeClass("类名")--删除类名
        siblings() --- 选中其他兄弟
*/
/* 添加并且删除其余兄弟的所有类名"on" */
var a = $("ul li");
a.click(function () {
    $(this).addClass("on").siblings().removeClass("on");
});

2、jQuery操作CSS样式

/* 设置单个样式 */
$(".box p").css("background","deeppink");
/* 设置多个样式 */
$(".box p").css({
    background:"deeppink",
    width:100
})
/* 在原来的基础上添加宽高 */
$(".box p").css({
    background:"deeppink",
    width:"+=50"//在原来的基础上加50像素
})
/* 获取原来定位的位置 */
var left = $("div p").position().left;
var Top = $("div p").position().top;
​
/* 获取内容的宽高：实际样式 */
var width = $("div p").width();
var height = $("div p").height();
​
/* widht+padding+border---要border */
var width = $("div p").outerWidth();
var height = $("div p").outerHeight();
​
/* widht+padding -- 不要border*/
var width = $("div p").innerWidth();
var height = $("div p").innerHeight();
​
/* 滚动条高度 时实获取滚动高度 */
$(document).scroll(function () {
    console.log($(this).scrollTop());
});