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

时间：2018-05-06 22:29:03 阅读：260 评论：0 收藏：0 [点我收藏+]

标签：interval query red 解决方法包含 ict 区域样式表 disable

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

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

标签：interval query red 解决方法包含 ict 区域样式表 disable

原文地址：https://www.cnblogs.com/fylong/p/8999743.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行

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

JQuery语法

jQuery 与window.onload的区别

jQuery对象和js对象

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

解决jquery多库冲突问题

css和属性操作

attr与prop的区别

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