H5基础知识第十三课时(JQuery)

来源：互联网发布：mysql的master slave 编辑：程序博客网时间：2024/04/29 09:04

JQuery

(1)JQuery优势

(2)JQuery语法

格式：$(selector).action()

美元符号$本身是JQuery对象的缩写

选择符selector查询和查找HTML元素

Action执行对元素的操作

示例：

$('p').hide()：隐藏p元素

(3)JQuery文档就绪函数

为了防止文档在完全加载之前运行JQuery代码,可以多次执行， 不会被上一次覆盖

$(document).ready(function() {

$(selector).action()

})

或者

$(function() {

$(selector).action()

})

(4)对象转换

原生dom对象(js对象)转换成jQuery对象方法：

$(js对象)

jQuery对象转换成原生dom对象(js对象)：

1. $(jQuery对象)[0]

2. $jQuery对象.get(0)

<scriptsrc="../../js/jquery-3.1.1.min.js"></script>

<script>

vard=document.getElementById('d');

$(d).html('fsdfsdfsdsd');

vare=$("#e");

// e[0].innerText='sdsdsds';

e.get(0).innerText='sdsssdsd';

</script>

(5)解决多库冲突

放弃$符号

jQuery.noConflict() (必须放在第一行)

jQuery(selector).action();

(6)jQuery选择器

(7)设置元素及内容

<body>

<divid="d">

<p>adasda</p>

<a>eeeee</a>

<!--把标签当作普通文本进行解析-->

<xmp><p>ffffffff</p></xmp>

<inputtype="text"id="t"value="aaaaaaaa"/>

</div>

</body>

<scriptsrc="../../js/jquery-3.1.1.min.js"></script>

<script>

//获取div标签内部的元素

// alert($("#d").html())

//修改div标签里的内容

// $("#d").html('<span>fff</span> <h1>saa</h1>ddd');

//获取div标签内部的文本

// alert($("#d").text())

//修改div标签里的文本

// $("#d").text('<p>deeeee</p>123434343')

//

//获取输入框的value值

alert($("#t").val());

//修改value属性值

$("#t").val('12345657');

</script>

(8)操作元素属性

<body>

<inputtype="text"id="t"name="123"value="eafsfs">

</body>

<scriptsrc="../../js/jquery-3.1.1.min.js"></script>

<script>

//获取name属性值

// alert($("input").attr('name'))

//修改name属性值

// $("input").attr('name','321');

// $("input").attr('type','password');

// $("input").attr('id','test');

//修改多个属性值

$("input").attr({'name':'321','type':'password','id':'test'})

</script>

(9)操作CSS

<style>

div{

height:300px;

width:300px;

background-color:orange;

}

.a{

background-color:red;

}

</style>

<body>

<divid="d"></div>

</body>

<scriptsrc="../../js/jquery-3.1.1.min.js"></script>

<script>

$("#d").mouseover(function() {

// $(this).addClass('a');

//在添加类和删除类来回切换时，推荐使用toggleClass方法

$(this).toggleClass('a');

}).mouseout(function() {

// $(this).removeClass('a');

$(this).toggleClass('a');

})

</script>

阅读全文

0 0