jQuery 基础

最新推荐文章于 2025-08-15 09:01:53 发布

转载最新推荐文章于 2025-08-15 09:01:53 发布 · 71 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/esdn/blog/903617

文章标签：

#javascript #ViewUI

为什么80%的码农都做不了架构师？>>>

$对象和 DOM对象转换

jQuery对象[0] ---> DOM对象
DOM对象 ----> $(DOM对象)

注意：一定要导入jQuery ，否则浏览器F12测试会认为 $('#i1') 就是doucument.getElementById('i1')

jQuery 选择器

普通选择器

id : $( '#i1' ) id=i1的标签

class : $('.c1') 所有class=c1 的标签

标签： $('a') 所有的a标签

层级选择器

组合选择 $(' a,.c2 ') 所有标签为a 且 class=c2 ,表示 &

子孙选择器 $('a li') 所有a下的 li 标签空格表示子子孙孙选择

子选择器 $('a>b') 子选择器（仅儿子）

基本选择器

:first

:last

:eq 索引

属性选择器

$('[type]')

$('[type="password"]')

$('input[type="password]"')

jQuery 筛选器

jquery对象.next() 下一个标签

jquery对象.prev() 上一个标签

jquery对象.parent() 父标签

jquery对象.children() 子标签

jquery对象.siblings() 除它之外，所有的兄弟标签

jquery对象.find('.c1') 子子孙孙中查找 class=c1的标签

jQuery属性设置

checkbox,radio 属性操作

prop ('checked'): 获取属性

prop('checked',true) 设置属性

注意：prop 设置的属性不会对html 进行更改，它只能设置 checked ,selected 等布尔值的属性

checkbox checked 注意事项

注意：jQuery 的prop 属性可以设置 checked 为 true | false
          但 html 中只有 unchecked 和 checked（checked="checked"）
          只要设置checked 就为选中状态
          无论 checked = 什么，如html 中checked =true,false,"true",123，asd 都为选中状态

checkbox 半选中状态 indeterminate

js：xxx.indeterminate = true

jQuery：xxx.prop('indeterminate ',true)

indeterminate 优先级大于checked

自定义属性操作

arrt('属性','属性值') 设置属性

removeAttr('属性') 移除属性

注意：不用attr 设置 checkbox 是因为 jQuery 1.x 和2.x 的版本存在Bug

jQuery 样式设置

添加样式 jQuery对象.addClass（'c1'）

移除样式 jQuery对象.removeClass（'c1'）

样式开关 jQuery对象.toggleClass('c1')

jQuery 设置样式

单个样式：jQuery对象.css('属性'，'属性值')
多个样式：jQuery对象.css({' 属性1' : '属性值1' , '属性值' : '属性值2 '})

jQuery 添加标签(文档处理)

添加

append()

prepend()

after()

before()

用法 :

var temp = "<p> 111 </p>"
$('ul').append(temp)

删除

remove() 删除所有
empty()仅删除文本

复制

clone

jQuery获取标签内容

jQuery对象.html() 获取html 对应JS .innnerHTML ,不能获取Input

jQuery对象.text() 获取html中包含的内容对应JS .innerText,不能获取input

jQuery对象.val() 获取对应标签的value 对应JS .value ,可以获取input

jQuery遍历

each()

$(':checkbox').each(function(){})

jQuery中的this

//DOM this
var tag = $(':checkbox')    //获取所有的checkbox
tag.each(function(){
    this.checked = true      // 这个this 代表DOM 中的this
})

//$(this)
var tag = $(':checkbox') 

tag.each(function(){
    $(this).porp('checked',true)   // jQuery 中的this 只有jQuery 对象才有prop 属性 
})

JS 三元运算

var a =条件? 真值:假值
如果条件为真，a 为真值，否则相反

可代替简单的if else

var v = (5>1)?1:2
aleret(v) //输出1

滚轮位置：

$(window).scrollTop() 获取垂直方向滚轮位置
$(window).scrollTop(0) 设置
scrollLeft()
offset() 获取html 坐标
offset().left 水平方向坐标
offset().top 垂直方向左边
position() 获取指定标签相对父标签的位置

jQuery 绑定事件
click() 给元素添加事件
blind('click' ,function(){}) 添加事件
unblind('click',function()) 删除事件
delegate('' ,'click' ,function(){}) 当事件触发的时候，才绑定相关函数
undelegate('标签','click',function(){}) 当事件除法的时候，删除相关函数

一般添加标签，且让标签有相关功能的时候，推荐用delegate() undelegate 用法如下

<input type="text">
<input type="button" value="添加">
<ul>
	<li>内容1</li>
	<li>内容2</li>
	<li>内容3</li>
</ul>

<script>
	$("input[type='button']").click(function(){
		var v = $('input[type="text"]').val()
		var temp =  "<li>" + v +"</li>"
		$('ul').append(temp)
	});

	$('ul').delegate('li','click',function(){
		console.log($(this).text())
	});

只执行定义的事件

像 a 或button 标签，默认有个onclick 事件，我们给它添加另一个事件的时候，点击就会执行2个事件

如果让它只执行自己的事件，需要加上 return false

<!-- 只执行自己的事件 -- >
// 方法1：DOM 操作  需要在标签后面加return 
<a href="http://www.baidu.com" onclick="return foo()"> 百度 </a>

<script>
function foo(){
    alert(123);
    return false           // return false 后，就不执行自带的事件 
}
</script>

// 方法2：jQuery 操作
$('a').click(function(){
    alert(456);
    return false;          //jQuery 操作，无须在标签后面加return
})

转载于:https://my.oschina.net/esdn/blog/903617