jQuery学习（四）常用函数

最新推荐文章于 2019-12-31 16:34:34 发布

June.1

最新推荐文章于 2019-12-31 16:34:34 发布

阅读量306

点赞数 1

分类专栏： JQuery 文章标签：常用函数

本文链接：https://blog.csdn.net/qq_39043923/article/details/89151815

版权

JQuery 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

事件函数手册
 效果函数手册
 文档操作函数手册
 属性操作函数手册
 css操作函数手册
 Ajax操作函数手册
 遍历操作函数手册
以下是常用函数示例

jQuery 常用函数

html()

获取对象内容，并且包含对象HTML标签

text()

获取对象的文本内容，不包含标签

说明：

两种方法可以通过传参赋值对象的内容，但是需要注意。
html方法设置内容包含标签的情况下会被浏览器解析
text方法设置包含标签不会被浏览器解析，直接输出

示例：

/*
	获取对象的文本内容
	html获取到对象内容，包含标签
	text获取到对象内容，只有文本内容，不包含标签
*/

var html = $("div").html();
console.log(html);

var text = $("div").text();
console.log(text);
/* 
对象内容的赋值
*/
var o = "<a href='http://www.baidu.com'>百度</a>";
$("div").text(o);//相当于JS的innerText
$("div").html(o);//相当于JS的innerHTML

eq()

eq方法的作用在于从jquery对象的集合里面取出指定对象括号里面填写索引位置

//通过div选择器获取对象集合的第一个div (  eq(0)  ),并且操作内容为 hello world
$("div").eq(0).text("hello world");

//这是JS的写法
var obj = $("div");
obj[1].innerText = "您好";

val()、submit()

val() 获取对象的value值
可以通过传参赋值更改对象value值

submit() 提交表单

示例：

<form action="demo04.html">
    <p>
        <label for="name">姓名</label>
        <input type="text" id="name">
    </p>
    <p>
        <input type="submit" value="提交">
    </p>
</form>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
	//光标失去焦点
    $("#name").blur(function () {
    	//获取表单value
        var value = $(this).val();
        //如果表单value有数值
        if (value != '') {
        	//提交表单
            $("form").submit();
        }
    })

    $("form").submit(function () {
		//使用val()方法获取value值并且通过传参赋值方式更改value值
        $("#name").val("我要改变你！");
        console.log($("#name").val());
		//阻止表单提交
        return false;
    })
</script>

focus()、css()

focus() 光标聚集事件元素获得焦点时，发生 focus 事件。
css(name) 获取name属性的css样式 , name为字符串

css(name,value) 单个css样式操作 , name 就是css属性名,value是值. 两个属性必须为字符串
css("color",function(){return "red";}); value里面可以使用函数操作

css({name1：value1 , name2：value2}) 同时设置对象一个或多个css样式操作 , 就像json字符串一样传参用花括号包裹。value必须为字符串
如下例：

注意：value值如果是-连接的属性一定要使用驼峰命名法 ,例如： background-color 要写成 backgroundColor

//这样写多个css样式name和值之间用冒号隔开,
//value必须为字符串。 逗号为单个样式结束符
$("#nikeNote").text("昵称格式有误！").css(
	{
	    color: 'red',
	    backgroundColor:'orange',
	    fontSize:'20px'
	});

实战示例：

<form action="demo02.html" method="post">
    <p>
        <label for="nikename">昵称：</label>
        <input type="text" id="nikename" autocomplete="off">
        <small id="nikeNote"></small>
    </p>
    <p>
        <label for="pwd">密码：</label>
        <input type="text" id="pwd">
        <small id="pwdNote"></small>
    </p>
    <p>
        <label for="confirm">确认：</label>
        <input type="text" id="confirm">
        <small id="confNote"></small>
    </p>
    <p>
        <input type="submit" value="注册"/>
    </p>
</form>
<script src="jquery-3.1.3.min.js"></script>
<script>
    // 表单提交事件
    $("form").submit(function () {
        // 获取下面对象的value值
        var nikenameObj = $("#nikename").val();
        var pwdObj = $("#pwd").val();
        var confirmObj = $("#confirm").val();
        //昵称正则定义
        var nikeReg = /^[\w\u4e00-\u9fa5]{1,50}$/;
        // 密码正则定义
        var pwdReg = /^\w{5,16}$/;

        // 昵称验证正则
        if (!nikeReg.test(nikenameObj)) {
            // 密码有误提示文本信息,更改对象的css样式为红色
            $("#nikeNote").text("昵称格式有误！").css({color: 'red'});
            // 光标聚集到当前表单
            $("#nikename").focus();
            return false;
        } else {
            // 正则验证通过执行操作文本
            $("#nikeNote").text("√");
        }

        if (!pwdReg.test(pwdObj)) {
            $("#pwdNote").text("密码格式有误！");
            $("#pwd").focus();
            return false;
        } else {
            $("#pwdNote").text("√");
        }
        // 密码验证正则
        if (pwdObj != confirmObj) {
            // 文本方法提示
            $("#confNote").text("密码与确认密码不一致！");
            // 光标聚集
            $("#confirm").focus();
            return false;
        } else {
            // 操作文本
            $("#confNote").text("√");
        }
        // 返回给submit事件true 提交表单
        return true;
    })
</script>

append()

append() 对象内部结尾追加节点

<ol>
    <li>早上</li>
    <li>中午</li>
	<!--追加的元素放在这个位置-->
	<!--<li>呵呵</li>-->	
</ol>
<input type="button" value="添加"/>
<script src="jquery-3.3.1.min.js"></script>
<script>
    
$("input").click(function () {
	$("ol").append("<li>呵呵</li>");
})
</script>

prev()、 next()、 first()、 last()

prev(); 获取当前元素的上一个
next(); 获取当前元素的下一个
first(); 获取集合元素的第一个
last();获取集合元素的最后一个
clone(); 克隆元素当前元素

示例：

<ol>
    <li>早上</li>
    <li>中午</li>
    <li>下午</li>
    <li>晚上</li>
</ol>
<input type="button" value="添加"/>
<script src="jquery-3.3.1.min.js"></script>
<script>

    var a = $("ol li");

    // a 对象的第一个元素
    console.log(a.first().text()); // 输出 ： 早上

    // a对象的最后一个元素
    console.log(a.last().text());// 输出 ： 晚上

    // 获取对象集合中索引为2的元素
    var b = $("ol li").eq(2);

    // 获取他的上一个元素
    console.log(b.prev().text());// 输出 ： 中午

    // 获取他的下一个元素
    console.log(b.next().text());// 输出 ： 晚上

    // 克隆对象集合中索引为0的元素
    var c = $("ol li").eq(0).clone();

    //append 把 c 追加 ol 内末尾节点
    $("ol").append(c);

</script>

mouseover()、mouseout()

mouseover() 鼠标经过元素
mouseout() 鼠标离开元素

注意：这里需要理解一种js操作css思维。如果这里想实现css中的鼠标经过变色鼠标离开恢复原来的颜色, 需要 mouseout() 方法中再次操作样式为空。
这是为什么呢? 因为在你用js 操作css样式的时候会把样式添加到元素的行内（这样css样式优先级最高）。清空处理就相当于把用js操作的行内样式 style="" 清空。这样的话行内没有任何样式覆盖就会恢复到你定义的css原有样式

$("li").mouseover(function(){
	$(this).css({background:'#000'});
});

$("li").mouseout(function(){
	$(this).css({background:''});
})

attr() 、 prop()

attr() 可以获取操作对象原有属性和自定义属性
prop() 可以操作对象的原有属性,不能操作自定义属性

示例：

<div name="hello" id="k"></div>
<script src="jquery-3.3.1.min.js"></script>
<script>
    //设置对象的属性
    //console.log($("div").attr('name',"world"));
    // 修改后的对象 ：	<div id="k" name="world">
    //获取对象的属性
    console.log($("div").attr('name'));// 输出： hello
    console.log($("div").attr('id'));// 输出： k
    console.log($("div").prop("id"));// 输出： k
</script>

区别：

具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()。
下面例子可以看出在没有属性值的情况下,attr() 获取不到属性

示例：

<input id="chk1" type="checkbox" />
<input id="chk2" type="checkbox" checked="checked" />
<script src="jquery-3.3.1.min.js"></script>
<script>
    console.log($("#chk1").prop("checked"))  //false
    console.log($("#chk2").prop("checked"))	 //true

    console.log($("#chk1").attr("checked"))	 //undefined
    console.log($("#chk2").attr("checked"))  //checked

</script>

animate()

animate() 方法执行 CSS 属性集的自定义动画

语法：

animate(styles,speed,easing,callback) styles: 操作的css样式就像上面的css()语法, speed: 运动时间, easing: 运动曲线方式, callback: 回调函数
animate(styles,options) styles: 操作的css样式, options:里面可以是speed、easing、callback还有。
step - 规定动画的每一步完成之后要执行的函数
queue - 布尔值。指示是否在效果队列中放置动画。如果为 false，则动画将立即开始
specialEasing - 来自 styles 参数的一个或多个 CSS 属性的映射，以及它们的对应

示例1：

<div>1111</div>
<p>移动</p>
<script src="jquery-3.3.1.min.js"></script>
<script>
    $("p").click(function () {
        $("div").animate({left: '200px'}, 1500, 'swing');
        $("div").animate({top: '200px'}, 1500, 'linear');
        $("div").animate({left: '0px'}, 1500, 'linear');
        $("div").animate({top: '0px'}, 1500);
    })
</script>

示例2:

<div>1111</div>
<p>移动</p>
<script src="jquery-3.3.1.min.js"></script>
<script>
    $("p").click(function () {
    	//这里使用的就是第二种语法的调用函数传到第二个参数中
        $("div").animate({left: '200px'},setColor);
    })
    function setColor() {
        $("div").css({backgroundColor: 'red'});
    }
	//回到函数,效果是一样的。根据实际情况定义
	$("p").click(function () {
        $("div").animate({left: '200px'},function () {
            $("div").css({backgroundColor: 'red'});
        });
    })
</script>

addClass()、 removeClass()、siblings()

addClass(className) 添加class名 calssName：定义的class名
removeClass(className) 移除class名 calssName：定义的class名
siblings() 获得匹配集合中每个元素的同胞,不包含元素本身

<ul>
    <li class="active">首页1</li>
    <li>首页2</li>
    <li>首页3</li>
    <li>首页4</li>
    <li>首页5</li>
</ul>
<script src="jquery-3.3.1.min.js"></script>
<script>
	$("li").addClass('active'); //给所有元素添加class名
	$("li").removeClass('active'));//给所有元素移除class名
	$("li").first().siblings();//获取出第一个元素外所有同胞元素
	//选项卡案例
    $("li").click(function () {
    	//给当前元素添加class,并且移除所有同胞元素的class样式
        $(this).addClass('active').siblings().removeClass('active');
    })
</script>

index()

index() 获得第一个匹配元素相对于其同胞(同级)元素的 index 位置

<ul>
    <a href="#">hello</a>
    <li>1-1</li>
    <a href="#">哈哈</a>
    <li>2-1</li>
    <li>3-1</li>
    <li>4-1</li>
</ul>
<div>
    <ul>
        <a href="#">中国</a>
        <a href="#">oj</a>
        <li>1-2</li>
        <!--li中这就是第五个 eq(5)-->
        <li>2-2</li>
    </ul>
</div>

<script src="js/jquery-3.3.1.min.js"></script>
<script>
    // 找到索引为第5个的li元素
    $("ul li").eq(5).click(function () {
        console.log($(this).text());//输出： 2-2
        //监听的是集合对象，这样操作可以获取集合对象中的当前点击索引位置

        //获取索引时候，集合从当前所有兄弟元素都会被记录数量
        var i = $(this).index();//输出：  3
        console.log(i);
    })
</script>