jquery入门(一)
什么是jquery
JS和jq的关系:jquery库里存在大量JS函数、
jquery公式:$(selector).action()
jquery选择器就是css选择器
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<a href="" id="test">点我</a>
<script>
$(‘#test‘).click(function(){
alert(‘hello,world‘)
})
</script>
jquery选择器
选择器就是css选择器
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
//原生js选择器,选择器少,写的麻烦
//标签
document.getElementsByTagName();
//ID
document.getElementById();
//类
document.getElementsByClassName();
//jquery选择器 css中的选择器全部能用
$(‘p‘).click();//标签选择器
$(‘#id‘).click();//ID选择器
$(‘.class‘).click();//类选择器
</script>
jquery事件 action
- 鼠标事件
- 键盘事件
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style>
#divMove{
width: 500px;
height:500px;
border: 1px solid red;
}
</style>
<!--要求获取鼠标当前的一个坐标-->
mouse:<span id="mouseMove"></span>
<div id="divMove">
在这里点击鼠标试一试
</div>
<script>
//当网页元素加载完毕后,响应事件
// $(document).ready(function(){
//
// })
//以上内容简化为
$(function () {
$(‘#divMove‘).mousemove(function(e){
$(‘#mouseMove‘).text(‘x:‘+ e.pageX+‘y:‘+ e.pageY)
})
})
</script>
jquery操作DMO元素
$(‘#test-ul li[name=python]‘).text()//获得值
$(‘#test-ul li[name=python]‘).text(‘123456‘)//设置值为123456
$(‘#test-ul‘).html(‘‘);//获得值
$(‘#test-ul‘).html(‘<strong>123</strong>‘);//设置值
//css
$(‘#test-ul li[name=python]‘).css({ "color": "#ff0011", "background": "blue" });
元素的显示和隐藏:本质:display=none;
复习笔记参考资料来自B站UP主:狂神说