初步学习jquery学习笔记（一）

什么是jquery？

Jquery是javascript的一个函数库包含以下功能:

html元素选取
html元素的操作
css操作
html事件的函数
javacript的特效
html的遍历和修改
ajex

jquery的引用

使用jquery的两种方法

下载对应的jQuery库，从jquery.com进行下载

<head> <script src="jquery-1.10.2.min.js"></script> </head>

2.使用CNN

百度

<head> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script> </head>
又拍

<head> <script src="https://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js"> </script> </head>
新浪

<head> <script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"> </script> </head>
谷歌

<head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script> </head>
微软

<head> <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script> </head>

jQuery基本语法

jquery语法是通过选取html元素，并对其进行选取元素执行某些操作

基础语法:$(selector).action()

美元符号定义jquery
selector选择符查询和查找对应html元素
jquery的action()执行对元素的操作

$(this).hide()-隐藏当前的元素

$("p").hide()-隐藏所有的<p>元素

$("p.test").hide()-隐藏所有class="test"的<p>元素

$("#test").hide()-隐藏所有id="test"的元素

文档就绪事件

$(document).ready(
function(){
//开始书写对应的jQuery代码
}
)

这样写的原因是：

防止文档加载之前运行jQuery代码-在DOM加载完成之后才进行操作

注意:

jQuery入口函数与js入口函数区别

$(document).ready(
    function(){
        //执行代码
    }
)
//或者
$(function(){
    //执行代码
})
//javascript入口函数
window.onload=function(){
    //执行代码
}

	window.onload	$(doucument).read()
执行时机	必须等待网页全部加载完毕，包括图片等	只需要等待网页中dom结构加载完毕，就可以执行包裹代码
执行次数	只能执行一次，如果执行两次，那么第一次执行会全部覆盖	可以执行多次，第n次都不会被上一次覆盖
简写方案	无	$(function(){});

Jquery选择器

jQuery选择器允许对html元素
jQuery选择器基于元素id、类、属性、属性值等进行查找html元素，它基于已经存在的css选择器。除此之外，它还有一个自定义的选择器。
jQuery中所有的选择器都是通过美元符号开头$()

元素选择器

<html>
    <head>
        <title>
            初始化jQuery
        </title>
        <script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js">
        </script>
        <script>
            $(document).ready(function(){
                $("button").click(
                    function(){
                        $("p").hide();
                    }
                )
            })
        </script>
    </head>
    <body>
            <h2>这是一个标题</h2>
            <p>这是一个段落。</p>
            <p>这是另一个段落。</p>
            <button>点我</button>
    </body>
</html>

#id选择器

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
</script>
</head>
<body>
<h2>这是一个标题</h2>
<p>这是一个段落</p>
<p id="test">这是另外一个段落，id为test</p>
<button>点一下我</button>
</body>
</html>

class选择器

<!DOCTYPE html>
<html lang="en">


<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
</script>
</head>


<body>
<h2 class="test">这是一个标题</h2>
<p class="test">这是一个段落。</p>
<p>这是另外一个段落。</p>
<button>点我</button>
</body>


</html>

其他例子

$("*")	选择所有的元素
$(this)	选择当前html元素
$("p.intro")	选择class为intro的p标签
$("p:first")	选择第一个<p>元素
$("ul li:first")	选取第一个<ul>元素的第一个<li>元素
$("ul li:first-child")	选取每个<ul>元素的第一个<li>元素
$("[href]")	选取带有href属性的元素
$("a[target="_blank"]")	选取所有target属性值等于"_blank"的<a>元素
$("a[target!='_blank']")	选取所有属性值不等于'_blank'的<a>元素
$("tr:even")	选取偶数位置的<tr>元素
$("tr:odd")	选取奇数位置的 <tr>元素