2016.12.9 Jquery

如何使用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>