jQuery

林檎雨由利！

于 2024-05-21 17:16:45 发布

阅读量361

点赞数 4

文章标签： jquery 前端 javascript

本文链接：https://blog.youkuaiyun.com/2301_80767065/article/details/139097785

版权

第五章

1.jQuery格式

<head lang="en">
    <meta charset="UTF-8">
    <title> 广告图片轮播切换</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/jquery-1.12.4.js" type="text/javascript"></script>
    <script src="js/demo01.js" type="text/javascript"></script>
</head>
<body>

</body>
</html>

2.ready三种方式

$(document).ready(function () {
    
})
$(function () {
    
})
jQuery.ready(function () {
    
})

3.改变样式的四种方法

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-1.12.4.js" type="text/javascript"></script>
    <link rel="stylesheet" href="css/demo01.css">
    <style>
        .h1Style{
            color: red;
            background-color: pink;
        }
    </style>
</head>
<body>
<h1 id="h1Name">大家好</h1>
<input type="text" value="换" οnclick="huan()">
</body>
</html>
<script type="text/javascript">
    function huan() {
        //方法1：
        // $("#h1Name").css("color","red");
        // $("#h1Name").css("background-color","blue");
        //方法2：
        // $("#h1Name").css({"color":"red","background-color":"blue"})
        //方法3：
        // $("#h1Name").addClass("h1Style");
        //方法4：
        document.getElementById("h1Name").className="h1Style";
    }
</script>

4.jQuery语法结构

$(selector).action();

工厂函数$():将DOM对象转化为jQuery对象

选择器selector:获取需要操作的DOM元素

方法action():jQuery中提供的方法，其中包括绑定事件处理的方法

5.css方法

.css("属性","属性值");
    .css({"属性":"属性值","属性":"属性值"});

6.jQuery操作页面元素

1.使用addClass()方法为元素添加样式

2.使用css()方法设置元素样式

3.使用show(),hide()方法设置元素的显示和隐藏

7.jQuery和js的互相转换

//js转jQuery对象
    var h1Js=document.getElementById("h1Name");
    var h1$=$(h1Js);
    //jQuery转js/dom对象
    var h1$=$("#h1Name");
    var h1=h1$[0];

8.$(document).ready()

	window.onload	$(document).ready()
执行时机	必须等待网页中所有的内容加载完毕后（包括图片，flash，视频等）才能执行	网页中所有的DOM文档结构绘制完毕后即刻执行，可能与DOM元素关联的内容（图片，flash，视频等）并没有加载完
编写个数	同一页面不能同时编写多个	同一页面能同时编写多个
简化写法	无	$(function(){ //执行代码 })；