前端 JQuery

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等各

引入jq

公式： $(selector).action()

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

选择器

• 查找

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

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

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

  • 根据属性查找 I l o v e y o u I love you 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() 方法就可以了。

事件

鼠标事件

click	鼠标单击时触发；
dblclick：	鼠标双击时触发；
mouseenter：	鼠标进入时触发；
mouseleave：	鼠标移出时触发；
mousemove：	鼠标在DOM内部移动时触发；
hover：	鼠标进入和退出时触发两个函数

键盘事件

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...
});