如何使用JQ
1.官网下载jquery.js文件
2.导入jquery文件<script src="jquery.js"></script>
压缩版(compressed) 与 开发版(development)，我们在开发过程中使用开发版（开发版本便于代码修改及调试），项目上线发布使用压缩版（因为压缩版本体积更小，效率更快）。
选择元素
- $()
- css()
$('#div1').css('background','red');
$('div').css('background','red');
$('.box').css('background','red');
$ 和 jQuery
+ $ === jQuery
+ $是jQuery的别名
+ 为了简便, 我们通常使用$
绑定事件
通过调用的jquery对象上的click方法来
JS与JQ关系
- jq也是js
- js原生dom对象与jq对象不能混用
$("div").click(function(){});
- this指向
指向触发事件的原生dom对象
取值与赋值的关系
我们知道原生js中取值与赋值是通过直接操作对象属性来实现的
比如说innerHTML 属性
oDiv.innerHTML;//取值
oDiv.innerHTML = 'text';//赋值
在jquery中,实现相同的操作
$div.html();//取值
$div.html('text');//赋值
可以看到是否取值或赋值是通过传入参数的个数决定的
具有相同特征的还有
- css()
- attr() 属性
- val() 值
等方法
多元素取值
jq中查找到多个元素, 取值取第一个元素的值
属性选择器
css选择器中大多的语法都可以在jquery中使用
包括属性选择器
<input type="text" value="123">
<input type="text" value="456">
<input type="text" >
<script>
$('input[value]').css('background', 'red');//有value属性的会被选中
$('input[value=123]').css('background', 'red');//value值等于123的会被选中
</script>
<input type="text" value="123_555">
<input type="text" value="123_666">
<input type="text" value="333_888">
<script>
$('input[value^=123]').css('background', 'red');//选中以123开头的
$('input[value$=555]').css('background', 'red');//选中以555结尾的
$('input[value*=3]').css('background', 'red');//选中包含3的
</script>
