jquery

理解 $(function(){})

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。
换句话说，写在这里面的JQuery代码都是文档加载好之后的。
就不会有获取一个还没有加载好的图片这种问题了。

另一种写法
$(document).ready(function(){
});

通过id获取元素
与javascript通过id获取元素节点的方式(document.getElementById )不同
JQuery通过 $("#id") 就可以获取了

需要注意的是，通过 document.getElementById 获取到的是 DOM里的 元素节点
而通过$("#id") 获取到的是一个 JQuery 对象

增加监听器
$("#b1").click(function(){
   alert("点击了按钮");
});
两个部分 
$("#b1").click(); 

function(){
   alert("点击了按钮");
}

使用的话就是起名， 名字.方法进行调用 方法没参数就是查看 有参数就是修改

概念

jquery是一个库

作用

jQuery这么流行，肯定是因为它解决了一些很重要的问题。实际上，jQuery能帮我们干这些事情：

• 消除浏览器差异：你不需要自己写冗长的代码来针对不同的浏览器来绑定事件，编写AJAX等代码；
• 简洁的操作DOM的方法：写 $(’#test’) 肯定比 document.getElementById(‘test’) 来得简洁；
• 轻松实现动画、修改CSS等各

公式： $(selector).action()

• 美元符号定义 jQuery
• 选择符（selector）“查询"和"查找” HTML 元素
• jQuery 的 action() 执行对元素的操作

选择器

• 查找

  • 根据id查找 var div = $(’#id’);

  • 根据tag查找 var ps = $(‘p’);

  • 根据class查找 var a = $(’.red’);

  • 根据属性查找 $Iloveyou$

    • var email = $(’[name=email]’); // 找出

    • var passwordInput = $(’[type=password]’); // 找出

    • var a = $(’[items=“A B”]’); // 找出

    • 当属性的值包含空格等特殊字符时，需要用双引号括起来

    • 按属性查找还可以使用前缀查找或者后缀查找：

      var icons = $('[name^=icon]'); // 找出所有name属性值以icon开头的DOM
      // 例如: name="icon-1", name="icon-2"
      var names = $('[name$=with]'); // 找出所有name属性值以with结尾的DOM
      // 例如: name="startswith", name="endswith"
      

操作dom

修改Text和Html

• jQuery对象的 text() 和 html() 方法分别获取节点的文本和原始HTML文本

<!-- HTML结构 -->
<ul id="test-ul">
    <li class="js">JavaScript</li>
    <li name="book">Java &amp; JavaScript</li>
</ul>


$('#test-ul li[name=book]').text(); // 'Java & JavaScript'
$('#test-ul li[name=book]').html(); // 'Java &amp; JavaScript'

• 如何设置文本或HTML？jQuery的API设计非常巧妙：无参数调用 text() 是获取文本，传入参数就变
  成设置文本

修改css

• 高亮显示动态语言

$('#test-css li.classname').css('background-color', '#ffd351').css('color','red');

注意，jQuery对象的所有方法都返回一个jQuery对象（可能是新的也可能是自身），这样我们可以进行
链式调用，非常方便。

• jquery的css()方法

var div = $('#test-div');
div.css('color'); // '#000033', 获取CSS属性
div.css('color', '#336699'); // 设置CSS属性
div.css('color', ''); // 清除CSS属性

css() 方法将作用于DOM节点的 style 属性，具有最高优先级。如果要修改 class 属性，可
以用jQuery提供的下列方法

var div = $('#test-div');
div.hasClass('highlight'); // false， class是否包含highlight
div.addClass('highlight'); // 添加highlight这个class
div.removeClass('highlight'); // 删除highlight这个class

显示和隐藏dom

要隐藏一个DOM，我们可以设置CSS的 display 属性为 none ，利用 css() 方法就可以实现。
不过，要显示这个DOM就需要恢复原有的 display 属性，这就得先记下来原有的 display 属性到
底是 block 还是 inline 还是别的值。
考虑到显示和隐藏DOM元素使用非常普遍，jQuery直接提供 show() 和 hide() 方法，我们不用关
心它是如何修改 display 属性的，总之它能正常工作：

获取dom信息

// 浏览器可视窗口大小:
$(window).width(); // 800
$(window).height(); // 600

// HTML文档大小:
$(document).width(); // 800
$(document).height(); // 3500

// 某个div的大小:
var div = $('#test-div');
div.width(); // 600
div.height(); // 300
div.width(400); // 设置CSS属性 width: 400px，是否生效要看CSS是否有效
div.height('200px'); // 设置CSS属性 height: 200px，是否生效要看CSS是否有效

attr() 和 removeAttr() 方法用于操作DOM节点的属性

操作表单

对于表单元素，jQuery对象统一提供 val() 方法获取和设置对应的 value 属性：取值和赋值问题

添加dom

要添加新的DOM节点，除了通过jQuery的 html() 这种暴力方法外，还可以用 append() 方法，

给ul中新增加一个li   类似于字符串的拼接
var ul = $('#test-div>ul');
ul.append('<li><span>Haskell</span></li>');

# append() 把DOM添加到最后， prepend() 则把DOM添加到最前。

如果要把新节点插入到指定位置，例如，JavaScript和Python之间，那么，可以先定位到JavaScript，然
后用 after() 方法：
var js = $('#test-div>ul>li:first-child');
js.after('<li><span>Lua</span></li>');

删除节点

要删除DOM节点，拿到jQuery对象后直接调用 remove() 方法就可以了。

事件

鼠标事件

键盘事件

keydown：键盘按下时触发； keyup：键盘松开时触发； keypress：按一次键后触发。

其他事件

focus：当DOM获得焦点时触发； blur：当DOM失去焦点时触发； change：当内容改变时
触发； submit：当提交时触发； ready：当页面被载入并且DOM树完成初始化后触发。

初始化事件

我们自己的初始化代码必须放到 document 对象的 ready 事件中，保证DOM已完成初始化：

<script>
	$(document).on('ready', function () {
		$('#testForm).on('submit', function () {
			alert('submit!');
		});
	});
</script>

代码简化
$(document).ready(function () {
	$('#testForm).submit(function () {
		alert('submit!');
	});
});

最简
$(function () {
	// init...
});