JQuery使用
引入文件链接：
https://pan.baidu.com/s/1ZJhH4MdmUnxILixri1AiYQ
提取码：auhj
<!--引入jq文件-->
<script type="text/javascript" src="jquery.min.js的路径"></script>
页面加载函数(页面加载完毕后自动触发的方法)
普通使用js写法
/*通过window对象 处理页面加载函数*/
window.οnlοad=function (){
alert("页面加载完毕")
}
使用jQuery写法
/*jQuery的核心函数*/
/*jQuery(document).ready(function (){
alert("页面加载完毕")
});*/
/*上面的简单写法*/
$(function () {
alert("页面加载完毕")
})
jQuery选择器
三大基本选择器（ID、元素、类）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script>
/*页面加载完自动触发*/
$(function () {
/*通过id获取页面元组 id选择器*/
var d1 = $('#d1');
console.info(d1)
/*根据标签名 元素选择器*/
var spans = $('span');
console.info(spans)
/*根据class属性 class选择器*/
var divs = $('.yyy');
console.info(divs)
})
</script>
</head>
<body>
<div id ='d1' class='xxx' >aaaa</div>
<div id ='d2' class='xxx' >bbbb</div>
<div id ='d3' class='yyy' >cccc</div>
<div id ='d4' class='yyy' >dddd</div>
<span >a</span>
<span >b</span>
<span >c</span>
</body>
</html>
其他选择器(具体操作见API)链接：
链接：https://pan.baidu.com/s/1g-0f_Sd6bu2J3VrLSu25Ig
提取码：epj7
- 基本选择器
> id: #id
> 元素
> class: .class
> *
- 层级选择器
> 空格
> 大于号(>)
> +
> ~
- 简单选择器
> 奇偶: even, odd
> 首尾: first, last
> 索引: lt, gt, eq
> 标题: header
> 取反: not
- 属性选择器
> [attribute], 选择带有某个属性的元素
> [attribute=value], 选择某个属性等于某个值的元素
> [attribute!=value], 选择某个属性不等于某个值的元素
> [attribute^=value], 选择某个属性以某个值开头的元素
> [attribute$=value], 选择某个属性以某个值结尾的元素
> [attribute*=value], 选择某个属性包含某个值的元素
> [selector1][selector2][selectorN], 选择多个属性时使用
- 表单选择器
> :input, 匹配所有input, textarea, select和button元素
> :text,:password, :radio, :checkbox, :submit, :reset, :image, :button, :hidden, :file. 分别匹配对应type的input元素.
> :checked, 匹配所有被选中的radio和checkbox.
> :selected, 匹配所有被选中的option
> :enabled, 匹配所有可用元素
> :disabled, 匹配所有不可用的元素
jQuery操作属性
原生js 中的写法： 元素.属性名 元素.setAttribute
jQuery写法：.attr() .removeAttr()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script>
function fun1() {
/*获取标签的属性*/
var $f1 = $('#f1');
var attr = $f1.attr('color');
console.info(attr)
/*获取size值*/
console.info($('#f1').attr('size'))
}
function fun2() {
/*修改属性值*/
$('#f1').attr('color','yellow');
$('#f1').attr('size','3');
}
function fun3() {
/*删除属性*/
$('#f1').removeAttr('color')
}
function fun4() {
/*添加属性，如果属性已经存在就是修改，如果属性不存在就是添加*/
$('#f1').attr('color','blue')
}
</script>
</head>
<body>
<font id='f1' color="red" size="7" aaa='uuuuu'>Hello World</font>
<input type="button" value="获得属性" onclick="fun1()" />
<input type="button" value="修改属性" onclick="fun2()" />
<input type="button" value="删除属性" onclick="fun3()" />
<input type="button" value="添加属性" onclick="fun4()" />
</body>
</html>
jQuery操作样式
原生js:元素.style.样式名 = ‘样式值’
jQuery:元素.css(样式名，样式值）
<script>
function fun1() {
/*奇偶选择器*/
$('tr:odd').css('background-color','yellow')
$('tr:even').css('background-color','yellowgreen')
/*设置第一行背景色为深绿色*/
$('tr:first').css('background-color','darkgreen')
}
</script>
jQuery操作内容
js中：innerHTML innerText value
jQuery中：html() text() val()
<script>
function fun1() {
/*获取标签的内容*/
console.info($('#d1').html())
console.info($('#d1').text())
console.info($('#i1').val())
}
function fun2() {
/*修改标签的内容*/
// $('#d1').html("<h3>三级标题</h3>")
$('#d1').text("<h3>三级标题</h3>")
$('#i1').val("这里是修改的内容")
}
function fun3() {
/*删除标签的内容,两种方式*/
// $('#d1').html('')
// $('#d1').text('')
// $('#i1').val('')
$('#d1').empty()
}
</script>
jQuery操作文档/标签
js：appendChild ,removeChild,empty
jQuery中:
-
向标签内部追加元素：append(),appendTo()
function fun1() { /*创建标签并设置样式*/ var span1 = $('<span>Hello World</span>') span1.css('color','green') span1.css('border','1px solid blue') /*将创建的标签放到div中*/ $('#d1').append(span1) } function fun2() { /*创建标签并设置样式*/ var span1=$('<span>Hello World<span>').css('color','green').css('border','1px solid blue') /*将创建的标签放到div中*/ span1.appendTo($('#d1')) } -
在标签之前追加元素：before(),insertBefore()
function fun3(){ /*创建标签并设置样式*/ var span1=$('<span style="color:green;border:1px solid blue">这里是文字<span>') /*将新标签放入div之前*/ $('#d1').before(span1) } function fun4(){ /*创建标签并设置样式*/ var span1=$('<span style="color:green;border:1px solid blue">这里是文字<span>') /*将新标签放入div之前*/ span1.insertBefore($('#d1')) } -
在标签之后追加元素：after(),insertAfter()
function fun5(){ /*创建标签并设置样式*/ var span1=$('<span style="color:green;border:1px solid blue">这里是文字<span>') /*将新标签放入div之后*/ $('#d1').after(span1) } function fun6(){ /*创建标签并设置样式*/ var span1=$('<span style="color:green;border:1px solid blue">这里是文字<span>') /*将新标签放入div之后*/ span1.insertAfter($('#d1')) } -
删除元素：empty(),remove()
function fun7(){ /*删除标签中的所有子标签*/ /*$('#d1').empty();*/ /*删除当前元素本身*/ $('#d1').remove(); }
jQuery操作事件
-
给元素事件绑定方法 bind()
function fun1() { $('#d1').bind('mouseover',function(){ //this代表当前元素 this是一个js对象 不能调用jQuery对象的方法 //$('#d1').css('backgroundColor','yellow') //this.style.backgroundColor='yellow' //将js对象转换成jQuery对象 $(this).css('backgroundColor','yellow') }); /*事件绑定的简写*/ $('#d1').mouseover(function () { //将js对象转换成jQuery对象 $(this).css('backgroundColor','yellow') }) /*绑定事件一次*/ /*$('#d1').one('mouseover',function(){ $(this).css('backgroundColor','yellow') })*/ /*$('#d1').one('mouseleave',function(){ $(this).css('backgroundColor','gray') })*/ /*$('#d1').bind('mouseleave',function(){ $(this).css('backgroundColor','gray') });*/ $('#d1').mouseleave(function(){ $(this).css('backgroundColor','gray') }); } -
给元素解除绑定 unbind()
function fun2() { /*解除绑定事件 解除所有绑定的事件*/ /*$('#d1').unbind();*/ /*解除指定的事件绑定*/ $('#d1').unbind('mouseleave') } -
手动触发事件
function fun3(){ /*手动触发获得焦点事件*/ $('#i1').focus() /*触发div的鼠标悬停事件*/ $('#d1').mouseover(); }
jQuery对象和JS对象的转换
通过jQuery方式获得的元素和原生JS方式获得的元素 是不一样的 方法不能混用
$(function(){
/*使用两种方式获得div中的文本*/
var d1=document.getElementById('d1');
console.info(d1.innerText)
var $d1=$('#d1');
console.info($d1.text())
/*为什么两种放式获得的对象方法不能通用?
* 两种方式获得的对象其实是不一样的
* js方式获得元素就是获得一个元素节点
* jQuery方式获得的是一个数组 目标元素就是数组中的元素
* */
/*可以将两种方式获得的对象进行转换*/
/*将js对象转化为jQuery对象*/
console.info( $(d1).text())
/*将jQuery对象转换为js*/
console.info($d1[0].innerText)
console.info($d1.get(0).innerText)
$('#d1').click(function (){
//this是js对象 将其转换成jquery对象再调用text()
console.info($(this).text())
})
})
扫一扫
3002
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
