JQuery基础及css和属性操作 其他函数

JQuery语法

使用JQuery必须先导入jquery-X.X.X.js文件

jQuery中的选择器       $("选择器名称").函数名();

注意     $ 是jQuery的缩写,也就是说,选择器可以使用jQuery(":input")

 

jQuery   文档就绪函数

$(document).ready(function(){
    //jQuery代码
    console.log($(":input:disabled")),
});

 

简写文档就绪函数 $(function(){})

 

jQuery 与window.onload的区别

 

window.onload必须等待网页资源全部加载完成后,才能执行

文档就绪函数  只需等到网页DOM结构加载完成后,即可执行

window.onload在一个页面中只加载一次

文档就绪函数在一个页面中可以有n个

jQuery对象和js对象

使用$("")取到的节点为jQuery对象,只能调用jQuery方法,不能使用原生JS方法

$("#div1").click(function(){});正确

$("#div1").onclick=function(){};错误  使用jQuery调用原生JS

同理  使用getelement系列函数取到的为JS对象,也不能调用jQuery函数

jQuery对象和js对象的相互转换

jQuery对象转js对象 使用.get(index)或[index]选中度就是JS对象

$("div")[0].onclick(function(){});
$("div").get(0).onclick(function(){});

 

js对象转jQuery对象  使用$包裹JS对象

var div=document.getElementsByTagName("div");
$(div).click(function(){});

 

解决jquery多库冲突问题

页面中如果同时引入多个JS框架可能导致$冲突

解决方法

使用jQuery.noConflict();使jQuery放弃在全局使用$

使用jQuery关键字替代$  或者使用一个自执行函数

!function($){
//在自执行函数中,可以使用&替代jQuery
//除自执行函数外的其他区域,禁止jQuery使用$
}(jQuery);

 

 

 

css和属性操作

 

设置节点属性

$("#div1").attr("class","cls")

 

 

传入对象以键值对的形式同时设置多对属性

$("#div1").attr({
"class" :$("#div1").attr("class")+" cls1"
"name":"name1"
"style":"font-size:20px;color:red;" 
})

 

 

通过回调函数返回值，修改css的样式。

 

    $("button:eq(0)").click(function(){
            var id = setInterval(function(){
                $("#div1").css({
                    "width":function(index,value){
                        var v = parseFloat(value) + 1;
                        if(v>600){
                            clearInterval(id);
                        }
                        return v+"px";
                    }
                });
            },10);
        });

 

 

 

取到节点属性

console.log($("#div1").attr("id"));

 

 

删除节点属性

$("#div1").removeAttr("class")

 

 

attr与prop一样，都可以对节点进行读取和设置

attr与prop的区别

在读取属性名=属性值的属性时，attr将返回属性值和undefined   prop将返回true或false

 

也就是说，attr要取到的属性，必须是在标签上已经写明的属性，否则返回undefined

console.log($("input:eq(0)").attr("disabled"))
console.log($("input:eq(0)").prop("disabled"))

 

 

 

在原有class的基础上新增class名    如果没有class属性，将自动添加

$("#div1").addClass("cls")

 

 

删除指定的class名称，其他没删除的class名依然保留     如果删空将只留下class属性

$("#div1").removeClass("cls")

 

 

切换class 如果有指定class就删除    如果没有就新增

$("button:eq(0)").click(function(){
$("#div1").toggle("div1")
})

 

 

.html取到或设置节点中的HTML代码

.text取到或设置节点中的文本

.val取到或设置节点中的value值

console.log($("#div1").html("<p>555</p>").html())
console.log($("#div1").text("<p>555</p>").text())
console.log($("input").val("<p>6666</p>").val())
 

 

.css给节点添加css样式 属于行级样式表权限

$("#div1").css("color","#008000")

 

 

同时给多个节点添加多对css样式

$("#div1").css(function(){
"color":"#008000"
"font-size":"20px"
})

 

取到或设置节点的宽高

$("#div1").width("400px")
$("#div1").height(400)

 

 

取到节点的宽度+padding  不包含border和margin

$("#div1").innerHeight()
$("#div1").ininnerWidth()

 

 

不传参数  表示宽高+padding +border

传入true  表示宽高+padding +border+margin

console.log($("#div1").outerHeight())
console.log($("#div1").outerWidth(true))

 

 

返回一个节点相对于浏览器左上角的偏移量，返回一个对象{top：20px left：20px}

console.log($("#div1").offset())

 

 

返回一个节点相对于父容器的偏移量

注意   ①使用此方法   要求父元素必须是定位元素  如果父容器不是定位元素，则依然是相对于浏览器左上角进行测量

②使用此方法   测量偏移时，将不考虑margin  而会将margin视为当前容器的一部分

console.log($("#div1").position())

 

 

 

scrollTOp设置或取到指定节点的竖直滚动条的位置

$("#div1").scrollTOp()

 

水平 滚动条的位置

$("#div1").scrollLeft()

 

 

each用于遍历jQuery中的对象数在回调函数中使用returnfalse相当于breakreturntrue相当于continue

$("#ul li").each(function(index,value){
console.log(index)
console.log($(value).text())

 

在回调函数中 this指向当前调用函数的节点对象

this是一个JS对象，如果要使用JQ对象，需使用$(this)

console.log(this)
$(this).text($(value).text()+"qqq")
})

 

 

.size()  .length   返回所查询数组的个数

console.log($("#ul li").size())
console.log($("#ul li").length)

 

 

.get()将jQuery对象，转为JS对象

传入index表示取出第几个，并转为JS对象

不传参数，便是将jQuery中的所有对象，转为JS对象

console.log($("#ul li").get())

 

 

$.each（arr、obj，function(）{}）

对传入的数组或对象进行遍历，可以是jQuery对象数组，也可以是JS中的数组和对象

$.each($("li"),function(index,value){
         console.log(index)
console.log(value)    })

 

数组映射

var arr=[1,2,3,4]
var newarr=$.map(arr,function(index,value){
return value+5; })
 
console.log(newarr)

 

 

检测一个值是否在数组中，返回下标，没有返回-1   第三个参数表示查找的起始下标

var arr=[1,2,3,4]
var is=$.Array(2,arr,3)
console.log(arr.indexOf(2,3))
console.log(is)

 

 

将选中的jQuery  DOM集合   恢复成数组，数组的每一个对象都是JS对象

console.log($("#ul li").toArray())

 

 

合并两个数组

var arr=$.merge( [0,1,2], [2,3,4] )
console.log(arr)

 

 

$.parseJSON()将一个JSON字符串转换成JSON对象

var str='{"":"","":"","":"","":"","":"","":""}'
console.log(str)
console.log($.parseJSON(str))
});

 

 

检测一个节点是否包含另一个节点

console.log($.contains($("#ul")[0],$("#li")[0]))
console.log($.contains($("#li")[0],$("#ul")[0]))